仿Win10任务管理器6核CPU使用率曲线echarts 配置项内容和展示

仿Win10任务管理器6核CPU使用率曲线

      option = {
    "grid": [{
        "show": true,
        "z": 2,
        "left": "2%",
        "top": "14%",
        "width": "31.25%",
        "height": "41.04%",
        "containLabel": false,
        "backgroundColor": "transparent",
        "borderColor": "rgb(17,125,187)"
    }, {
        "show": true,
        "z": 2,
        "left": "34.5%",
        "top": "14%",
        "width": "31.25%",
        "height": "41.04%",
        "containLabel": false,
        "backgroundColor": "transparent",
        "borderColor": "rgb(17,125,187)"
    }, {
        "show": true,
        "z": 2,
        "right": "2%",
        "top": "14%",
        "width": "31.25%",
        "height": "41.04%",
        "containLabel": false,
        "backgroundColor": "transparent",
        "borderColor": "rgb(17,125,187)"
    }, {
        "show": true,
        "z": 2,
        "left": "2%",
        "bottom": "2%",
        "width": "31.25%",
        "height": "41.04%",
        "containLabel": false,
        "backgroundColor": "transparent",
        "borderColor": "rgb(17,125,187)"
    }, {
        "show": true,
        "z": 2,
        "left": "34.5%",
        "bottom": "2%",
        "width": "31.25%",
        "height": "41.04%",
        "containLabel": false,
        "backgroundColor": "transparent",
        "borderColor": "rgb(17,125,187)"
    }, {
        "show": true,
        "z": 2,
        "right": "2%",
        "bottom": "2%",
        "width": "31.25%",
        "height": "41.04%",
        "containLabel": false,
        "backgroundColor": "transparent",
        "borderColor": "rgb(17,125,187)"
    }],
    "xAxis": [{
        "show": true,
        "data": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60"],
        "position": "bottom",
        "boundaryGap": true,
        "splitNumber": 6,
        "type": "category",
        "name": "",
        "axisLabel": {
            "rotate": 0,
            "interval": 10,
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "rgb(17,125,187)"
            }
        },
        "gridIndex": 0,
        "scale": false,
        "splitLine": {
            "show": true
        },
        "axisTick": {
            "show": false
        }
    }, {
        "show": true,
        "data": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60"],
        "position": "bottom",
        "boundaryGap": true,
        "splitNumber": 6,
        "type": "category",
        "name": "",
        "axisLabel": {
            "rotate": 0,
            "interval": 10,
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "rgb(17,125,187)"
            }
        },
        "gridIndex": 1,
        "scale": false,
        "splitLine": {
            "show": true
        },
        "axisTick": {
            "show": false
        }
    }, {
        "show": true,
        "data": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60"],
        "position": "bottom",
        "boundaryGap": true,
        "splitNumber": 6,
        "type": "category",
        "name": "",
        "axisLabel": {
            "rotate": 0,
            "interval": 10,
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "rgb(17,125,187)"
            }
        },
        "gridIndex": 2,
        "scale": false,
        "splitLine": {
            "show": true
        },
        "axisTick": {
            "show": false
        }
    }, {
        "show": true,
        "data": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60"],
        "position": "bottom",
        "boundaryGap": true,
        "splitNumber": 6,
        "type": "category",
        "name": "",
        "axisLabel": {
            "rotate": 0,
            "interval": 10,
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "rgb(17,125,187)"
            }
        },
        "gridIndex": 3,
        "scale": false,
        "splitLine": {
            "show": true
        },
        "axisTick": {
            "show": false
        }
    }, {
        "show": true,
        "data": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60"],
        "position": "bottom",
        "boundaryGap": true,
        "splitNumber": 6,
        "type": "category",
        "name": "",
        "axisLabel": {
            "rotate": 0,
            "interval": 10,
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "rgb(17,125,187)"
            }
        },
        "gridIndex": 4,
        "scale": false,
        "splitLine": {
            "show": true
        },
        "axisTick": {
            "show": false
        }
    }, {
        "show": true,
        "data": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60"],
        "position": "bottom",
        "boundaryGap": true,
        "splitNumber": 6,
        "type": "category",
        "name": "",
        "axisLabel": {
            "rotate": 0,
            "interval": 10,
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "rgb(17,125,187)"
            }
        },
        "gridIndex": 5,
        "scale": false,
        "splitLine": {
            "show": true
        },
        "axisTick": {
            "show": false
        }
    }],
    "yAxis": [{
        "show": true,
        "position": "left",
        "scale": false,
        "max": 100,
        "min": 0,
        "splitNumber": 5,
        "type": "value",
        "name": "",
        "axisLabel": {
            "formatter": "",
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "rgb(17,125,187)"
            }
        },
        "gridIndex": 0,
        "splitLine": {
            "show": true
        },
        "axisTick": {
            "show": false
        }
    }, {
        "show": true,
        "position": "left",
        "scale": false,
        "max": 100,
        "min": 0,
        "splitNumber": 5,
        "type": "value",
        "name": "",
        "axisLabel": {
            "formatter": "",
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "rgb(17,125,187)"
            }
        },
        "gridIndex": 1,
        "splitLine": {
            "show": true
        },
        "axisTick": {
            "show": false
        }
    }, {
        "show": true,
        "position": "left",
        "scale": false,
        "max": 100,
        "min": 0,
        "splitNumber": 5,
        "type": "value",
        "name": "",
        "axisLabel": {
            "formatter": "",
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "rgb(17,125,187)"
            }
        },
        "gridIndex": 2,
        "splitLine": {
            "show": true
        },
        "axisTick": {
            "show": false
        }
    }, {
        "show": true,
        "position": "left",
        "scale": false,
        "max": 100,
        "min": 0,
        "splitNumber": 5,
        "type": "value",
        "name": "",
        "axisLabel": {
            "formatter": "",
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "rgb(17,125,187)"
            }
        },
        "gridIndex": 3,
        "splitLine": {
            "show": true
        },
        "axisTick": {
            "show": false
        }
    }, {
        "show": true,
        "position": "left",
        "scale": false,
        "max": 100,
        "min": 0,
        "splitNumber": 5,
        "type": "value",
        "name": "",
        "axisLabel": {
            "formatter": "",
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "rgb(17,125,187)"
            }
        },
        "gridIndex": 4,
        "splitLine": {
            "show": true
        },
        "axisTick": {
            "show": false
        }
    }, {
        "show": true,
        "position": "left",
        "scale": false,
        "max": 100,
        "min": 0,
        "splitNumber": 5,
        "type": "value",
        "name": "",
        "axisLabel": {
            "formatter": "",
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "rgb(17,125,187)"
            }
        },
        "gridIndex": 5,
        "splitLine": {
            "show": true
        },
        "axisTick": {
            "show": false
        }
    }],
    "series": [{
        "type": "line",
        "name": "core1",
        "data": [61, 65, 71, 46, 35, 67, 30, 37, 20, 23, 52, 44, 60, 72, 38, 23, 26, 67, 28, 27, 20, 45, 79, 51, 68, 80, 56, 70, 35, 29, 38, 30, 29, 29, 59, 46, 67, 28, 36, 32, 53, 41, 49, 36, 64, 48, 33, 45, 30, 56, 69, 31, 47, 20, 49, 69, 20, 62, 38, 66],
        "smooth": true,
        "areaStyle": {
            "normal": {
                "color": "rgb(241,246,250)"
            }
        },
        "lineStyle": {
            "normal": {
                "color": "rgb(17,125,187)",
                "width": 1
            }
        },
        "xAxisIndex": 0,
        "yAxisIndex": 0
    }, {
        "type": "line",
        "name": "core1",
        "data": [61, 65, 71, 46, 35, 67, 30, 37, 20, 23, 52, 44, 60, 72, 38, 23, 26, 67, 28, 27, 20, 45, 79, 51, 68, 80, 56, 70, 35, 29, 38, 30, 29, 29, 59, 46, 67, 28, 36, 32, 53, 41, 49, 36, 64, 48, 33, 45, 30, 56, 69, 31, 47, 20, 49, 69, 20, 62, 38, 66],
        "smooth": true,
        "areaStyle": {
            "normal": {
                "color": "rgb(241,246,250)"
            }
        },
        "lineStyle": {
            "normal": {
                "color": "rgb(17,125,187)",
                "width": 1
            }
        },
        "xAxisIndex": 1,
        "yAxisIndex": 1
    }, {
        "type": "line",
        "name": "core1",
        "data": [61, 65, 71, 46, 35, 67, 30, 37, 20, 23, 52, 44, 60, 72, 38, 23, 26, 67, 28, 27, 20, 45, 79, 51, 68, 80, 56, 70, 35, 29, 38, 30, 29, 29, 59, 46, 67, 28, 36, 32, 53, 41, 49, 36, 64, 48, 33, 45, 30, 56, 69, 31, 47, 20, 49, 69, 20, 62, 38, 66],
        "smooth": true,
        "areaStyle": {
            "normal": {
                "color": "rgb(241,246,250)"
            }
        },
        "lineStyle": {
            "normal": {
                "color": "rgb(17,125,187)",
                "width": 1
            }
        },
        "xAxisIndex": 2,
        "yAxisIndex": 2
    }, {
        "type": "line",
        "name": "core1",
        "data": [61, 65, 71, 46, 35, 67, 30, 37, 20, 23, 52, 44, 60, 72, 38, 23, 26, 67, 28, 27, 20, 45, 79, 51, 68, 80, 56, 70, 35, 29, 38, 30, 29, 29, 59, 46, 67, 28, 36, 32, 53, 41, 49, 36, 64, 48, 33, 45, 30, 56, 69, 31, 47, 20, 49, 69, 20, 62, 38, 66],
        "smooth": true,
        "areaStyle": {
            "normal": {
                "color": "rgb(241,246,250)"
            }
        },
        "lineStyle": {
            "normal": {
                "color": "rgb(17,125,187)",
                "width": 1
            }
        },
        "xAxisIndex": 3,
        "yAxisIndex": 3
    }, {
        "type": "line",
        "name": "core1",
        "data": [61, 65, 71, 46, 35, 67, 30, 37, 20, 23, 52, 44, 60, 72, 38, 23, 26, 67, 28, 27, 20, 45, 79, 51, 68, 80, 56, 70, 35, 29, 38, 30, 29, 29, 59, 46, 67, 28, 36, 32, 53, 41, 49, 36, 64, 48, 33, 45, 30, 56, 69, 31, 47, 20, 49, 69, 20, 62, 38, 66],
        "smooth": true,
        "areaStyle": {
            "normal": {
                "color": "rgb(241,246,250)"
            }
        },
        "lineStyle": {
            "normal": {
                "color": "rgb(17,125,187)",
                "width": 1
            }
        },
        "xAxisIndex": 4,
        "yAxisIndex": 4
    }, {
        "type": "line",
        "name": "core1",
        "data": [61, 65, 71, 46, 35, 67, 30, 37, 20, 23, 52, 44, 60, 72, 38, 23, 26, 67, 28, 27, 20, 45, 79, 51, 68, 80, 56, 70, 35, 29, 38, 30, 29, 29, 59, 46, 67, 28, 36, 32, 53, 41, 49, 36, 64, 48, 33, 45, 30, 56, 69, 31, 47, 20, 49, 69, 20, 62, 38, 66],
        "smooth": true,
        "areaStyle": {
            "normal": {
                "color": "rgb(241,246,250)"
            }
        },
        "lineStyle": {
            "normal": {
                "color": "rgb(17,125,187)",
                "width": 1
            }
        },
        "xAxisIndex": 5,
        "yAxisIndex": 5
    }],
    "title": [{
        "text": "CPU",
        "subtext": "60秒内的利用率 %",
        "left": "left",
        "top": "2%"
    }, {
        "text": "Inter(R) Core(TM) i5-8400 @ 2.80GHz",
        "subtext": "100%",
        "left": "right",
        "top": "2%"
    }],
    "animation": false
}

setInterval(function(){
    var _option=myChart.getOption();
    var json={};
    json.series=[];
    var item={};
    for(var i=0;i<_option.series.length;i++){
        item.data=_option.series[i].data;
        item.data.shift();
        item.data.push(Math.random()*100);
        json.series.push(item);
    }
    myChart.setOption(json);
},1000)