echarts折线图📈从入门到放弃

数据源采集手机的mach接口获取的CPU和内存数据,每秒调用取一次,收集起来转成echarts的数据格式即可
采用的是echarts的line-gradient图表??样式

https://echarts.apache.org/examples/zh/editor.html?c=line-gradient

OC代码

获取CPU和内存

// 需要 #include  头文件
//获取CPU用量
+ (float)getCpuUsage
{
    kern_return_t           kr;
    thread_array_t          thread_list;
    mach_msg_type_number_t  thread_count;
    thread_info_data_t      thinfo;
    mach_msg_type_number_t  thread_info_count;
    thread_basic_info_t     basic_info_th;

    kr = task_threads(mach_task_self(), &thread_list, &thread_count);
    if (kr != KERN_SUCCESS) {
        return -1;
    }
    float cpu_usage = 0;

    for (int i = 0; i < thread_count; i++)
    {
        thread_info_count = THREAD_INFO_MAX;
        kr = thread_info(thread_list[i], THREAD_BASIC_INFO,(thread_info_t)thinfo, &thread_info_count);
        if (kr != KERN_SUCCESS) {
            return -1;
        }

        basic_info_th = (thread_basic_info_t)thinfo;

        if (!(basic_info_th->flags & TH_FLAGS_IDLE))
        {
            cpu_usage += basic_info_th->cpu_usage;
        }
    }

    NSUInteger CPUNum = [NSProcessInfo processInfo].activeProcessorCount;
    cpu_usage = cpu_usage / (float)TH_USAGE_SCALE * 100.0 / CPUNum;

    vm_deallocate(mach_task_self(), (vm_offset_t)thread_list, thread_count * sizeof(thread_t));

    return cpu_usage;
}

//获取内存
+ (float)getAppMemory{
    NSUInteger memoryUsageInByte = 0;
    task_vm_info_data_t vmInfo;
    mach_msg_type_number_t count = TASK_VM_INFO_COUNT;
    kern_return_t kernelReturn = task_info(mach_task_self(), TASK_VM_INFO, (task_info_t) &vmInfo, &count);
    if(kernelReturn == KERN_SUCCESS) {
        memoryUsageInByte = (NSUInteger) vmInfo.phys_footprint;
    } else {
        return -1;
    }
    return memoryUsageInByte/1024.0/1024.0;
}

Vue代码

package.json

{
    "name": "show_data_echarts",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve --open",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "core-js": "^3.6.5",
        "echarts": "^5.2.1",
        "vue": "^2.6.11"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^4.5.0",
        "@vue/cli-plugin-eslint": "^4.5.0",
        "@vue/cli-service": "^4.5.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "less": "^3.0.4",
        "less-loader": "^5.0.0",
        "vue-template-compiler": "^2.6.11"
    }
}

main.js

import Vue from 'vue'
import App from './App.vue'
import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts
Vue.config.productionTip = false

new Vue({
    echarts,
    render: h => h(App)
}).$mount('#app')

App.vue

原生代码

  
    
    
    
    
    
    
  

  
    

      

        
         
        
      
      

        

          选择CPU数据: 
          
        
        

          选择内存数据: 
          
        
      
      
生成图表
      

      

      

      

    

    
  

样例数据源

CPU数据

[["19:28:11", 0.30],["19:28:12", 6.35],["19:28:13", 7.35],["19:28:14", 7.22],["19:28:15", 7.42],["19:28:16", 6.57],["19:28:17", 5.75],["19:28:18", 6.47],["19:28:19", 6.22],["19:28:20", 6.10],["19:28:21", 6.07],["19:28:22", 5.90],["19:28:23", 5.68],["19:28:24", 5.77],["19:28:25", 6.38],["19:28:26", 5.28],["19:28:27", 6.67],["19:28:28", 5.90],["19:28:29", 6.17],["19:28:30", 5.20],["19:28:31", 5.90],["19:28:32", 7.47],["19:28:33", 6.93],["19:28:34", 6.88],["19:28:35", 8.10],["19:28:36", 7.48],["19:28:37", 7.27],["19:28:38", 5.60],["19:28:39", 5.70],["19:28:40", 5.57],["19:28:41", 5.60],["19:28:42", 5.83],["19:28:43", 5.93],["19:28:44", 6.53],["19:28:45", 6.45],["19:28:46", 6.67],["19:28:47", 6.02],["19:28:48", 6.73],["19:28:49", 6.47],["19:28:50", 6.03],["19:28:51", 5.35],["19:28:52", 5.58],["19:28:53", 5.45],["19:28:54", 5.70],["19:28:55", 6.42],["19:28:56", 7.45],["19:28:57", 8.12],["19:28:58", 8.03],["19:28:59", 6.25],["19:29:00", 6.47],["19:29:01", 6.38],["19:29:02", 7.08],["19:29:03", 6.78],["19:29:04", 6.25],["19:29:05", 5.88],["19:29:06", 6.33],["19:29:07", 6.75]]

内存数据

[["19:28:11", 13.17],["19:28:12", 15.61],["19:28:13", 18.72],["19:28:14", 18.94],["19:28:15", 19.17],["19:28:16", 19.42],["19:28:17", 19.94],["19:28:18", 16.69],["19:28:19", 16.11],["19:28:20", 16.05],["19:28:21", 16.05],["19:28:22", 15.84],["19:28:23", 17.16],["19:28:24", 16.94],["19:28:25", 17.38],["19:28:26", 16.92],["19:28:27", 17.97],["19:28:28", 18.02],["19:28:29", 27.70],["19:28:30", 18.80],["19:28:31", 18.61],["19:28:32", 17.77],["19:28:33", 16.58],["19:28:34", 16.56],["19:28:35", 15.97],["19:28:36", 16.24],["19:28:37", 16.03],["19:28:38", 14.88],["19:28:39", 14.83],["19:28:40", 14.83],["19:28:41", 14.86],["19:28:42", 16.00],["19:28:43", 14.84],["19:28:44", 16.03],["19:28:45", 14.89],["19:28:46", 16.05],["19:28:47", 16.27],["19:28:48", 16.03],["19:28:49", 16.03],["19:28:50", 16.03],["19:28:51", 16.03],["19:28:52", 16.03],["19:28:53", 16.06],["19:28:54", 16.05],["19:28:55", 16.25],["19:28:56", 16.03],["19:28:57", 16.03],["19:28:58", 16.30],["19:28:59", 14.94],["19:29:00", 14.91],["19:29:01", 14.88],["19:29:02", 16.56],["19:29:03", 15.49],["19:29:04", 16.61],["19:29:05", 16.61],["19:29:06", 16.61],["19:29:07", 16.42]]

下载demo数据文件

cpu.txt.zip

update:2021-12-22

memery.txt.zip

update:2021-12-22