|
|
@@ -1,219 +1,218 @@
|
|
|
import constant from "@/utils/constant";
|
|
|
|
|
|
const covertDataToEcharts = (obj, params) => {
|
|
|
- let res = {
|
|
|
- label: []
|
|
|
- };
|
|
|
- for (let i = 0; i < params.length; i++) {
|
|
|
- res[params[i]] = [];
|
|
|
- }
|
|
|
- if (obj) {
|
|
|
- obj.forEach(item => {
|
|
|
- res.label.push(item.label);
|
|
|
- if (!item.jsonObject) {
|
|
|
- for (let i = 0; i < params.length; i++) {
|
|
|
- res[params[i]].push('');
|
|
|
- }
|
|
|
- return;
|
|
|
- }
|
|
|
- for (let i = 0; i < params.length; i++) {
|
|
|
- res[params[i]].push(item.jsonObject[params[i]]);
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- return res;
|
|
|
-}
|
|
|
+ let res = {
|
|
|
+ label: [],
|
|
|
+ };
|
|
|
+ for (let i = 0; i < params.length; i++) {
|
|
|
+ res[params[i]] = [];
|
|
|
+ }
|
|
|
+ if (obj) {
|
|
|
+ obj.forEach((item) => {
|
|
|
+ res.label.push(item.label);
|
|
|
+ if (!item.jsonObject) {
|
|
|
+ for (let i = 0; i < params.length; i++) {
|
|
|
+ res[params[i]].push("");
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ for (let i = 0; i < params.length; i++) {
|
|
|
+ res[params[i]].push(item.jsonObject[params[i]]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+};
|
|
|
|
|
|
const refreshEchartsData = (instance, option, data) => {
|
|
|
- option.xAxis.data = data.label;
|
|
|
- let arr = [];
|
|
|
- for (const key in data) {
|
|
|
- if (key == 'label') {
|
|
|
- continue;
|
|
|
- }
|
|
|
- arr.push(data[key])
|
|
|
+ option.xAxis.data = data.label;
|
|
|
+ let arr = [];
|
|
|
+ for (const key in data) {
|
|
|
+ if (key == "label") {
|
|
|
+ continue;
|
|
|
}
|
|
|
- option.color = constant.echartsColors;
|
|
|
- let stackMap = new Map();
|
|
|
- let barNum = {};
|
|
|
- for (let i = 0; i < option.series.length; i++) {
|
|
|
- if (option.series[i].type=='bar') {
|
|
|
- let stack1 = option.series[i].stack;
|
|
|
- if (stack1) {
|
|
|
- barNum[stack1] = i;
|
|
|
- } else {
|
|
|
- barNum['index'+i] = i
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- option.series[i].data = arr[i];
|
|
|
- option.series[i].smooth = true;
|
|
|
- option.series[i].showSymbol = false;
|
|
|
- if (option.series[i].areaStyle && i <= constant.echartsGradientColors.length) {
|
|
|
- option.series[i].areaStyle = {
|
|
|
- color: constant.echartsGradientColors[i]
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- let stack = option.series[i].stack;
|
|
|
- let index = option.series[i].yAxisIndex ? option.series[i].yAxisIndex : 0;
|
|
|
- if (stack) {
|
|
|
- let key = stack + "---" + index;
|
|
|
- if (!stackMap.has(key)) {
|
|
|
- stackMap.set(key, []);
|
|
|
- }
|
|
|
- stackMap.get(key).push(arr[i])
|
|
|
- } else {
|
|
|
- let obj = getInterval(arr[i]);
|
|
|
- let yAxis = option.yAxis[index];
|
|
|
- if (!yAxis.max || yAxis.max < obj.max) {
|
|
|
- Object.assign(option.yAxis[index], obj)
|
|
|
- }
|
|
|
- }
|
|
|
+ arr.push(data[key]);
|
|
|
+ }
|
|
|
+ option.color = constant.echartsColors;
|
|
|
+ let stackMap = new Map();
|
|
|
+ let barNum = {};
|
|
|
+ for (let i = 0; i < option.series.length; i++) {
|
|
|
+ if (option.series[i].type == "bar") {
|
|
|
+ let stack1 = option.series[i].stack;
|
|
|
+ if (stack1) {
|
|
|
+ barNum[stack1] = i;
|
|
|
+ } else {
|
|
|
+ barNum["index" + i] = i;
|
|
|
+ }
|
|
|
}
|
|
|
- for (const barNumKey in barNum) {
|
|
|
- option.series[barNum[barNumKey]].itemStyle = {
|
|
|
- barBorderRadius: [5, 5, 0, 0]
|
|
|
- };
|
|
|
+ option.series[i].data = arr[i];
|
|
|
+ option.series[i].smooth = true;
|
|
|
+ option.series[i].showSymbol = false;
|
|
|
+ if (
|
|
|
+ option.series[i].areaStyle &&
|
|
|
+ i <= constant.echartsGradientColors.length
|
|
|
+ ) {
|
|
|
+ option.series[i].areaStyle = {
|
|
|
+ color: constant.echartsGradientColors[i],
|
|
|
+ };
|
|
|
}
|
|
|
|
|
|
- stackMap = dealStackInterval(stackMap);
|
|
|
- stackMap.forEach((value, key, map) => {
|
|
|
- let index = key.split("---")[1];
|
|
|
- let obj = getInterval(value);
|
|
|
- let yAxis = option.yAxis[index];
|
|
|
- if (!yAxis.max || yAxis.max < obj.max) {
|
|
|
- Object.assign(option.yAxis[index], obj)
|
|
|
- }
|
|
|
- });
|
|
|
- option.textStyle = {
|
|
|
- fontSize: '12px',
|
|
|
- fontFamily: "PingFangSC-Regular, serif",
|
|
|
- color: '#757575'
|
|
|
- };
|
|
|
- if (!option.legend) {
|
|
|
- option.legend = {};
|
|
|
+ let stack = option.series[i].stack;
|
|
|
+ let index = option.series[i].yAxisIndex ? option.series[i].yAxisIndex : 0;
|
|
|
+ if (stack) {
|
|
|
+ let key = stack + "---" + index;
|
|
|
+ if (!stackMap.has(key)) {
|
|
|
+ stackMap.set(key, []);
|
|
|
+ }
|
|
|
+ stackMap.get(key).push(arr[i]);
|
|
|
+ } else {
|
|
|
+ let obj = getInterval(arr[i]);
|
|
|
+ let yAxis = option.yAxis[index];
|
|
|
+ if (!yAxis.max || yAxis.max < obj.max) {
|
|
|
+ Object.assign(option.yAxis[index], obj);
|
|
|
+ }
|
|
|
}
|
|
|
- option.legend.textStyle = {
|
|
|
- fontSize: '12px',
|
|
|
- fontFamily: "Microsoft YaHei, PingFangSC-Regular, serif",
|
|
|
- color: '#757575'
|
|
|
+ }
|
|
|
+ for (const barNumKey in barNum) {
|
|
|
+ option.series[barNum[barNumKey]].itemStyle = {
|
|
|
+ barBorderRadius: [5, 5, 0, 0],
|
|
|
};
|
|
|
- if (option.yAxis && option.yAxis.length>0) {
|
|
|
- for (let i = 0; i < option.yAxis.length; i++) {
|
|
|
- option.yAxis[i]['axisLine']={
|
|
|
- show: true
|
|
|
- }
|
|
|
- option.yAxis[i]['axisTick']={
|
|
|
- show: true
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ stackMap = dealStackInterval(stackMap);
|
|
|
+ stackMap.forEach((value, key, map) => {
|
|
|
+ let index = key.split("---")[1];
|
|
|
+ let obj = getInterval(value);
|
|
|
+ let yAxis = option.yAxis[index];
|
|
|
+ if (!yAxis.max || yAxis.max < obj.max) {
|
|
|
+ Object.assign(option.yAxis[index], obj);
|
|
|
}
|
|
|
- instance.setOption(option)
|
|
|
-}
|
|
|
+ });
|
|
|
+ option.textStyle = {
|
|
|
+ fontSize: "12px",
|
|
|
+ fontFamily: "PingFangSC-Regular, serif",
|
|
|
+ color: "#757575",
|
|
|
+ };
|
|
|
+ if (!option.legend) {
|
|
|
+ option.legend = {};
|
|
|
+ }
|
|
|
+ option.legend.textStyle = {
|
|
|
+ fontSize: "12px",
|
|
|
+ fontFamily: "Microsoft YaHei, PingFangSC-Regular, serif",
|
|
|
+ color: "#757575",
|
|
|
+ };
|
|
|
+ if (option.yAxis && option.yAxis.length > 0) {
|
|
|
+ for (let i = 0; i < option.yAxis.length; i++) {
|
|
|
+ option.yAxis[i]["axisLine"] = {
|
|
|
+ show: true,
|
|
|
+ };
|
|
|
+ option.yAxis[i]["axisTick"] = {
|
|
|
+ show: true,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ instance.setOption(option);
|
|
|
+};
|
|
|
|
|
|
const dealStackInterval = (stackMap) => {
|
|
|
- let indexMap = new Map();
|
|
|
- stackMap.forEach((value, key, map) => {
|
|
|
- let arr = [];
|
|
|
- for (let i = 0; i < value[0].length; i++) {
|
|
|
- let num = 0;
|
|
|
- for (let j = 0; j < value.length; j++) {
|
|
|
- num = num + value[j][i]
|
|
|
- }
|
|
|
- arr.push(num);
|
|
|
- }
|
|
|
- indexMap.set(key, arr);
|
|
|
- })
|
|
|
- return indexMap
|
|
|
-}
|
|
|
+ let indexMap = new Map();
|
|
|
+ stackMap.forEach((value, key, map) => {
|
|
|
+ let arr = [];
|
|
|
+ for (let i = 0; i < value[0].length; i++) {
|
|
|
+ let num = 0;
|
|
|
+ for (let j = 0; j < value.length; j++) {
|
|
|
+ num = num + value[j][i];
|
|
|
+ }
|
|
|
+ arr.push(num);
|
|
|
+ }
|
|
|
+ indexMap.set(key, arr);
|
|
|
+ });
|
|
|
+ return indexMap;
|
|
|
+};
|
|
|
|
|
|
const getInterval = (arr) => {
|
|
|
- let splitNum = 5;
|
|
|
- let max = Math.ceil(Math.max.apply(null, arr) * 1.2 / splitNum) * splitNum;
|
|
|
- let interval = Math.ceil(max / splitNum)
|
|
|
- if (max <= 10) {
|
|
|
- return {
|
|
|
- min: 0,
|
|
|
- max: 10,
|
|
|
- interval: 2
|
|
|
- }
|
|
|
- }
|
|
|
+ let splitNum = 5;
|
|
|
+ let max = Math.ceil((Math.max.apply(null, arr) * 1.2) / splitNum) * splitNum;
|
|
|
+ let interval = Math.ceil(max / splitNum);
|
|
|
+ if (max <= 10) {
|
|
|
return {
|
|
|
- max: max,
|
|
|
- min: 0,
|
|
|
- interval: interval,
|
|
|
+ min: 0,
|
|
|
+ max: 10,
|
|
|
+ interval: 2,
|
|
|
};
|
|
|
-}
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ max: max,
|
|
|
+ min: 0,
|
|
|
+ interval: interval,
|
|
|
+ };
|
|
|
+};
|
|
|
|
|
|
const circleChartConfig = (option) => {
|
|
|
- if (option.title) {
|
|
|
- option.title.textStyle = {
|
|
|
- color: "#B2B2B2",
|
|
|
- fontSize: '15px',
|
|
|
- align: "center",
|
|
|
- lineHeight: 20,
|
|
|
- fontWeight: "normal",
|
|
|
- }
|
|
|
- }
|
|
|
- let label = {
|
|
|
- show: true,
|
|
|
- avoidLabelOverlap: true,
|
|
|
- position: 'outer',
|
|
|
- alignTo: 'labelLine',
|
|
|
- overflow: 'none',
|
|
|
- formatter: (params) => {
|
|
|
- const arr = [
|
|
|
- `{a|${params.name}}`,
|
|
|
- `{b|${params.value}}`,
|
|
|
- ]
|
|
|
- return arr.join('\n\n')
|
|
|
- },
|
|
|
- rich: {
|
|
|
- b: {
|
|
|
- color: '#4D4D4D'
|
|
|
- },
|
|
|
- },
|
|
|
- textStyle: {
|
|
|
- align: "left",
|
|
|
- baseline: "middle",
|
|
|
- fontSize: 14,
|
|
|
- color: "#b3b3b3",
|
|
|
- },
|
|
|
- }
|
|
|
- if (!option.series[0].label) {
|
|
|
- option.series[0].label = {}
|
|
|
- }
|
|
|
- Object.assign(option.series[0].label, label)
|
|
|
- let labelLine = {
|
|
|
- show: true,
|
|
|
- length: 10,
|
|
|
- length2: 30,
|
|
|
+ if (option.title) {
|
|
|
+ option.title.textStyle = {
|
|
|
+ color: "#B2B2B2",
|
|
|
+ fontSize: "15px",
|
|
|
+ align: "center",
|
|
|
+ lineHeight: 20,
|
|
|
+ fontWeight: "normal",
|
|
|
};
|
|
|
- if (!option.series[0].labelLine) {
|
|
|
- option.series[0].labelLine = {
|
|
|
- show: true
|
|
|
- }
|
|
|
- }
|
|
|
- option.legend.show = false
|
|
|
- option.color = constant.echartsColors;
|
|
|
- Object.assign(option.series[0].labelLine, labelLine)
|
|
|
- return option;
|
|
|
-}
|
|
|
+ }
|
|
|
+ let label = {
|
|
|
+ show: true,
|
|
|
+ avoidLabelOverlap: true,
|
|
|
+ position: "outer",
|
|
|
+ alignTo: "labelLine",
|
|
|
+ overflow: "none",
|
|
|
+ formatter: (params) => {
|
|
|
+ const arr = [`{a|${params.name}}`, `{b|${params.value}}`];
|
|
|
+ return arr.join("\n\n");
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ b: {
|
|
|
+ color: "#4D4D4D",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ textStyle: {
|
|
|
+ align: "left",
|
|
|
+ baseline: "middle",
|
|
|
+ fontSize: 14,
|
|
|
+ color: "#b3b3b3",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ if (!option.series[0].label) {
|
|
|
+ option.series[0].label = {};
|
|
|
+ }
|
|
|
+ Object.assign(option.series[0].label, label);
|
|
|
+ let labelLine = {
|
|
|
+ show: true,
|
|
|
+ length: 10,
|
|
|
+ length2: 30,
|
|
|
+ };
|
|
|
+ if (!option.series[0].labelLine) {
|
|
|
+ option.series[0].labelLine = {
|
|
|
+ show: true,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ option.legend.show = false;
|
|
|
+ option.color = constant.echartsColors;
|
|
|
+ Object.assign(option.series[0].labelLine, labelLine);
|
|
|
+ return option;
|
|
|
+};
|
|
|
|
|
|
const circleChartArrToObj = (arr) => {
|
|
|
- let obj = {};
|
|
|
- if (arr) {
|
|
|
- for (let i = 0; i < arr.length; i++) {
|
|
|
- obj[arr[i].name] = arr[i].value;
|
|
|
- }
|
|
|
+ let obj = {};
|
|
|
+ if (arr) {
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ obj[arr[i].name] = arr[i].value;
|
|
|
}
|
|
|
- return obj;
|
|
|
-}
|
|
|
+ }
|
|
|
+ return obj;
|
|
|
+};
|
|
|
|
|
|
export default {
|
|
|
- covertDataToEcharts,
|
|
|
- refreshEchartsData,
|
|
|
- circleChartArrToObj,
|
|
|
- circleChartConfig,
|
|
|
-}
|
|
|
+ covertDataToEcharts,
|
|
|
+ refreshEchartsData,
|
|
|
+ circleChartArrToObj,
|
|
|
+ circleChartConfig,
|
|
|
+};
|
Bella