From 106f9159a9a59b1d65eef40a3e88f121055183f3 Mon Sep 17 00:00:00 2001 From: chendh6 Date: Sat, 26 Mar 2022 06:53:07 +0000 Subject: [PATCH] Update offline tuning and online tuning --- UI2.0/src/js/offline-tuning.js | 299 ++++----------------- UI2.0/src/js/online-tuning.js | 468 ++++----------------------------- UI2.0/src/js/utils/charts.js | 101 ++++++- 3 files changed, 201 insertions(+), 667 deletions(-) diff --git a/UI2.0/src/js/offline-tuning.js b/UI2.0/src/js/offline-tuning.js index 15ee7c9..8ffc2a4 100644 --- a/UI2.0/src/js/offline-tuning.js +++ b/UI2.0/src/js/offline-tuning.js @@ -1,256 +1,49 @@ -import { defineComponent } from "vue"; +import {defineComponent} from "vue"; +import * as charts from './utils/charts.js'; +import {updateTuningEvalData} from "./utils/charts.js"; export default defineComponent({ - methods: { + methods: {}, + mounted() { + var echarts = require("echarts"); + var myChart1 = echarts.init(document.getElementById("offline1")); + var myChart2 = echarts.init(document.getElementById("offline2")); + var myChart3 = echarts.init(document.getElementById("offline3")); + var myChart4 = echarts.init(document.getElementById("offline4")); - }, - mounted() { - var echarts = require("echarts"); - var myChart1 = echarts.init(document.getElementById("offline1")); - var myChart2 = echarts.init(document.getElementById("offline2")); - var myChart3 = echarts.init(document.getElementById("offline3")); - var myChart4 = echarts.init(document.getElementById("offline4")); - var option1 = { - tooltip: { - trigger: 'axis' - }, - grid: { - left: "32", - right: "32", - bottom: "32", - top: "30", - containLabel: true, - }, - xAxis: { - type: 'category', - data: ['before', 'after'], - axisLine: { - lineStyle: { - color: "#999999", - }, - }, - }, - yAxis: { - type: 'value', - max: 50, - min: 0, - minInterval: 10, - interval: 10, //每次增加几个 - axisLine: { - lineStyle: { - color: "#999999", - }, - }, - }, - series: [ - { - data: [ - { - value: 28, - itemStyle: { - color: '#559ff8' - } - }, - { - value: 19, - itemStyle: { - color: '#5ce59d' - } - } - ], - type: 'bar', - barWidth: 10, - itemStyle: { - normal: { - barBorderRadius: [10, 10, 10, 10] //柱形图圆角，初始化效果 - } - } - } - ], - }; - var option2 = { - color: ['#5ce59d', '#559ff8'], - tooltip: { - trigger: 'axis' - }, - legend: { - data: [ - { name: 'key_parameters_select-1637120248097', icon: 'circle' }, - { name: 'compress-1627891392963', icon: 'circle' } - ], - right: "32", - top: "0", - }, - grid: { - left: "32", - right: "32", - bottom: "32", - top: "30", - containLabel: true, - }, - xAxis: { - type: 'category', - boundaryGap: false, - 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'], - }, - yAxis: { - type: 'value', - min: 0, - max: 125000, - interval: 25000, - axisLabel: { - formatter: '{value}b' - } - }, - series: [ - { - name: 'key_parameters_select-1637120248097', - type: 'line', - symbol: 'none', - data: [ - 60000, 62000, 60000, 70000, 68000, 72000, 61000, 60000, 66000, 58000, - 60000, 58000, 70000, 64000, 70000, 73000, 74000, 68000, 75000, 74000, - 120000, 75000, 74500, 68000, 110000, 75000, 68000, 59000, 83000, 88000, - 75000, 60000, 80000, 80000, 60000, 58000, 110000, 80000, 120000, 65000, - ] - }, - { - name: 'compress-1627891392963', - type: 'line', - symbol: 'none', - data: [ - 50000, 40000, 75000, 50000, 52000, 70000, 40000, 45000, 40000, 51000, - 35000, 60000, 43000, 60000, 66000, 58000, 60000, 58000, 70000, 38000, - 37000, 43000, 60000, 66000, 58000, 60000, 58000, 70000, 42000, 43000, - 53000, 45000, 43000, 54000, 47000, 45000, 58000, 55000, 38000, 40000 - ] - } - ], - }; - var option3 = { - color: ['#5ce59d', '#559ff8'], - tooltip: { - trigger: 'axis' - }, - legend: { - data: [ - { name: 'key_parameters_select-1637120248097', icon: 'circle' }, - { name: 'compress-1627891392963', icon: 'circle' } - ], - right: "32", - top: "0", - }, - grid: { - left: "32", - right: "32", - bottom: "32", - top: "30", - containLabel: true, - }, - xAxis: { - type: 'category', - boundaryGap: false, - 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'], - }, - yAxis: { - type: 'value', - min: 0, - max: 0.1, - interval: 0.02, - }, - series: [ - { - name: 'key_parameters_select-1637120248097', - type: 'line', - symbol: 'none', - data: [ - 0.060, 0.062, 0.060, 0.070, 0.068, 0.072, 0.061, 0.060, 0.066, 0.058, - 0.060, 0.058, 0.070, 0.064, 0.070, 0.073, 0.040, 0.068, 0.075, 0.049, - 0.020, 0.075, 0.074, 0.068, 0.011, 0.075, 0.068, 0.059, 0.083, 0.088, - 0.075, 0.080, 0.080, 0.078, 0.060, 0.058, 0.011, 0.080, 0.012, 0.065, - ] - }, - { - name: 'compress-1627891392963', - type: 'line', - symbol: 'none', - data: [ - 0.050, 0.040, 0.075, 0.050, 0.052, 0.070, 0.040, 0.045, 0.040, 0.051, - 0.035, 0.060, 0.043, 0.060, 0.066, 0.058, 0.060, 0.058, 0.070, 0.038, - 0.037, 0.043, 0.060, 0.066, 0.058, 0.060, 0.058, 0.070, 0.042, 0.043, - 0.053, 0.045, 0.043, 0.054, 0.047, 0.045, 0.058, 0.055, 0.038, 0.040 - ] - } - ], - }; - var option4 = { - color: ['#5ce59d', '#559ff8'], - tooltip: { - trigger: 'axis' - }, - legend: { - data: [ - { name: 'key_parameters_select-1637120248097', icon: 'circle' }, - { name: 'compress-1627891392963', icon: 'circle' } - ], - right: "32", - top: "0", - }, - grid: { - left: "32", - right: "32", - bottom: "32", - top: "30", - containLabel: true, - }, - xAxis: { - type: 'category', - boundaryGap: false, - 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'], - }, - yAxis: { - type: 'value', - min: 0, - max: 125000, - interval: 25000, - axisLabel: { - formatter: '{value}b' - } - }, - series: [ - { - name: 'key_parameters_select-1637120248097', - type: 'line', - symbol: 'none', - data: [ - 60000, 62000, 60000, 70000, 68000, 72000, 61000, 60000, 66000, 58000, - 60000, 58000, 70000, 64000, 70000, 73000, 74000, 68000, 75000, 74000, - 120000, 75000, 74500, 68000, 110000, 75000, 68000, 59000, 83000, 88000, - 75000, 60000, 80000, 80000, 60000, 58000, 110000, 80000, 120000, 65000, - ] - }, - { - name: 'compress-1627891392963', - type: 'line', - symbol: 'none', - data: [ - 50000, 40000, 75000, 50000, 52000, 70000, 40000, 45000, 40000, 51000, - 35000, 60000, 43000, 60000, 66000, 58000, 60000, 58000, 70000, 38000, - 37000, 43000, 60000, 66000, 58000, 60000, 58000, 70000, 42000, 43000, - 53000, 45000, 43000, 54000, 47000, 45000, 58000, 55000, 38000, 40000 - ] - } - ], - }; - myChart1.setOption(option1); - myChart2.setOption(option2); - myChart3.setOption(option3); - myChart4.setOption(option4); - }, -}); \ No newline at end of file + let xValue = ['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']; + let yValue = [[ + 60000, 62000, 60000, 70000, 68000, 72000, 61000, 60000, 66000, 58000, + 60000, 58000, 70000, 64000, 70000, 73000, 74000, 68000, 75000, 74000, + 120000, 75000, 74500, 68000, 110000, 75000, 68000, 59000, 83000, 88000, + 75000, 60000, 80000, 80000, 60000, 58000, 110000, 80000, 120000, 65000, + ], [ + 50000, 40000, 75000, 50000, 52000, 70000, 40000, 45000, 40000, 51000, + 35000, 60000, 43000, 60000, 66000, 58000, 60000, 58000, 70000, 38000, + 37000, 43000, 60000, 66000, 58000, 60000, 58000, 70000, 42000, 43000, + 53000, 45000, 43000, 54000, 47000, 45000, 58000, 55000, 38000, 40000 + ]]; + charts.initBarChart(myChart1, "", "", [], "tuning"); + charts.appendBarChartData(myChart1, ["before", "after"], ["test1"], [[0,5]]); + charts.updateTuningEvalData(myChart1, ["test1", "test2", "test3"], [[10], [1,7], [4]]); + charts.addOptions(myChart1, "grid", 0,{"top": "30"}); + charts.addOptions(myChart1, "legend", 0,{"top": "0"}); + + charts.initLineChart(myChart2, "", "", ["test1", "test2"], "tuning"); + charts.appendLineChartData(myChart2, xValue, ["test1", "test2"], yValue); + charts.addOptions(myChart2, "grid", 0,{"top": "30"}); + charts.addOptions(myChart2, "legend", 0,{"top": "0"}); + + charts.initLineChart(myChart3, "", "", ["test1", "test2"], "tuning"); + charts.appendLineChartData(myChart3, xValue, ["test1", "test2"], yValue); + charts.addOptions(myChart3, "grid", 0,{"top": "30"}); + charts.addOptions(myChart3, "legend", 0,{"top": "0"}); + + charts.initLineChart(myChart4, "", "", ["test1", "test2"], "tuning"); + charts.appendLineChartData(myChart4, xValue, ["test1", "test2"], yValue); + charts.addOptions(myChart4, "grid", 0,{"top": "30"}); + charts.addOptions(myChart4, "legend", 0,{"top": "0"}); + }, +}); diff --git a/UI2.0/src/js/online-tuning.js b/UI2.0/src/js/online-tuning.js index 2ae30db..35b06be 100644 --- a/UI2.0/src/js/online-tuning.js +++ b/UI2.0/src/js/online-tuning.js @@ -1,416 +1,60 @@ -import { defineComponent } from "vue"; +import {defineComponent} from "vue"; +import * as charts from './utils/charts.js'; export default defineComponent({ - methods: { + methods: {}, + mounted() { + var echarts = require("echarts"); + var circleChart1 = echarts.init(document.getElementById("percentage1")); + var circleChart2 = echarts.init(document.getElementById("percentage2")); + var circleChart3 = echarts.init(document.getElementById("percentage3")); + var circleChart4 = echarts.init(document.getElementById("percentage4")); + var myChart1 = echarts.init(document.getElementById("online1")); + var myChart2 = echarts.init(document.getElementById("online2")); + var myChart3 = echarts.init(document.getElementById("online3")); + var myChart4 = echarts.init(document.getElementById("online4")); + var myChart5 = echarts.init(document.getElementById("online5")); + var myChart6 = echarts.init(document.getElementById("online6")); - }, - mounted() { - var echarts = require("echarts"); - var circleChart1 = echarts.init(document.getElementById("percentage1")); - var circleChart2 = echarts.init(document.getElementById("percentage2")); - var circleChart3 = echarts.init(document.getElementById("percentage3")); - var circleChart4 = echarts.init(document.getElementById("percentage4")); - var myChart1 = echarts.init(document.getElementById("online1")); - var myChart2 = echarts.init(document.getElementById("online2")); - var myChart3 = echarts.init(document.getElementById("online3")); - var myChart4 = echarts.init(document.getElementById("online4")); - var myChart5 = echarts.init(document.getElementById("online5")); - var myChart6 = echarts.init(document.getElementById("online6")); - var circle1 = { - title: { - text: '12.24%', - left: 'center', - top: 75, - subtext: 'CPU', - }, - visualMap: { - show: false, - }, - series: [ - { - type: 'pie', - radius: ['50%', '70%'], - center: ['50%', '50%'], - data: [ - //itemSyle是单项的背景颜色设置。 - { value: 87.76, itemStyle: { color: '#f1f1f1' } }, - { value: 12.24, itemStyle: { color: '#5ce59d' } }, - ], - label: { - //将视觉引导图关闭 - show: false, - }, - itemStyle: { - //设置的是每项之间的留白 - borderWidth: 6, - borderColor: '#fff' - }, - // 初始化echarts的动画效果 - animationType: 'scale', - animationEasing: 'elasticOut', - animationDelay: function (idx) { - return Math.random() * 200; - } - } - ], - }; - var circle2 = { - title: { - text: '9.32%', - left: 'center', - top: 75, - subtext: 'STORAGE', - }, - visualMap: { - show: false, - }, - series: [ - { - type: 'pie', - radius: ['50%', '70%'], - center: ['50%', '50%'], - data: [ - { value: 90.68, itemStyle: { color: '#f1f1f1' } }, - { value: 9.32, itemStyle: { color: '#5ce59d' } }, - ], - label: { - show: false, - }, - itemStyle: { - borderWidth: 6, - borderColor: '#fff' - }, - animationType: 'scale', - animationEasing: 'elasticOut', - animationDelay: function (idx) { - return Math.random() * 200; - } - } - ], - }; - var circle3 = { - title: { - text: '20%', - left: 'center', - top: 75, - subtext: 'NET', - }, - visualMap: { - show: false, - }, - series: [ - { - type: 'pie', - radius: ['50%', '70%'], - center: ['50%', '50%'], - data: [ - { value: 80, itemStyle: { color: '#f1f1f1' } }, - { value: 20, itemStyle: { color: '#5ce59d' } }, - ], - label: { - show: false, - }, - itemStyle: { - borderWidth: 6, - borderColor: '#fff' - }, - animationType: 'scale', - animationEasing: 'elasticOut', - animationDelay: function (idx) { - return Math.random() * 200; - } - } - ], - }; - var circle4 = { - title: { - text: '10%', - left: 'center', - top: 75, - subtext: 'MEM', - }, - visualMap: { - show: false, - }, - series: [ - { - type: 'pie', - radius: ['50%', '70%'], - center: ['50%', '50%'], - data: [ - { value: 90, itemStyle: { color: '#f1f1f1' } }, - { value: 10, itemStyle: { color: '#5ce59d' } }, - ], - label: { - show: false, - }, - itemStyle: { - borderWidth: 6, - borderColor: '#fff' - }, - animationType: 'scale', - animationEasing: 'elasticOut', - animationDelay: function (idx) { - return Math.random() * 200; - } - } - ], - }; - var option1 = { - color: ['#559ff8'], - tooltip: { - trigger: 'axis' - }, - grid: { - left: "32", - right: "32", - bottom: "32", - top: "10", - containLabel: true, - }, - xAxis: { - type: 'category', - boundaryGap: false, - 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'], - axisLabel: { - interval: 0, - }, - }, - yAxis: { - type: 'value', - min: 0, - max: 50, - interval: 10, - }, - series: [ - { - name: 'key_parameters_select-1637120248097', - type: 'line', - symbol: 'none', - data: [ - 6, 2, 6, 7, 8, 12, 16, 26, 12, 35, 6, 2, 6, 7, 8, 12, 16, 26, 12, 35, - 6, 2, 6, 7, 8, 12, 16, 26, 12, 35, 6, 2, 6, 7, 8, 12, 16, 26, 12, 35, - ] - }, - ], - }; - var option2 = { - color: ['#559ff8'], - tooltip: { - trigger: 'axis' - }, - grid: { - left: "32", - right: "32", - bottom: "32", - top: "10", - containLabel: true, - }, - xAxis: { - type: 'category', - boundaryGap: false, - 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'], - axisLabel: { - interval: 0, - }, - }, - yAxis: { - type: 'value', - min: 0, - max: 15, - interval: 3, - }, - series: [ - { - name: 'key_parameters_select-1637120248097', - type: 'line', - symbol: 'none', - data: [ - 6, 2, 6, 7, 8, 7, 1, 6, 7, 5, 6, 2, 3, 7, 8, 9, 1, 6, 7, 5, - 6, 2, 9, 7, 8, 6, 1, 6, 7, 5, 6, 2, 3, 7, 8, 9, 1, 6, 7, 5, - 6, 2, 6, 7, 8, 7, 1, 6, 5, 5, 6, 2, 3, 7, 3, 9, 1, 6, 7, 5, - ] - }, - ], - }; - var option3 = { - color: ['#559ff8'], - tooltip: { - trigger: 'axis' - }, - grid: { - left: "32", - right: "32", - bottom: "32", - top: "10", - containLabel: true, - }, - xAxis: { - type: 'category', - boundaryGap: false, - 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'], - axisLabel: { - interval: 0, - }, - }, - yAxis: { - type: 'value', - min: 0, - max: 1, - interval: 0.2, - }, - series: [ - { - name: 'key_parameters_select-1637120248097', - type: 'line', - symbol: 'none', - data: [ - 0.6, 0.5, 0.8, 0.7, 0.6, 0.7, 0.6, 0.6, 0.6, 0.5, - 0.6, 0.5, 0.7, 0.6, 0.7, 0.7, 0.4, 0.6, 0.7, 0.4, - 0.2, 0.7, 0.7, 0.6, 0.1, 0.7, 0.6, 0.5, 0.8, 0.8, - ] - }, - ], - }; - var option4 = { - color: ['#559ff8'], - tooltip: { - trigger: 'axis' - }, - grid: { - left: "32", - right: "32", - bottom: "32", - top: "10", - containLabel: true, - }, - xAxis: { - type: 'category', - boundaryGap: false, - 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',], - axisLabel: { - interval: 0, - }, - }, - yAxis: { - type: 'value', - min: 0, - max: 1, - interval: 0.2, - }, - series: [ - { - name: 'key_parameters_select-1637120248097', - type: 'line', - symbol: 'none', - data: [ - 0.6, 0.5, 0.8, 0.7, 0.6, 0.7, 0.6, 0.6, 0.6, 0.5, - 0.6, 0.5, 0.7, 0.6, 0.7, 0.7, 0.4, 0.6, 0.7, 0.4, - 0.2, 0.7, 0.7, 0.6, 0.1, 0.7, 0.6, 0.5, 0.8, 0.8, - ] - }, + let xValue = ['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']; + let yValue = [[6, 2, 6, 7, 8, 7, 1, 6, 7, 5, 6, 2, 3, 7, 8, 9, 1, 6, 7, 5, + 6, 2, 9, 7, 8, 6, 1, 6, 7, 5, 6, 2, 3, 7, 8, 9, 1, 6, 7, 5, + 6, 2, 6, 7, 8, 7, 1, 6, 5, 5, 6, 2, 3, 7, 3, 9, 1, 6, 7, 5,]]; + charts.initCircleChart(circleChart1, 12.34, "cpu"); + charts.initCircleChart(circleChart2, 9.32, "storage"); + charts.initCircleChart(circleChart3, 20, "network"); + charts.initCircleChart(circleChart4, 10, "memory"); - ], - }; - var option5 = { - color: ['#559ff8'], - tooltip: { - trigger: 'axis' - }, - grid: { - left: "32", - right: "32", - bottom: "32", - top: "10", - containLabel: true, - }, - xAxis: { - type: 'category', - boundaryGap: false, - 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'], - axisLabel: { - interval: 0, - }, - }, - yAxis: { - type: 'value', - min: 0, - max: 1, - interval: 0.2, - }, - series: [ - { - name: 'key_parameters_select-1637120248097', - type: 'line', - symbol: 'none', - data: [ - 0.6, 0.5, 0.8, 0.7, 0.6, 0.7, 0.6, 0.6, 0.6, 0.5, - 0.6, 0.5, 0.7, 0.6, 0.7, 0.7, 0.4, 0.6, 0.7, 0.4, - 0.2, 0.7, 0.7, 0.6, 0.1, 0.7, 0.6, 0.5, 0.8, 0.8, - ] - }, - ], - }; - var option6 = { - color: ['#559ff8'], - tooltip: { - trigger: 'axis' - }, - grid: { - left: "32", - right: "32", - bottom: "32", - top: "10", - containLabel: true, - }, - xAxis: { - type: 'category', - boundaryGap: false, - 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'], - axisLabel: { - interval: 0, - }, - }, - yAxis: { - type: 'value', - min: 0, - max: 1, - interval: 0.2, - }, - series: [ - { - name: 'key_parameters_select-1637120248097', - type: 'line', - symbol: 'none', - data: [ - 0.6, 0.5, 0.8, 0.7, 0.6, 0.7, 0.6, 0.6, 0.6, 0.5, - 0.6, 0.5, 0.7, 0.6, 0.7, 0.7, 0.4, 0.6, 0.7, 0.4, - 0.2, 0.7, 0.7, 0.6, 0.1, 0.7, 0.6, 0.5, 0.8, 0.8, - ] - }, - ], - }; - circleChart1.setOption(circle1); - circleChart2.setOption(circle2); - circleChart3.setOption(circle3); - circleChart4.setOption(circle4); - myChart1.setOption(option1); - myChart2.setOption(option2); - myChart3.setOption(option3); - myChart4.setOption(option4); - myChart5.setOption(option5); - myChart6.setOption(option6); - }, -}); \ No newline at end of file + charts.initLineChart(myChart1, "", "", ["test1"], "cpu"); + charts.appendLineChartData(myChart1, xValue, ["test1"], yValue); + charts.addOptions(myChart1, "grid", 0, {"top": 18}); + charts.addOptions(myChart1, "legend", 0, {"top": "0"}); + + charts.initLineChart(myChart2, "", "", ["test1"], "storage"); + charts.appendLineChartData(myChart2, xValue, ["test1"], yValue); + charts.addOptions(myChart2, "grid", 0, {"top": 18}); + charts.addOptions(myChart2, "legend", 0, {"top": "0"}); + + charts.initLineChart(myChart3, "", "", ["test1"], "network"); + charts.appendLineChartData(myChart3, xValue, ["test1"], yValue); + charts.addOptions(myChart3, "grid", 0, {"top": 18}); + charts.addOptions(myChart3, "legend", 0, {"top": "0"}); + + charts.initLineChart(myChart4, "", "", ["test1"], "memory"); + charts.appendLineChartData(myChart4, xValue, ["test1"], yValue); + charts.addOptions(myChart4, "grid", 0, {"top": 18}); + charts.addOptions(myChart4, "legend", 0, {"top": "0"}); + + charts.initLineChart(myChart5, "", "", ["test1"], "perf"); + charts.appendLineChartData(myChart5, xValue, ["test1"], yValue); + charts.addOptions(myChart5, "grid", 0, {"top": 18}); + charts.addOptions(myChart5, "legend", 0, {"top": "0"}); + + charts.initLineChart(myChart6, "", "", ["test1"], "system"); + charts.appendLineChartData(myChart6, xValue, ["test1"], yValue); + charts.addOptions(myChart6, "grid", 0, {"top": 18}); + charts.addOptions(myChart6, "legend", 0, {"top": "0"}); + }, +}); diff --git a/UI2.0/src/js/utils/charts.js b/UI2.0/src/js/utils/charts.js index 41c3f08..3557df8 100644 --- a/UI2.0/src/js/utils/charts.js +++ b/UI2.0/src/js/utils/charts.js @@ -6,7 +6,8 @@ const colorList = [ ['#F7A757', '#F7DA4B', '#BF6E1D', '#B39812', '#8C4500', '#806A00'], ['#F75757', '#F757A8', '#BF1D1D', '#BF1D6F', '#8C0000', '#8C0047'], ['#9966FF', '#F757F7', '#5E29CC', '#BF1DBF', '#320099', '#8C008C'], - ['#5CE5E5', '#5CE59D', '#24B3B3', '#24B367', '#008080', '#00803C']]; + ['#5CE5E5', '#5CE59D', '#24B3B3', '#24B367', '#008080', '#00803C'], + ['#559FF8', '#5CE55C', '#F7A757', '#F75757', '#9966FF', '#5CE5E5']]; function getColorGroup(colors) { if (colors.toLowerCase() === "cpu") { @@ -27,7 +28,10 @@ function getColorGroup(colors) { if (colors.toLowerCase() === "system") { return colorList[5]; } - return colorList[utils.getRandomInt(0, 7)]; + if (colors.toLowerCase() === "tuning") { + return colorList[6]; + } + return colorList[utils.getRandomInt(0, 6)]; } function addLegend(legend, names) { @@ -87,6 +91,19 @@ function addBarSeries(series, names) { }; series.push(barInfo); }); + + if (names.length === 0) { + let barInfo = { + "data": [], + "type": "bar", + "barWidth": 10, + "barGap": "50%", + "itemStyle": { + "borderRadius": [10, 10, 10, 10], + }, + }; + series.push(barInfo); + } return series; } @@ -293,6 +310,45 @@ export function initPieChart(chart, pieText, pieSubtext, seriesName, colors) { chart.setOption(pieOption); } +export function initCircleChart(chart, cirText, type) { + let cirOption = { + title: { + text: cirText + "%", + left: 'center', + top: 75, + subtext: type.toUpperCase(), + }, + series: [ + { + type: 'pie', + radius: ['50%', '70%'], + center: ['50%', '50%'], + data: [ + { value: 100 - cirText, + itemStyle: { color: '#f1f1f1' } + }, + { value: cirText, + itemStyle: { color: getColorGroup(type)[0] } + }, + ], + label: { + show: false, + }, + itemStyle: { + borderWidth: 6, + borderColor: '#fff' + }, + animationType: 'scale', + animationEasing: 'elasticOut', + animationDelay: function (idx) { + return Math.random() * 200; + } + } + ], + }; + chart.setOption(cirOption); +} + function appendChartData(type, chart, newXData, yName, newYData) { let xData = chart.getOption().xAxis[0].data; xData = xData.concat(newXData); @@ -355,6 +411,38 @@ export function appendPieChart(pieChart, pieNames, pieValues) { }); } +function appendTuningEvalData(series, yData, i, j) { + if (yData[i].length === 2) { + series[j]["data"][0] = yData[i][0]; + series[j]["data"][1] = yData[i][1]; + return; + } + series[j]["data"][0] = 0; + series[j]["data"][1] = yData[i][0]; +} + +export function updateTuningEvalData(chart, yName, yData) { + let series = chart.getOption().series; + for (let i = 0; i < yName.length; i++) { + let getY = false; + for (let j = 0; j < series.length; j++) { + if (series[j]["name"] === yName[i]) { + getY = true; + appendTuningEvalData(series, yData, i, j); + break; + } + } + if (!getY) { + series = addBarSeries(series, [yName[i]]); + appendTuningEvalData(series, yData, i, series.length - 1); + } + } + + chart.setOption({ + series: series, + }); +} + export function deleteChartData(chart, delYName) { let yData = deleteSeries(chart.getOption().series, delYName); let legend = deleteLegend(chart.getOption().legend, delYName); @@ -397,3 +485,12 @@ export function deletePieChart(pieChart, pieNames) { series: newSeries, }); } + +export function addOptions(chart, sec, ind, value) { + let options = chart.getOption(); + if (ind === -1) + Object.assign(options[sec], value); + else + Object.assign(options[sec][ind], value); + chart.setOption(options); +} -- Gitee