From 59c8580244ba50cf9925695a08e50450f57f76b3 Mon Sep 17 00:00:00 2001 From: gaoruoshu Date: Fri, 25 Mar 2022 03:38:06 +0000 Subject: [PATCH] [UI2.0]: reformat echart options --- UI2.0/src/js/control-panel.js | 229 +-------------- UI2.0/src/js/realtime-information.js | 295 +------------------- UI2.0/src/js/utils/charts.js | 399 +++++++++++++++++++++++++++ UI2.0/src/js/utils/utils.js | 5 + UI2.0/src/pages/Control-panel.vue | 3 +- 5 files changed, 432 insertions(+), 499 deletions(-) create mode 100644 UI2.0/src/js/utils/charts.js create mode 100644 UI2.0/src/js/utils/utils.js diff --git a/UI2.0/src/js/control-panel.js b/UI2.0/src/js/control-panel.js index 15790c1..8990e9c 100644 --- a/UI2.0/src/js/control-panel.js +++ b/UI2.0/src/js/control-panel.js @@ -1,4 +1,5 @@ import { defineComponent } from "vue"; +import * as charts from './utils/charts.js'; export default defineComponent({ name: "PageIndex", @@ -28,221 +29,17 @@ export default defineComponent({ var myChart1 = echarts.init(document.getElementById("main1")); var myChart2 = echarts.init(document.getElementById("main2")); var myChart3 = echarts.init(document.getElementById("main3")); - // 指定图表的配置项和数据 - var option1 = { - grid: { - left: "32", - right: "32", - bottom: "32", - top: "30%", - containLabel: true, - }, - xAxis: { - type: "category", - data: ["10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "10:60"], - axisLine: { - lineStyle: { - color: "#999999", - }, - }, - }, - yAxis: { - name: "kb/s", - nameLocation: "end", - nameTextStyle: { - color: "#999999", - padding: [0, 0, 0, -21], - }, - nameGap: 15, //"kb/s"与坐标轴的距离 - type: "value", - max: 60, - min: 0, - minInterval: 15, - interval: 15, //每次增加几个 - axisLine: { - lineStyle: { - color: "#999999", - }, - }, - }, - series: [ - { - data: [25, 35, 22, 32, 50, 40, 20], - type: "line", - symbol: "none", //拐点样式 - // symbolSize: 8,//拐点大小 - itemStyle: { - normal: { - lineStyle: { - // width:3,//折线宽度 - color: "#559ff8", //折线颜色 - }, - }, - }, - }, - ], - }; - var option2 = { - color: ["#5ce59d", "#559ff8"], - grid: { - left: "32", - right: "32", - bottom: "32", - // top: "30%", - containLabel: true, - }, - tooltip: { - trigger: "axis", - }, - legend: { - itemWidth: 10, - itemHeight: 10, - itemGap: 10, - data: [ - { name: "Test1", icon: "circle" }, - { name: "Test2", icon: "circle" }, - ], - right: "32", - top: "25", - // bottom: "12", - textStyle: { - fontSize: 14, - color: "#999999", - }, - }, - calculable: true, - xAxis: [ - { - type: "category", - data: ["10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "10:60"], - axisLine: { - lineStyle: { - color: "#999999", - }, - }, - }, - ], - yAxis: [ - { - name: "kb/s", - nameLocation: "end", - nameTextStyle: { - color: "#999999", - padding: [0, 0, 0, -21], - }, - nameGap: 15, //"kb/s"与坐标轴的距离 - type: "value", - max: 60, - min: 0, - minInterval: 15, - interval: 15, //每次增加几个 - axisLine: { - lineStyle: { - color: "#999999", - }, - }, - // text:'kb/s', - }, - ], - series: [ - { - name: "Test1", - type: "bar", - data: [40.0, 48.0, 37.0, 23.0, 25.6, 46.7, 35.6], - barWidth: 10, //柱图宽度 - barGap: "50%" /*多个并排柱子设置柱子之间的间距*/, - itemStyle: { - normal: { - barBorderRadius: [10, 10, 10, 10], //柱形图圆角，初始化效果 - }, - }, - }, - { - name: "Test2", - type: "bar", - data: [32.0, 40.0, 35.0, 26.4, 28.7, 30.7, 45.6], - barWidth: 10, //柱图宽度 - barGap: "50%" /*多个并排柱子设置柱子之间的间距*/, - itemStyle: { - normal: { - barBorderRadius: [10, 10, 10, 10], //柱形图圆角，初始化效果 - }, - }, - }, - ], - }; - var option3 = { - title: [ - { - text: "2530", - subtext: "总计(G)", - x: "center", - y: "center", - top: "40%", - itemGap: 8, - textStyle: { - fontSize: 30, - color: "#222222", - align: "center", - }, - subtextStyle: { - fontFamily: "微软雅黑", - fontSize: 14, - color: "#222222", - }, - }, - ], - color: ["#6766ff", "#559ff8", "#5ce59d", "#f8a758"], - tooltip: { - trigger: "item", - }, - legend: { - left: "center", - bottom: "32", - itemWidth: 10, - itemHeight: 10, - itemGap: 20, - icon: "circle", - textStyle: { - fontSize: 14, - color: "#999999", - }, - }, - series: [ - { - name: "Access From", - type: "pie", - radius: ["40%", "46%"], - itemStyle: { - borderColor: "#ffffff", - borderWidth: 2, - borderType: "solid", - }, - avoidLabelOverlap: false, - label: { - show: true, - position: "outside", - formatter: " {@name}({d}%) ", - fontSize: 14, - color: "#222222", - }, - labelLine: { - show: false, //数据显示地方的引线 - length: 1, - length2: 3, - }, - data: [ - { value: 1000, name: "Test1" }, - { value: 900, name: "Test2" }, - { value: 490, name: "Test3" }, - { value: 140, name: "Test4" }, - ], - }, - ], - }; - // 使用刚指定的配置项和数据显示图表。 - myChart1.setOption(option1); - myChart2.setOption(option2); - myChart3.setOption(option3); + + charts.initLineChart(myChart1, "", "-", ["test1", "test2"], "cpu"); + charts.appendLineChartData(myChart1, [6, 7, 8, 9, 10, 11], ["test1", "test2", "test3"], [[10, 11, 12, 13], [1, 2, 3, 4], [5, 4, 6, 7, 1, 3]]); + charts.deleteChartData(myChart1, ["test1"]); + + charts.initBarChart(myChart2, "", "", ["test1", "test2"], "STORage"); + charts.appendBarChartData(myChart2, [6, 7, 8, 9, 10 ,11], ["test1", "test2", "test3"], [[10, 11, 12, 13, 7, 5], [1, 2, 3, 4], [5, 4, 6, 7]]); + charts.deleteChartData(myChart2, ["test3"]); + + charts.initPieChart(myChart3, "text", "subtext", "seriesName", "PERF"); + charts.appendPieChart(myChart3, ["test1", "test2", "Test1"], [500, 100, 100]); + charts.deletePieChart(myChart3, ["test1", "Test2"]); }, }); \ No newline at end of file diff --git a/UI2.0/src/js/realtime-information.js b/UI2.0/src/js/realtime-information.js index e0eca9e..2bc1704 100644 --- a/UI2.0/src/js/realtime-information.js +++ b/UI2.0/src/js/realtime-information.js @@ -1,4 +1,5 @@ import { defineComponent } from "vue"; +import * as charts from './utils/charts.js'; export default defineComponent({ name: "PageIndex", @@ -11,287 +12,17 @@ export default defineComponent({ var myChart2 = echarts.init(document.getElementById("main2")); var myChart3 = echarts.init(document.getElementById("main3")); var myChart4 = echarts.init(document.getElementById("main4")); - // 指定图表的配置项和数据 - var option1 = { - grid: { - left: "30", - right: "30", - bottom: "30", - top: "22%", - containLabel: true, - }, - xAxis: { - type: "category", - data: ["10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "10:60"], - axisLine: { - lineStyle: { - color: "#999999", - }, - }, - }, - yAxis: { - name: "kb/s", - nameLocation: "end", - nameTextStyle: { - color: "#999999", - padding: [0, 0, 0, -21], - }, - nameGap: 15, //"kb/s"与坐标轴的距离 - type: "value", - max: 60, - min: 0, - minInterval: 15, - interval: 15, //每次增加几个 - axisLine: { - lineStyle: { - color: "#999999", - }, - }, - }, - series: [ - { - data: [25, 35, 22, 32, 50, 40, 20], - type: "line", - symbol: "none", //拐点样式 - // symbolSize: 8,//拐点大小 - itemStyle: { - normal: { - lineStyle: { - // width:3,//折线宽度 - color: "#559ff8", //折线颜色 - }, - }, - }, - }, - ], - }; - var option2 = { - color: ["#5ce59d", "#559ff8"], - grid: { - left: "30", - right: "30", - bottom: "30", - // top: "30%", - containLabel: true, - }, - tooltip: { - trigger: "axis", - }, - legend: { - itemWidth: 10, - itemHeight: 10, - itemGap: 10, - data: [ - { name: "Test1", icon: "circle" }, - { name: "Test2", icon: "circle" }, - ], - right: "32", - top: "25", - textStyle: { - fontSize: 14, - color: "#999999", - }, - }, - toolbox: { - show: false, - feature: { - dataView: { show: true, readOnly: false }, - magicType: { show: true, type: ["line", "bar"] }, - restore: { show: true }, - saveAsImage: { show: true }, - }, - }, - calculable: true, - xAxis: [ - { - type: "category", - data: ["10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "10:60"], - axisLine: { - lineStyle: { - color: "#999999", - }, - }, - }, - ], - yAxis: [ - { - name: "kb/s", - nameLocation: "end", - nameTextStyle: { - color: "#999999", - padding: [0, 0, 0, -21], - }, - nameGap: 15, - type: "value", - max: 60, - min: 0, - minInterval: 15, - interval: 15, //每次增加几个 - axisLine: { - lineStyle: { - color: "#999999", - }, - }, - }, - ], - series: [ - { - name: "Test1", - type: "bar", - data: [40.0, 48.0, 37.0, 23.0, 25.6, 46.7, 35.6], - barWidth: 10, // 柱图宽度 - barGap: "50%",// 多个并排柱子设置柱子之间的间距 - itemStyle: { - normal: { - barBorderRadius: [10, 10, 10, 10], //柱形图圆角，初始化效果 - }, - }, - }, - { - name: "Test2", - type: "bar", - data: [32.0, 40.0, 35.0, 26.4, 28.7, 30.7, 45.6], - barWidth: 10, - barGap: "50%", - itemStyle: { - normal: { - barBorderRadius: [10, 10, 10, 10], - }, - }, - }, - ], - }; - var option3 = { - title: [ - { - text: "2530", - subtext: "总计(G)", - x: "center", - y: "center", - top: "35%", - itemGap: 8, - textStyle: { - fontSize: 30, - color: "#222222", - align: "center", - }, - subtextStyle: { - fontFamily: "微软雅黑", - fontSize: 14, - color: "#222222", - }, - }, - ], - color: ["#6766ff", "#559ff8", "#5ce59d", "#f8a758"], - tooltip: { - trigger: "item", - }, - legend: { - left: "center", - bottom: "30", - itemWidth: 10, - itemHeight: 10, - itemGap: 20, - icon: "circle", - textStyle: { - fontSize: 14, - color: "#999999", - }, - }, - series: [ - { - name: "Access From", - type: "pie", - radius: ["40%", "45%"], - center: ["50%", "45%"], - itemStyle: { - borderColor: "#ffffff", - borderWidth: 2, - borderType: "solid", - }, - avoidLabelOverlap: false, - label: { - show: true, - position: "outside", - formatter: " {@name}({d}%) ", - fontSize: 14, - color: "#222222", - }, - labelLine: { - show: false, //数据显示地方的引线 - length: 1, - length2: 3, - }, - data: [ - { value: 1000, name: "Test1" }, - { value: 900, name: "Test2" }, - { value: 490, name: "Test3" }, - { value: 140, name: "Test4" }, - ], - }, - ], - }; - var option4 = { - grid: { - left: "32", - right: "32", - bottom: "32", - top: "22%", - containLabel: true, - }, - xAxis: { - type: "category", - data: ["10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "10:60"], - axisLine: { - lineStyle: { - color: "#999999", - }, - }, - }, - yAxis: { - name: "kb/s", - nameLocation: "end", - nameTextStyle: { - color: "#999999", - padding: [0, 0, 0, -21], - }, - nameGap: 15, - type: "value", - max: 60, - min: 0, - minInterval: 15, - interval: 15, - axisLine: { - lineStyle: { - color: "#999999", - }, - }, - }, - series: [ - { - data: [12, 16, 5, 15, 10, 20, 10], - type: "line", - symbol: "none", - areaStyle: { - normal: { - color: '#FAEFE5' //改变区域颜色 - } - }, - itemStyle: { - normal: { - lineStyle: { - color: "#f8a758", - }, - }, - }, - }, - ], - }; - // 使用刚指定的配置项和数据显示图表。 - myChart1.setOption(option1); - myChart2.setOption(option2); - myChart3.setOption(option3); - myChart4.setOption(option4); + charts.initLineChart(myChart1, "", "kb/s", ["test1"], "cpu"); + charts.appendLineChartData(myChart1, ["10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "10:60"], ["test1"], [[25, 35, 22, 32, 50, 40, 20]]); + + charts.initBarChart(myChart2, "", "kb/s", ["Test1", "Test2"], "STORage"); + charts.appendBarChartData(myChart2, ["10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "10:60"], ["Test1", "Test2"], [[40.0, 48.0, 37.0, 23.0, 25.6, 46.7, 35.6], [32.0, 40.0, 35.0, 26.4, 28.7, 30.7, 45.6]]); + + charts.initPieChart(myChart3, "2530", "总计(G)", "seriesName", "PERF"); + charts.appendPieChart(myChart3, ["Test1", "Test2", "Test3", "Test4"], [1000, 900, 490, 140]); + + charts.initLineChart(myChart4, "", "kb/s", ["test1"], "net"); + charts.appendLineChartData(myChart4, ["10:00", "10:10", "10:20", "10:30", "10:40", "10:50", "10:60"], ["test1"], [[12, 16, 5, 15, 10, 20, 10]]); }, -}); \ No newline at end of file +}); diff --git a/UI2.0/src/js/utils/charts.js b/UI2.0/src/js/utils/charts.js new file mode 100644 index 0000000..41c3f08 --- /dev/null +++ b/UI2.0/src/js/utils/charts.js @@ -0,0 +1,399 @@ +import * as utils from './utils.js'; + +const colorList = [ + ['#559FF8', '#6666FF', '#1D68C4', '#2929CC', '#004191', '#000099'], + ['#5CE55C', '#A5E553', '#24B324', '#72B31F', '#008000', '#488000'], + ['#F7A757', '#F7DA4B', '#BF6E1D', '#B39812', '#8C4500', '#806A00'], + ['#F75757', '#F757A8', '#BF1D1D', '#BF1D6F', '#8C0000', '#8C0047'], + ['#9966FF', '#F757F7', '#5E29CC', '#BF1DBF', '#320099', '#8C008C'], + ['#5CE5E5', '#5CE59D', '#24B3B3', '#24B367', '#008080', '#00803C']]; + +function getColorGroup(colors) { + if (colors.toLowerCase() === "cpu") { + return colorList[0]; + } + if (colors.toLowerCase() === "storage") { + return colorList[1]; + } + if (colors.toLowerCase() === "network") { + return colorList[2]; + } + if (colors.toLowerCase() === "memory") { + return colorList[3]; + } + if (colors.toLowerCase() === "perf") { + return colorList[4]; + } + if (colors.toLowerCase() === "system") { + return colorList[5]; + } + return colorList[utils.getRandomInt(0, 7)]; +} + +function addLegend(legend, names) { + names.forEach(function (name) { + legend.push({ "name": name, "icon": "circle" }); + }); + return legend; +} + +function deleteLegend(legend, names) { + let legendData = legend[0].data; + names.forEach(function (name) { + for (let i = 0; i < legendData.length; i++) { + if (legendData[i]["name"] === name) { + legendData.splice(i, 1); + break; + } + } + }); + legend[0].data = legendData; + return legend; +} + +function addLineSeries(series, names) { + names.forEach(function (name) { + let lineInfo = { + "name": name, + "data": [], + "type": "line", + "symbol": "none", + // toolbox: { + // show: false, + // feature: { + // dataView: { show: true, readOnly: false }, + // magicType: { show: true, type: ["line", "bar"] }, + // restore: { show: true }, + // saveAsImage: { show: true }, + // }, + // }, + }; + series.push(lineInfo); + }); + return series; +} + +function addBarSeries(series, names) { + names.forEach(function (name) { + let barInfo = { + "name": name, + "data": [], + "type": "bar", + "barWidth": 10, + "barGap": "50%", + "itemStyle": { + "borderRadius": [10, 10, 10, 10], + }, + }; + series.push(barInfo); + }); + return series; +} + +function deleteSeries(series, names) { + names.forEach(function (name) { + for (let i = 0; i < series.length; i++) { + if (series[i]["name"] === name) { + series.splice(i, 1); + break; + } + } + }); + return series; +} + +export function initLineChart(chart, xName, yName, lineNames, colors) { + let lineOption = { + color: getColorGroup(colors), + grid: { + left: "32", + right: "32", + bottom: "32", + top: "30%", + containLabel: true, + }, + tooltip: { + trigger: "axis", + }, + legend: { + itemWidth: 10, + itemHeight: 10, + itemGap: 10, + data: addLegend([], lineNames), + right: "32", + top: "55", + textStyle: { + fontSize: 14, + color: "#999999", + }, + }, + xAxis: { + type: "category", + name: xName, + data: [], + axisLine: { + lineStyle: { + color: "#999999", + }, + }, + }, + yAxis: { + name: yName, + nameLocation: "end", + nameTextStyle: { + color: "#999999", + padding: [0, 0, 0, -21], + }, + nameGap: 15, + type: "value", + axisLine: { + lineStyle: { + color: "#999999", + }, + }, + }, + series: addLineSeries([], lineNames), + }; + chart.setOption(lineOption); +} + +export function initBarChart(chart, xName, yName, barNames, colors) { + let barOption = { + color: getColorGroup(colors), + grid: { + left: "32", + right: "32", + bottom: "32", + containLabel: true, + }, + tooltip: { + trigger: "axis", + }, + legend: { + itemWidth: 10, + itemHeight: 10, + itemGap: 10, + data: addLegend([], barNames), + right: "32", + top: "25", + textStyle: { + fontSize: 14, + color: "#999999", + }, + }, + toolbox: { + show: false, + feature: { + dataView: { show: true, readOnly: false }, + magicType: { show: true, type: ["line", "bar"] }, + restore: { show: true }, + saveAsImage: { show: true }, + }, + }, + calculable: true, + xAxis: [ + { + type: "category", + data: [], + axisLine: { + lineStyle: { + color: "#999999", + }, + }, + }, + ], + yAxis: [ + { + name: yName, + nameLocation: "end", + nameTextStyle: { + color: "#999999", + padding: [0, 0, 0, -21], + }, + nameGap: 15, + type: "value", + axisLine: { + lineStyle: { + color: "#999999", + }, + }, + }, + ], + series: addBarSeries([], barNames), + }; + chart.setOption(barOption); +} + +export function initPieChart(chart, pieText, pieSubtext, seriesName, colors) { + let colorSeries = getColorGroup(colors); + let pieOption = { + color: colorSeries, + title: [ + { + text: pieText, + subtext: pieSubtext, + x: "center", + y: "center", + top: "40%", + itemGap: 8, + textStyle: { + fontSize: 30, + color: "#222222", + align: "center", + }, + subtextStyle: { + fontFamily: "微软雅黑", + fontSize: 14, + color: "#222222", + }, + }, + ], + tooltip: { + trigger: "item", + }, + legend: { + left: "center", + bottom: "32", + itemWidth: 10, + itemHeight: 10, + itemGap: 20, + icon: "circle", + textStyle: { + fontSize: 14, + color: "#999999", + }, + }, + series: [ + { + name: seriesName, + type: "pie", + radius: ["40%", "46%"], + itemStyle: { + borderColor: "#ffffff", + borderWidth: 2, + borderType: "solid", + }, + avoidLabelOverlap: false, + label: { + show: true, + position: "outside", + formatter: " {@name}({d}%) ", + fontSize: 14, + color: "#222222", + }, + labelLine: { + show: true, + length: 20, + length2: 10, + }, + data: [], + }, + ], + }; + chart.setOption(pieOption); +} + +function appendChartData(type, chart, newXData, yName, newYData) { + let xData = chart.getOption().xAxis[0].data; + xData = xData.concat(newXData); + let yData = chart.getOption().series; + let legend = chart.getOption().legend[0].data; + for (let i = 0; i < yName.length; i++) { + let getY = false; + for (let j = 0; j < yData.length; j++) { + if (yName[i] === yData[j]["name"]) { + yData[j]["data"] = yData[j]["data"].concat(newYData[i]); + getY = true; + break; + } + } + if (!getY) { + if (type.toLowerCase() === "line") { + yData = addLineSeries(yData, [yName[i]]); + } else if (type.toLowerCase() === "bar") { + yData = addBarSeries(yData, [yName[i]]); + } + legend = addLegend(legend, [yName[i]]); + yData[yData.length - 1]["data"] = newYData[i]; + } + } + chart.setOption({ + xAxis: { data: xData }, + legend: { data: legend }, + series: yData, + }); +} + +export function appendLineChartData(lineChart, newXData, yName, newYData) { + appendChartData("line", lineChart, newXData, yName, newYData); +} + +export function appendBarChartData(barChart, newXData, yName, newYData) { + appendChartData("bar", barChart, newXData, yName, newYData); +} + +export function appendPieChart(pieChart, pieNames, pieValues) { + let pieData = pieChart.getOption().series[0].data; + for (let i = 0; i < pieNames.length; i++) { + let getName = false; + for (let j = 0; j < pieData.length; j++) { + if (pieData[j]["name"] === pieNames[i]) { + pieData[j]["value"] = pieValues[i]; + getName = true; + break; + } + } + if (!getName) { + pieData.push({ "name": pieNames[i], "value": pieValues[i] }); + } + } + + let newSeries = pieChart.getOption().series; + newSeries[0].data = pieData; + pieChart.setOption({ + series: newSeries, + }); +} + +export function deleteChartData(chart, delYName) { + let yData = deleteSeries(chart.getOption().series, delYName); + let legend = deleteLegend(chart.getOption().legend, delYName); + + let maxLength = 0; + yData.forEach(function (data) { + if (data["data"].length > maxLength) { + maxLength = data["data"].length; + } + }); + + let xAxis = chart.getOption().xAxis; + let xData = xAxis[0].data; + while (xData.length > maxLength) { + xData.splice(xData.length - 1, 1); + } + + let options = chart.getOption(); + xAxis[0].data = xData; + options["xAxis"] = xAxis; + options["legend"] = legend; + options["series"] = yData; + chart.setOption(options, true); +} + +export function deletePieChart(pieChart, pieNames) { + let pieData = pieChart.getOption().series[0].data; + for (let i = 0; i < pieNames.length; i++) { + for (let j = 0; j < pieData.length; j++) { + if (pieData[j]["name"] === pieNames[i]) { + pieData.splice(j, 1); + break; + } + } + } + + let newSeries = pieChart.getOption().series; + newSeries[0].data = pieData; + pieChart.setOption({ + series: newSeries, + }); +} diff --git a/UI2.0/src/js/utils/utils.js b/UI2.0/src/js/utils/utils.js new file mode 100644 index 0000000..62b015b --- /dev/null +++ b/UI2.0/src/js/utils/utils.js @@ -0,0 +1,5 @@ +export function getRandomInt(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min) + min); +} diff --git a/UI2.0/src/pages/Control-panel.vue b/UI2.0/src/pages/Control-panel.vue index ecd3d64..9a8528a 100644 --- a/UI2.0/src/pages/Control-panel.vue +++ b/UI2.0/src/pages/Control-panel.vue @@ -581,11 +581,12 @@ margin-top: 32px; margin-bottom: 24px; font-weight: bold; + z-index: 1; " > 运行中的任务列表 -
+