dcim-topology2d 2.0.6 → 2.0.8

package/chart-diagram/src/echarts/index.js

@@ -1,6 +1,7 @@
 import {s8, createDiv, rectangle, commonStore} from '../../../core';
 import {plugsPool} from '../../../store';
 import {
+    setMapScatterOptions,
     setMapLineBarOptions,
     setMapGaugeOptions,
     setMapRingOptions,
@@ -61,16 +62,21 @@ export function echarts(ctx, node) {
         setTimeout(function () {
             let option = node.data.echarts.option;
             if(!(echartsData && echartsData.chart)) return;
+            const pageZoom = currentStore.data.pageZoom;
+            echartsData.div.style.transform = `scale(${pageZoom})`;
+            echartsData.div.style.transformOrigin = '0 0';
             if(node.data.params) node.data.params.tabCorrelationType = echartsData.tabCorrelationType || ''; // 统计图与Tab关联
             const isLocked = currentStore.data.locked;
             if (!isLocked || !currentStore.echartsOptionsPool[node.id]) {
                 const tabData = initBindTabSetting(node); // 初始化Tabs数据配置
                 // 【未锁定（编辑）状态, options未初始化的状态】
                 if (!appearance.type) appearance.type = echartsTypeMap[`type_${option.displayMode}`]; // 兼容旧数据配置
-                // 公共配置 Top排行榜跳过公共属性配置
-                if (option.displayMode !== 4) setMapGlobalOptions(option, node);
+                // 公共配置 Top排行榜散点图跳过公共属性配置
+                if (option.displayMode !== 4 && option.displayMode !== 7) setMapGlobalOptions(option, node);
+                // 散点图
+                if (appearance.type.includes('scatter')) setMapScatterOptions(option, node);
                 // 折线图和柱状图
-                if (['line', 'bar'].includes(appearance.type)) setMapLineBarOptions(option, node);
+                if (appearance.type.includes('line') || appearance.type.includes('bar')) setMapLineBarOptions(option, node);
                 // 仪表盘
                 if (appearance.type === 'gauge') setMapGaugeOptions(option, node);
                 // 环形图 || 饼图
@@ -78,7 +84,7 @@ export function echarts(ctx, node) {
                 // 3d 柱状图
                 if (appearance.type === '3dBar') setMap3dBarOptions(option, node);
                 // Top排行榜
-                if (appearance.type === 'TOP') setMapTopOptions(option, node);
+                if (appearance.type.includes('TOP')) setMapTopOptions(option, node);
                 //option.title = appearance.title;
                 option.backgroundColor = appearance.backgroundColor;
                 currentStore.echartsOptionsPool[node.id] = {
@@ -95,7 +101,6 @@ export function echarts(ctx, node) {
             }
             // echarts 数据渲染更新
             setMapDataOptions(option, currentStore.echartsOptionsPool[node.id].data);
-
             node.elementRendered = true;
         })
     }

package/chart-diagram/src/utils/changeOptions.js

@@ -94,11 +94,21 @@ export function setChartYAxisData(yAxis, appearance) {
     if (!appearance.ysplitLineLineStyle && yAxis[0].splitLine.show) {
         appearance.ysplitLineLineStyle = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData['ysplitLineLineStyle']));
     }
+    if(appearance.total && appearance.total.length && appearance.totalLabelSynchroYData) {
+        const newYAxisData = [];
+        for (let i = 0; i < appearance.total.length; i++) {
+            const item = appearance.total[i];
+            if(item.value) newYAxisData.push(item.label);
+        }
+        yAxis[0].data = newYAxisData;
+    } 
     for (let i = 0; i < yAxis.length; i++) {
         const item = yAxis[i];
+        if(!item.axisLabel) item.axisLabel = {};
         if (!item.axisLabel.textStyle) {
             item.axisLabel.textStyle = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData['y1axisLabelTextStyle']));
         }
+        if(!item.splitLine) item.splitLine = {};
         if (!item.splitLine.lineStyle) {
             item.splitLine.lineStyle = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData['ysplitLineLineStyle']));
         }

package/chart-diagram/src/utils/conversion.d.ts

@@ -7,6 +7,7 @@ interface echartsOptions {
 }
 export declare function getXYAxisLabelVal(index: number, intervalNum: number, value: any): string;
 export declare function initBindTabSetting(node: any): string;
+export declare function setMapScatterOptions(option: echartsOptions, node: any): void;
 export declare function setMapLineBarOptions(option: echartsOptions, node: any): void;
 export declare function setMapGaugeOptions(option: echartsOptions, node: any): void;
 export declare function setMapRingOptions(option: echartsOptions, node: any): void;

package/chart-diagram/src/utils/conversion.js

@@ -1,4 +1,4 @@
-import {echartsDataRoom, echartsColorData} from '../../../static';
+import {echartsDataRoom, echartsColorData, rankingTopImageName} from '../../../static';
 import {
     setSeriesRenderGroup,
     drawGraphicShape,
@@ -7,7 +7,8 @@ import {
     setChartYAxisData,
     setLineSeriesStyleData,
     setRingPreSeriesOptions,
-    setRingProSeriesOptions
+    setRingProSeriesOptions,
+    mapFormatterSet
 } from '../utils';
 import {
     gaugeNormalAuto,
@@ -15,7 +16,9 @@ import {
     pieRingAssetTotalAuto,
     pieRingProportionAuto,
     pieRingNormalAuto,
-    topRankingListAuto
+    topRankingListAuto,
+    scatterDataAuto,
+    barPileStaticDataAuto
 } from './render';
 import {commonStore, echartsStaticType} from "../../../core";
 
@@ -76,6 +79,33 @@ export function setMapStopAutoMoveOptions(chartNode) {
 
 }
 
+// 自动配置散点图的节点数据
+export function setMapScatterOptions(option, node) {
+    if(node.appearance.series) {
+        for (let i = 0; i < option.series.length; i++) {
+            const series = option.series[i];
+            const setSeries = node.appearance.series[i];
+            if(setSeries) {
+                series.itemStyle.color = setSeries.itemColor;
+                series.itemStyle.borderColor = setSeries.itemBorderColor;
+            }
+        }
+    }
+    if(node.appearance.yAxis && node.appearance.yAxis.axisLabel && node.appearance.yAxis.axisLabel.length) {
+        const yAxisAxisLabelRich = option.yAxis[0].axisLabel.rich;
+        const yAxisAxisLabel = node.appearance.yAxis.axisLabel;
+        const yAxisData = [];
+        for (let i = 0; i < yAxisAxisLabel.length; i++) {
+            const axisLabel = yAxisAxisLabel[i];
+            yAxisAxisLabelRich[`f${i+1}`] = {
+                color: axisLabel.color
+            };
+            if(axisLabel.label) yAxisData.push(axisLabel.label);
+        }
+        option.yAxis[0].data = yAxisData;
+    }
+}
+
 // 自动配置折线和柱状图的节点数据
 export function setMapLineBarOptions(option, node) {
     option.color = node.appearance.color;
@@ -85,11 +115,17 @@ export function setMapLineBarOptions(option, node) {
     option.yAxis[0].axisLabel.formatter = function (value, index) {
         return getXYAxisLabelVal(index, node.appearance.intervalNumY, value);
     }
-    if (option.series.length < 2) {
-        option.tooltip.formatter = function (params) {
-            const item = params[0];
-            return item.name + ' : ' + item.value;
+    if(option.series.length < 2) return;
+    const total = node.appearance.total;
+    if(total && total.length) {
+        const seriesData = option.series[0].data;
+        if(seriesData.length < total.length && total[total.length - 1].value) seriesData.push(20);
+        const data2 = [];
+        for (let i = 0; i < seriesData.length; i++) {
+            const dr = node.appearance.total[i] ? node.appearance.total[i].value - Number(seriesData[i]) : option.series[1].data[i];
+            data2.push(dr);
         }
+        option.series[1].data = data2;
     }else {
         option.series.map((item, index) => {
             if(!(item.itemStyle && item.itemStyle.normal && item.itemStyle.normal.color)) {
@@ -133,13 +169,13 @@ export function setMapRingOptions(option, node) {
     //const chartOption = JSON.parse(JSON.stringify(option));
     const appearance = node.appearance;
     if(appearance.type === 'ringPre'){
-        
+
         setRingPreSeriesOptions(option, appearance);
-        
+
     }else if(appearance.type === 'ringPro'){
-        
+
         setRingProSeriesOptions(option, appearance);
-        
+
     }else {
         const seriesNode = option.series[0];
         if ((!appearance.label || typeof appearance.label.showValue !== 'boolean')) {
@@ -151,16 +187,41 @@ export function setMapRingOptions(option, node) {
         seriesNode.label = {
             normal: {
                 show: true,
-                position: 'outside'
+                position: 'outside',
+                color: appearance.label.color || '',
+                fontSize: appearance.label.fontSize || '12'
             }
         };
-        seriesNode.label.normal.formatter = (data) => {
-            if (appearance.label.showValue === true) {
-                return `${data.name}：${data.value}${appearance.label.unit}`;
-            } else {
-                return `${data.name}`;
+
+        seriesNode.labelLine = appearance.labelLine && {...appearance.labelLine} || {};
+
+        if(seriesNode.labelLine.lineStyle && !seriesNode.labelLine.lineStyle.color) {
+            delete seriesNode.labelLine.lineStyle['color'];
+        }
+
+        const rich = {};
+
+        if(appearance.cir && appearance.cir.show) {
+            rich.cir = {...appearance.cir};
+            if(!rich.cir.borderColor) rich.cir.borderColor = 'auto';
+            if(!rich.cir.backgroundColor) rich.cir.backgroundColor = 'transparent';
+        }
+
+        if(appearance.labelDetail && appearance.labelDetail.length) {
+            // 环形明细展示配置，线条样式配置
+            rich.a = {
+                color: appearance.label.color || '',
+                fontSize: appearance.label.fontSize || '12'
+            };
+            for (let i = 0; i < appearance.labelDetail.length; i++) {
+                const detail = appearance.labelDetail[i];
+                rich[`b${i+1}`] = {
+                    color: detail.color,
+                    fontSize: detail.fontSize || '12'
+                };
             }
         }
+        seriesNode.label.normal.rich = rich;
     }
 }
 
@@ -199,6 +260,21 @@ export function setMapTopOptions(option, node) {
     //const chartOption = JSON.parse(JSON.stringify(option));
     const appearance = node.appearance;
     Object.assign(option.grid, appearance.grid);
+    if(!appearance.type.includes('TOPRanking')) return;
+    const yNode = option.yAxis[0];
+    if(yNode.axisLabel.rich['a1']) return;
+    for (let i = 0, length = yNode.data.length; i < length; i++) {
+        const order = i + 1;
+        yNode.axisLabel.rich[`a${order}`] = {
+            width: 30,
+            height: 17,
+            lineHeight: 22,
+            verticalAlign: 'bottom',
+            backgroundColor: {
+                image: `../../../images/TOP/NO-${order}-${rankingTopImageName[i]}.png`
+            }
+        }
+    }
 }
 
 /**
@@ -220,7 +296,7 @@ export function setMapGlobalOptions(option, node) {
     // 图表Y轴数据
     if (option.yAxis) setChartYAxisData(option.yAxis, appearance);
     // 图表图例数据
-    if (option.legend) setChartLegendData(option.legend, appearance);
+    //if (option.legend) setChartLegendData(option.legend, appearance);
     // 曲线样式数据
     if (appearance.type.includes('line')) setLineSeriesStyleData(option.series, appearance);
 }
@@ -254,12 +330,25 @@ export function setMapDataOptions(option, node) {
 
             if(node.tabData && node.tabData.data.state && optionNode.yAxis[0].max) Object.assign(optionNode.yAxis[0], node.tabData.data); //若Tabs切换配置了数据，则修改Y轴原有配置
 
-            lineBarDataAuto(optionNode, params, staticTypeData);
+            if(appearance.type === 'barPileStatic') {
+
+                barPileStaticDataAuto(optionNode, staticTypeData, appearance);
+
+            }else {
+
+                lineBarDataAuto(optionNode, params, staticTypeData, appearance);
+
+            }
 
         }
-        if(displayMode === 4) { // top排行榜
+        if(displayMode === 4) { // top排行榜-电量仪
 
-            topRankingListAuto(optionNode, staticTypeData);
+            topRankingListAuto(optionNode, staticTypeData, appearance);
+
+        }
+        if(displayMode === 7) { // 散点图
+
+            scatterDataAuto(optionNode, staticTypeData);
 
         }
         if (displayMode === 5 || displayMode === 3) { // 饼图/环形图
@@ -305,7 +394,6 @@ export function setMapDataOptions(option, node) {
                 if (item.data) {
                     optionNode.yAxis[i].data = item.data;
                 }
-                ;
             }
         }
         if (option.series) {
@@ -317,6 +405,8 @@ export function setMapDataOptions(option, node) {
         }
     }
 
+    mapFormatterSet(appearance, optionNode, staticTypeData);
+
     const currentChartNode = commonStore[node.TID].echartsDataPool[node.id];
     const mapChart = currentChartNode.chart;
     clearInterval(currentChartNode.timeTicket);

package/chart-diagram/src/utils/formatter.d.ts

@@ -0,0 +1 @@
+export declare function mapFormatterSet(appearance: object, option: any, data: any): void;

package/chart-diagram/src/utils/formatter.js

@@ -0,0 +1,170 @@
+import {rankingTopColorList} from '../../../static';
+
+export function mapFormatterSet(appearance, options, data) {
+    if(appearance.type.includes('ring') || appearance.type.includes('pie')) {
+        const seriesNode = options.series[0];
+        if(seriesNode.label && seriesNode.label.normal &&!seriesNode.label.normal.formatter) {
+            setMapRingOptionsFormatter(appearance, seriesNode);
+        }
+    }
+    if(appearance.type.includes('line') || appearance.type.includes('bar')) setMapLineBarFormatter(appearance, options);
+    if(appearance.type.includes('lineTwins')) setMapLineTwinsFormatter(appearance, options);
+    if(appearance.type.includes('scatter')) setMapScatterFormatter(options);
+    if(appearance.type.includes('TOPRanking')) setMapTopScoreFormatter(options, data, appearance);
+    if(appearance.type.includes('barPileStatic')) setMapBarPileStaticFormatter(appearance, options);
+}
+function setMapLineTwinsFormatter(appearance, options) {
+    if(!options.tooltip.formatter && appearance.tooltipUnit) {
+        options.tooltip.formatter = function (params) {
+            let relVal = params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+                const unit = appearance.tooltipUnit[i] || '';
+                relVal +=
+                        "<br/>" +
+                        params[i].marker +
+                        params[i].seriesName +
+                        " : " +
+                        params[i].value +
+                        unit;
+            }
+            return relVal;
+        }
+    }
+}
+// 折线 || 柱状图
+function setMapLineBarFormatter(appearance, options){
+    if(!options.tooltip.formatter){
+        options.tooltip.formatter = function(param) {
+            const firstUnit = getTooltipUnit(0, appearance);
+            const firstDott = getTooltipDott(param[0].color);
+            let data = `${firstDott}${param[0].seriesName}：${param[0].value} ${firstUnit}`;
+            for (let i = 1; i < param.length; i++){
+                const item = param[i];
+                const unit = getTooltipUnit(i, appearance);
+                const dott = getTooltipDott(param[i].color);
+                data += `<br>${dott}${item.seriesName}：${item.value} ${unit}`;
+            }
+            return `<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 12px;margin-bottom: 5px;">${param[0].name}</div>${data}`;
+        }
+    }
+}
+function getTooltipUnit(index, appearance) {
+    if(!(appearance.tooltipUnit && appearance.tooltipUnit[index])) return '';
+    return appearance.tooltipUnit[index];
+}
+function getTooltipDott(color) {
+    return `<span style="display: inline-block;margin-right: 8px;border: 5px solid ${color};border-radius: 100%"></span>`;
+}
+// 堆叠统计
+function setMapBarPileStaticFormatter(appearance, options) {
+    if(!options.tooltip.formatter){
+        options.tooltip.formatter = function(param) {
+            let data = `${param[0].seriesName}：${param[0].value} ${appearance.series[0] && appearance.series[0].labelUnit || ''}`;
+            for (let i = 1; i < param.length; i++){
+                const item = param[i];
+                const series = appearance.series[i];
+                data += `<br>${item.seriesName}：${appearance.total && appearance.total[item.dataIndex].value || item.value} ${series && series.labelUnit || ''}`;
+            }
+            return `<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 12px;margin-bottom: 5px;">${param[0].name}</div>${data}`;
+        }
+    }
+    for (let i = 0; i < options.series.length; i++) {
+        const item = options.series[i];
+        const setItem = appearance.series[i];
+        if(setItem) {
+            item.itemStyle.normal.color = setItem.itemColor;
+            item.label.color = setItem.labelColor;
+            item.label.fontSize = setItem.labelSize;
+            item.label.padding[0] = setItem.labelTop;
+        }
+        item.label.formatter = `{c}${setItem ? setItem.labelUnit : ''}`;
+    }
+    if(appearance.total && appearance.total.length) {
+        options.series[1].label.formatter = function(param) {
+            if(!param.value) return '';
+            const val = appearance.totalLabel ? appearance.total[param.dataIndex].value ||  options.series[1].data[param.dataIndex] : '';
+            return `${val}${appearance.series[1].labelUnit}`;
+        }
+    }
+}
+// Top排行榜自定义展示配置
+function setMapTopScoreFormatter(options, data, appearance) {
+    const yNode = options.yAxis[0];
+    if(!yNode.axisLabel.formatter) {
+        yNode.axisLabel.formatter = function(value, i) {
+            return `{a${i+1}|}{b|${value}}`;
+        }
+    }
+    const seriesNode = options.series[0];
+    if(appearance.total && appearance.total.length) {
+        const realData = data && data.seriesData && data.seriesData[0] && data.seriesData[0].data;
+        const normalData = [28.7, 24.2, 20.3, 19.8, 19.3];
+        const resultData = realData && realData.length ? realData : normalData;
+        seriesNode.itemStyle.normal.label.formatter = function(param) {
+            return `${resultData[param.dataIndex]}${appearance.unit}`;
+        }
+        for(let i = 0; i < appearance.total.length; i++) {
+            const value = appearance.total[i].value;
+            seriesNode.data[i] = value ? parseInt(value) : normalData[i];
+        }
+    }
+    if(seriesNode.itemStyle.normal.color) return;
+    const colorList = appearance.barColor || rankingTopColorList;
+    for (let i = 0; i < options.series.length; i++) {
+        const node = options.series[i];
+        node.itemStyle.normal.color = function(params) {
+            return colorList[params.dataIndex];
+        }
+    }
+}
+// 散点图series自定义展示配置
+function setMapScatterFormatter(options) {
+    const seriesNode = options.series[0];
+    if(!options.tooltip.formatter) {
+        options.tooltip.formatter = function(param) {
+            const value = param.value;
+            // prettier-ignore
+            return `<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 12px;padding-bottom: 5px;margin-bottom: 5px;">${param.seriesName}告警</div>告警等级：${value[1]}<br>告警数量：${value[2]}`;
+        }
+    }
+    if(!options.yAxis[0].axisLabel.formatter) {
+        options.yAxis[0].axisLabel.formatter = function (value, index) {
+            return `{f${index+1}|${value}}`;
+        }
+    }
+    if(seriesNode.symbolSize) return;
+    for (let i = 0; i < options.series.length; i++) {
+        const node = options.series[i];
+        node.symbolSize = function(d) {
+            let markSize = Math.sqrt(d[2]) * 2;
+            if(markSize < 6) markSize = 6;
+            if(markSize > 20) markSize = 20;
+            //if(!markSize) markSize = 1;
+            return markSize;
+        }
+        node.label.emphasis.formatter = function(param) {
+            return param.data[0];
+        }
+    }
+}
+// 环形图自定义展示配置
+function setMapRingOptionsFormatter(appearance, seriesNode) {
+    if(appearance.labelDetail && appearance.labelDetail.length) {
+        seriesNode.label.normal.formatter = (data) => {
+            let result = `{a|${data.name}}\n{cir|}`;
+            for (let i = 0; i < appearance.labelDetail.length; i++) {
+                const detail = appearance.labelDetail[i];
+                result += '\n'+`{b${i+1}|${detail.title}${i === 0 ? data.value : data[`value${i+1}`]}${detail.unit}}`;
+            }
+            return result;
+        }
+    }else {
+        seriesNode.label.normal.formatter = (data) => {
+            if (appearance.label.showValue === true) {
+                return `${data.name}：${data.value}${appearance.label.unit}`;
+            } else {
+                return `${data.name}`;
+            }
+        }
+    }
+}

package/chart-diagram/src/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './conversion';
 export * from './drawGraphic';
 export * from './changeOptions';
+export * from './formatter';

package/chart-diagram/src/utils/index.js

@@ -1,3 +1,4 @@
 export * from './conversion';
 export * from './drawGraphic';
 export * from './changeOptions';
+export * from './formatter';

package/chart-diagram/src/utils/render.d.ts

@@ -1,5 +1,7 @@
-export declare function lineBarDataAuto(option: any, params: {}, data: {}): void;
-export declare function topRankingListAuto(option: any, data: {}): void;
+export declare function lineBarDataAuto(option: any, params: {}, data: {}, appearance: {}): void;
+export declare function barPileStaticDataAuto(option: any, data: {}, appearance: {}): void;
+export declare function topRankingListAuto(option: any, data: {}, appearance: {}): void;
+export declare function scatterDataAuto(option: any, data: {}): void;
 export declare function pieRingAssetTotalAuto(option: any, data: {}, total: number, count: number): void;
 export declare function pieRingProportionAuto(option: any, data: {}, proportion: number): void;
 export declare function pieRingNormalAuto(option: any, data: {}): void;

package/chart-diagram/src/utils/render.js

@@ -5,8 +5,9 @@ import {echartsColorData} from "../../../static";
  * @param option 图表配置数据
  * @param params 绑定的图表参数
  * @param data 实时图表数据
+ * @param appearance 配置参数
  */
-export function lineBarDataAuto(option, params, data) {
+export function lineBarDataAuto(option, params, data, appearance) {
     const seriesNodes = option.series;
     if(data && data.XData) option.xAxis[0].data = data.XData;
     if(!(data && data.seriesData && data.seriesData.length)) return;
@@ -19,6 +20,25 @@ export function lineBarDataAuto(option, params, data) {
     }
     if(seriesNodes.length > 1 || params && params.curveNum > 1){
         // 双曲线|柱状
+        if(option.yAxis.length > 1 && appearance.yAxisValueAuto) {
+            if(!appearance.yAxisMaxIntervalue) appearance.yAxisMaxIntervalue = 1;
+            // 双轴曲线，且曲线值为自适应
+            const dataGroup = {
+                data1: data.seriesData[0] && data.seriesData[0].data || [],
+                data2: data.seriesData[1] && data.seriesData[1].data || []
+            };
+            const newData = [...dataGroup.data1, ...dataGroup.data2];
+            let min = Math.min(...newData);
+            let max = Math.max(...newData);
+            const power = Math.floor(Math.log10(min));
+            for (let i = 0; i < option.yAxis.length; i++) {
+                const currentData = dataGroup[`data${i + 1}`];
+                if(min < 0 && Math.max(...currentData) < max) max *= appearance.yAxisMaxIntervalue;
+                if(min > 0 && Math.max(...currentData) < max) min = Math.pow(10, power);
+                option.yAxis[i].min = Math.ceil(min);
+                option.yAxis[i].max = Math.ceil(max);
+            }
+        }
         const legendData = [];
         let legendChange = false;
         seriesNodes.map((item, index) => {
@@ -37,7 +57,16 @@ export function lineBarDataAuto(option, params, data) {
         let seriesData = [];
         for (let i = 0; i < data.seriesData.length; i++){
             const realSeriesNode = data.seriesData[i];
-            const currSeriesNode = seriesNodes[i] ? seriesNodes[i] : JSON.parse(JSON.stringify(seriesNodes[0]));
+            let currSeriesNode = {};
+            const seriesItem = seriesNodes[i];
+            if(seriesItem) {
+                currSeriesNode = seriesItem;
+            }else {
+                const newSeriesItem = JSON.parse(JSON.stringify(seriesNodes[0]));
+                newSeriesItem.itemStyle.normal.lineStyle.color = echartsColorData[i];
+                newSeriesItem.itemStyle.normal.color = echartsColorData[i];
+                currSeriesNode = newSeriesItem;
+            }
             if(realSeriesNode.name) currSeriesNode.name = realSeriesNode.name;
             currSeriesNode.data = realSeriesNode.data;
             seriesData.push(currSeriesNode);
@@ -46,21 +75,89 @@ export function lineBarDataAuto(option, params, data) {
     }
 }
 
+export function barPileStaticDataAuto(option, data, appearance) {
+    if(data && data.XData) option.yAxis[0].data = data.XData;
+    if(!(data && data.seriesData && data.seriesData.length)) return;
+    const seriesData = data.seriesData[0].data;
+    option.series[0].data = seriesData;
+    const data2 = [];
+    for (let i = 0; i < seriesData.length; i++) {
+        const dr = appearance.total[i] ? appearance.total[i].value - Number(seriesData[i]) : data.seriesData[1].data[i];
+        data2.push(dr);
+    }
+    option.series[1].data = data2;
+}
+
 /**
- * TOP排行榜实时数据
+ * TOP排行-电量仪实时数据
  * @param option 图表配置数据
  * @param data 实时图表数据
+ * @param appearance 自定义配置数据
  */
-export function topRankingListAuto(option, data) {
+export function topRankingListAuto(option, data, appearance) {
     if(data && data.XData) option.yAxis[0].data = data.XData;
     if(!(data && data.seriesData && data.seriesData.length)) return;
-    const seriesData = data.seriesData[0].data;
-    option.yAxis[1].data = seriesData;
+    if(appearance.type === 'TOPRanking') {
+        if(appearance.total && appearance.total.length) return;
+        option.series[0].data = data.seriesData[0].data;
+    }else {
+        const seriesData = data.seriesData[0].data;
+        option.yAxis[1].data = seriesData;
+        for (let i = 0; i < option.series.length; i++) {
+            const node = option.series[i];
+            node.symbolBoundingData = data.total;
+            node.data = seriesData;
+        }
+    }
+}
+/**
+ * 散点图-分数实时数据
+ * @param option 图表配置数据
+ * @param data 实时图表数据
+ */
+export function scatterDataAuto(option, data) {
+    if(data && data.XData) option.xAxis[0].data = data.XData;
+    if(!(data && data.seriesData && data.seriesData.length)) return;
+    const { scatterData, legend, yData } = convertScatter3DTo2D(data);
+    option.legend.data = [...legend];
+    option.yAxis[0].data = [...yData];
     for (let i = 0; i < option.series.length; i++) {
-        const node = option.series[i];
-        node.symbolBoundingData = data.total;
-        node.data = seriesData;
+        const seriesNode = option.series[i];
+        const name = option.legend.data[i];
+        seriesNode.name = name;
+        seriesNode.data = scatterData[name];
+    }
+}
+
+function convertScatter3DTo2D(arr3d) {
+    const { XData, seriesData } = arr3d;
+    const scatterData = {};
+    const legend = [];
+    const yData = new Set();
+    // 第一层遍历
+    for (let d = 0, depth = seriesData.length; d < depth; d++) {
+        const areaData = seriesData[d];
+        const areaName = areaData.name;
+        if(!scatterData[areaName]) scatterData[areaName] = [];
+        legend.push(areaData.name);
+        // 第二层遍历
+        const statusData = areaData.data;
+        for (let h = 0, height = statusData.length; h < height; h++) {
+            const issues = statusData[h];
+            const statusName = XData[h];
+            // 第三层遍历
+            for (let w = 0, width = issues.length; w < width; w++) {
+                const { name, value } = issues[w];
+                yData.add(name);
+                if(value) scatterData[areaName].push([statusName, name, Number(value)]);
+            }
+        }
     }
+    return {
+        scatterData,
+        legend,
+        yData
+    };
 }
 
 /**
@@ -89,7 +186,7 @@ export function pieRingAssetTotalAuto(option, data, total, count) {
  */
 export function pieRingProportionAuto(option, data, proportion) {
     if(data && data.length) {
-        proportion = Number(data[0].value) * 100;
+        proportion = Number(data[0].value);
     }
     if(!option.series[0].data[0].label.normal.formatter) option.series[0].data[0].label.normal.formatter = function(params){
         return params.value ? `{v|${params.value}}{unit|%}` : `{v|${params.value}}`;

package/core/src/canvas.js

@@ -62,9 +62,10 @@ var Canvas = /** @class */ (function (_super) {
         }
         this.canvas.style.width = this.width + 'px';
         this.canvas.style.height = this.height + 'px';
-        this.canvas.width = (this.width * Canvas.dpiRatio) | 0;
-        this.canvas.height = (this.height * Canvas.dpiRatio) | 0;
-        this.canvas.getContext('2d').scale(Canvas.dpiRatio, Canvas.dpiRatio);
+        const dpr = window.devicePixelRatio || 1;
+        this.canvas.width = (this.width * dpr) | 0;
+        this.canvas.height = (this.height * dpr) | 0;
+        this.canvas.getContext('2d').scale(dpr, dpr);
         Store.set(this.generateStoreKey('LT:size'), { width: this.canvas.width, height: this.canvas.height });
     };
     Canvas.prototype.render = function () {

package/core/src/common.js

@@ -14,12 +14,10 @@ import {
     setInitConfData,
     getParams,
     tabHideShowOperation,
-    tabStaticOperation,
-    echartsStaticType
+    tabStaticOperation
 } from './utils';
 import {useStore, clearStore, commonStore} from './store'
 import * as mqtt from './mqtt.min';
-import {setElementSwitchTabState} from './element';
 var MoveInType;
 (function (MoveInType) {
     MoveInType[MoveInType["None"] = 0] = "None";
@@ -40,6 +38,8 @@ var Common = /** @class */ (function () {
         this.mouseDown = null;
         this.renderTimer = 0;
         this.lastRender = 0;
+        this.pageResizeTim = null;
+        this.isResize = false;
         this.id = s8();
         this.store = useStore(this.id);
         if (typeof parent === 'string') {
@@ -248,6 +248,16 @@ var Common = /** @class */ (function () {
         }
         let data = JSON.parse(JSON.stringify(obj));
         Object.assign(this.store.data, data);
+        // pageZoomOnly 表示topology页面只全局缩放，不对局部缩放进行调整
+        if(this.store.options.type !== 'topology' && this.store.options.type !== 'pageZoomOnly') {
+            const screenWidth = window.screen.width < 1920 ? 1920 : window.screen.width;
+            const zoom = window.innerWidth < screenWidth ? document.documentElement.clientWidth / screenWidth : 1;
+            this.store.data.pageZoom = zoom;
+            this.store.parentElem.style.transform = `scale(${1/zoom})`;
+            this.store.parentElem.style.transformOrigin = '0 0';
+            this.store.parentElem.parentElement.style.overflow = 'hidden';
+            Store.set('PAGE:zoom', zoom);
+        }
         this.store.data.pens = [];
         this.openCount = 0
         const type = this.store.options.type;
@@ -492,7 +502,7 @@ var Common = /** @class */ (function () {
             }
             penNode.activeImgeIndex = isActive;
             tabIndex++;
-            if(staticType === 'SH') tabHideShowOperation(switchNode, tabAreaData); // 对显示隐藏的功能进行交互处理
+            if(staticType === 'SH') tabHideShowOperation(switchNode, tabAreaData, isActive); // 对显示隐藏的功能进行交互处理
         }
         // 对绑定的图表进行数据处理
         tabStaticOperation(staticType, node, tabAreaData, visitParams);

package/core/src/element/common.js

@@ -1,12 +1,14 @@
 import {Lock} from '../models';
+import {commonStore} from '../store';
 export function setStyleForElementIdDiv(node, elem, data) {
     if (!elem) return;
+    const store = commonStore[node.TID].data;
     elem.style.position = 'absolute';
     elem.style.outline = 'none';
     elem.style.left = node.rect.x + 'px';
     elem.style.top = node.rect.y + 'px';
-    elem.style.width = node.rect.width + 'px';
-    elem.style.height = node.rect.height + 'px';
+    elem.style.width = node.rect.width / store.pageZoom + 'px';
+    elem.style.height = node.rect.height / store.pageZoom + 'px';
     if (node.rotate || node.offsetRotate) {
         elem.style.transform = "rotate(" + (node.rotate + node.offsetRotate) + "deg)";
     }

package/core/src/element/select.js

@@ -70,6 +70,7 @@ export function setSelectInteractiveState(selected, node) {
 }
 // 重置下拉状态
 export function resetSelectInteractiveState(node) {
+    if(!node || !node.TID) return;
     const currentStore = commonStore[node.TID];
     if(!Object.keys(currentStore.selectDataPool).length) return;
     for (let data of Object.values(currentStore.selectDataPool)) {

package/core/src/element/tab.js

@@ -2,7 +2,13 @@ import {jsonLength} from '../utils';
 import {commonStore} from "../store";
 // 设置tab切换显示隐藏时的 Dom元件状态
 export function setElementSwitchTabState(node) {
-    if(node.name !== 'echarts' && (!node.children || !node.children.length)) return;
+    if(node.children && node.children.length) {
+        node.children.map((ch) => {
+            ch.visible = node.visible;
+            setElementSwitchTabState(ch);
+        })
+    }
+    if(!(node.name === 'echarts' || node.name === 'select')) return;
     if(typeof commonStore[node.TID].elementInteractivePoor.elementDataLength !== 'number') {
         commonStore[node.TID].elementInteractivePoor.elementDataLength = jsonLength(commonStore[node.TID].echartsDataPool) || jsonLength(commonStore[node.TID].selectDataPool);
     }
@@ -14,10 +20,4 @@ export function setElementSwitchTabState(node) {
     }else {
         commonStore[node.TID].data.dataResize = 1;
     }
-    if(node.children && node.children.length) {
-        node.children.map((ch) => {
-            ch.visible = node.visible;
-            setElementSwitchTabState(ch);
-        })
-    }
 }

package/core/src/healps/changeData.js

@@ -110,7 +110,7 @@ export function setConfItemNode(pen, syn_synata) {
             const {echartDataValue} = syn_synata;
             const seriesData = echartDataValue;
             const realData = pen.data.params && seriesData && Object.keys(seriesData).length && seriesData[pen.data.params.id];
-            if (Array.isArray(realData)) {
+            if (Array.isArray(realData) && pen.data.params && pen.data.params.displayMode !== 7) {
                 getEchartsRealData(pen, realData);
             } else {
                 commonStore[pen.TID].echartsRealDataPool[pen.id] = realData;

package/core/src/models/node.js

@@ -657,10 +657,21 @@ var Node = /** @class */ (function (_super) {
                 if (item.linear) {
                     // 线条左右流动动画
                     if([animateType.LeftFlow, animateType.RightFlow].includes(this.animateType) && item.state.lineDashOffset){
-                        const lineDashOffset = item.state.lineDashOffset;
-                        if (lineDashOffset > 100) item.state.lineDashOffset = 1;
-                        if (lineDashOffset < -100) item.state.lineDashOffset = -1;
-                        lineDashOffset > 0 ? item.state.lineDashOffset++ : item.state.lineDashOffset--;
+                        let o = item.state.lineDashOffset;
+                        switch (this.animateType) {
+                            case animateType.LeftFlow:
+                                o = Math.abs(o)
+                                if (o > 100) o = 1;
+                                o++ 
+                                
+                                break;
+                            case animateType.RightFlow:
+                                o = Math.abs(o)*-1
+                                if (o < -100) o = -1;
+                                o--
+                                break;
+                        }
+                        item.state.lineDashOffset = o
                         this.lineDashOffset = item.state.lineDashOffset;
                     }else if(([animateType.Show, animateType.Rotate].includes(this.animateType) || this.name === 'electricFan') && item.state.rotate !== item.initState.rotate) {
                         // 旋转动画，判断逻辑先这么写，日后将所有动画统一在编辑器中配置，再做优化

package/core/src/preview.js

@@ -1,3 +1,5 @@
+import {Store} from "le5le-store";
+
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -103,7 +105,7 @@ var Preview = (function (_super) {
                         if (visibleRange == '1') {
                             _this.openCount++
                         }
-                        this.render();
+                        _this.render();
                         break;
                     case downDataType.Tabswitch:
                         _this.switchStaticsCheckType(_this.moveIn.hoverNode, _this.moveIn.eventNode);
@@ -184,6 +186,27 @@ var Preview = (function (_super) {
                 _this.moveIn.hoverNode.text = '全屏';
                 _this.fitViewPreview(_this.isFullScreen);
                 _this.isFullScreen = false;
+            }else {
+                // pageZoomOnly 表示topology页面只全局缩放，不对局部缩放进行调整，不执行render重绘。通常用于无任何操作事件的topology驾驶舱
+                if(_this.store.options.type === 'topology' || _this.store.options.type === 'pageZoomOnly') return;
+                const screenWidth = window.screen.width < 1920 ? 1920 : window.screen.width;
+                const zoom = window.innerWidth < screenWidth ? document.documentElement.clientWidth / screenWidth : 1;
+                _this.isResize = true;
+                clearTimeout(_this.pageResizeTim);
+                _this.pageResizeTim = setTimeout(() => {
+                    if(_this.isResize){
+                        const pageZoom = 1/zoom;
+                        _this.store.data.pageZoom = zoom;
+                        _this.store.parentElem.style.transform = `scale(${pageZoom})`;
+                        _this.store.parentElem.style.transformOrigin = '0 0';
+                        _this.store.parentElem.parentElement.style.overflow = 'hidden';
+                        _this.store.data.dataResize = 1;
+                        _this.isResize = false;
+                        Store.set('PAGE:zoom', zoom);
+                        _this.fitView();
+                        _this.render();
+                    }
+                }, 1000);
             }
         };
         return _this;
@@ -227,6 +250,8 @@ var Preview = (function (_super) {
         for (var _i = 0, _a = this.store.data.pens; _i < _a.length; _i++) {
             var item = _a[_i];
             item.scale(scale, center, w, h);
+            // 驾驶舱底部区域元件，用于控制底部区域Dom宽高等元素自由变换，后期会删除
+            if(item.tags && item.tags[0] && item.tags[0].includes('contromRoomBottom')) this.store.pens['contromRoomBottom'] = item;
         }
     };
     Preview.prototype.scaleTo = function (scale) {
@@ -245,6 +270,8 @@ var Preview = (function (_super) {
             width = this.store.options.width;
             height = this.store.options.height;
         }
+        width *= this.store.data.pageZoom;
+        height *= this.store.data.pageZoom;
         this.canvasResize({
             width: width,
             height: height,
@@ -261,7 +288,7 @@ var Preview = (function (_super) {
             rect.height = bkImageRect && bkImageRect.height ? bkImageRect.height : height;
         }
         // 6. 计算缩放比
-        var w = (width - padding[1] - padding[3]) / rect.width;
+        var w = (width - padding[1] - padding[3]) / rect.width ;
         var h = (height - padding[0] - padding[2]) / rect.height;
         var ratio = w;
         if (w > h) {

package/core/src/renderLayer.js

@@ -93,7 +93,7 @@ var RenderLayer = /** @class */ (function (_super) {
         this.bkImg.src = bkImage;
         this.bkImg.onload = function () {
             if(pixi && !_this.bkImgRect) {
-                _this.bkImgRectResize({width: _this.canvas.width, height: _this.canvas.height});
+                _this.bkImgRectResize({width: _this.width, height: _this.height});
                 _this.scale(_this.ratio, undefined, _this.scaleX, _this.scaleY);
             }else {
                 //_this.bkImgRect = _this.coverRect(_this.canvas.width, _this.canvas.height, _this.bkImg.width, _this.bkImg.height);
@@ -137,10 +137,10 @@ var RenderLayer = /** @class */ (function (_super) {
     RenderLayer.prototype.bkImgRectResize = function (size) {
         const bkImageRect = commonStore[this.TID].data.bkImageRect;
         if(!size) return;
+        const { width, height } = size;
         if(bkImageRect) {
             let x = bkImageRect.x ? Number(bkImageRect.x) : 0;
             let y = bkImageRect.y ? Number(bkImageRect.y) : 0;
-            const { width, height } = size;
             let bkWidth = bkImageRect.width ? Number(bkImageRect.width) : width;
             let bkHeight = bkImageRect.height ? Number(bkImageRect.height) : height;
             this.bkImgRect = {
@@ -157,6 +157,17 @@ var RenderLayer = /** @class */ (function (_super) {
                 x,
                 y
             };
+        }else {
+            this.bkImgRect = {
+                center: {
+                    x: width / 2,
+                    y: height / 2
+                },
+                x: 0,
+                y: 0,
+                width,
+                height
+            };
         }
     };
 

package/core/src/store/data.d.ts

@@ -11,6 +11,7 @@ export interface visualization2DData {
     fromArrowType: string;
     toArrowType: string;
     scale: number;
+    pageZoom: number,
     locked: Lock;
     bkImage: string;
     bkColor: string;
@@ -25,6 +26,7 @@ export interface visualization2DData {
     mqttTopics?: string;
     manualCps?: boolean;
     dataConstruct?: any;
+    bindDataTooltipVisible?: boolean;
     data?: any;
     bkImageRect?: any;
 }
@@ -81,12 +83,14 @@ export const createStore = () => {
             fromArrowType: '',
             toArrowType: 'triangleSolid',
             scale: 1,
+            pageZoom: 1,
             locked: Lock.None,
             bkImageRect: null,
             mqttOptions: {
                 clientId: s8()
             },
-            dataConstruct: {}
+            dataConstruct: {},
+            bindDataTooltipVisible: true
         },
         mqttData: null,
         initConfNode: {},
@@ -151,12 +155,14 @@ export const clearStore = (store: visualization2DStore, del: string) => {
         fromArrowType: '',
         toArrowType: 'triangleSolid',
         scale: 1,
+        pageZoom: 1,
         locked: Lock.None,
         bkImageRect: null,
         mqttOptions: {
             clientId: s8()
         },
-        dataConstruct: {}
+        dataConstruct: {},
+        bindDataTooltipVisible: true
     };
     store.mqttData = null;
     store.initConfNode = {};

package/core/src/store/data.js

@@ -13,7 +13,7 @@ import { default as mitt } from 'mitt';
 import { Lock } from '../models';
 import {DefalutOptions} from '../options';
 import {s8} from '../utils';
-import {commonStore} from './common'
+import {commonStore} from './common';
 import {removeAllElement} from '../../../store';
 export var createStore = function () {
     return {
@@ -27,10 +27,12 @@ export var createStore = function () {
             locked: Lock.None,
             dataResize: 1, // 数据是否加载，1是，0否
             bkImageRect: null,
+            pageZoom: 1,
             mqttOptions: {
                 clientId: s8()
             },
-            dataConstruct: {}
+            dataConstruct: {},
+            bindDataTooltipVisible: true
         },
         mqttData: null,
         initConfNode: {},
@@ -128,13 +130,15 @@ export var clearStore = function (store, del) {
         fromArrowType: '',
         toArrowType: 'triangleSolid',
         scale: 1,
+        pageZoom: 1,
         locked: Lock.None,
         dataResize: 1, // 数据是否加载，1是，0否
         bkImageRect: null,
         mqttOptions: {
             clientId: s8()
         },
-        dataConstruct: {}
+        dataConstruct: {},
+        bindDataTooltipVisible: true
     };
     store.initConfNode = {};
     store.mqttParams = {

package/core/src/utils/assignment.js

@@ -16,7 +16,12 @@ export function setInitNodeDataValidat(node, TID, type, order) {
 
     node.TID = TID;
 
-    node.visibleSwitch = type === 'topology' && node.visibleSwitch;
+    if(typeof node.visibleSwitch !== 'boolean') {
+        // 兼容旧版显示隐藏属性值设置
+        node.visibleSwitch = type === 'topology';
+    }else {
+        node.visibleSwitch = type === 'topology' && node.visibleSwitch;
+    }
 
     if(typeof order === "number") node.order = order;
     if(type !== 'topology') node.selectDropdown = false;

package/core/src/utils/conversion.d.ts

@@ -1,6 +1,6 @@
 import {Node} from "../models";
 export declare function tabStaticOperation(type: string, node: Node, areaData: any, params: object): void;
-export declare function tabHideShowOperation(node: any, areaData: any): void;
+export declare function tabHideShowOperation(node: any, areaData: any, visible: boolean): void;
 export declare function getEchartsRealData(node: {}, data: []): void;
 export declare function setInitConfData(id: string, data: object): void;
 export declare function setTagIdData(data: any): [];

package/core/src/utils/conversion.js

@@ -38,8 +38,9 @@ export function tabStaticOperation(type, node, areaData, params) {
  * Tab 显示/隐藏切换
  * @param node tab页签数据
  * @param areaData // tab展示区域数据
+ * @param isActive
  */
-export function tabHideShowOperation(node, areaData) {
+export function tabHideShowOperation(node, areaData, isActive) {
     const confIds = node.bindStaticId && node.bindStaticId.split(',') || [];
     const pens = commonStore[node.TID].data.pens;
     for (let i = 0; i < confIds.length; i++) {
@@ -47,7 +48,7 @@ export function tabHideShowOperation(node, areaData) {
         const areaNode = areaData[confid];
         if(!(areaNode && pens[areaNode.order])) return;
         const tagNode = pens[areaNode.order];
-        tagNode.visible = !(node.id !== node.id);
+        tagNode.visible = !isActive;
         setElementSwitchTabState(tagNode);
     }
 }

package/core/src/utils/onmousevent.js

@@ -34,18 +34,20 @@ export function mousMoveFun(type, pos, data) {
 
     for (var _i = 0, _a = data; _i < _a.length; _i++) {
         var item = _a[_i];
-        //const isPoint = ptInPolyXY(pos, item.rotatedAnchors);
-        let isInPointNode = null;
-        if(item.name === 'arbitraryGraph') {
-            // 任意多边形通过点获取区域
-            isInPointNode = ptInPolyXY(pos, item.rotatedAnchors);
-        }else {
-            if(!(item instanceof Node)) item = new Node(item);
-            isInPointNode = item.hit(pos);
-        }
-        if(isInPointNode) {
-            params.hoverNode = item;
-            params.order = _i;
+        if(item.visible) {
+            //const isPoint = ptInPolyXY(pos, item.rotatedAnchors);
+            let isInPointNode = null;
+            if(item.name === 'arbitraryGraph') {
+                // 任意多边形通过点获取区域
+                isInPointNode = ptInPolyXY(pos, item.rotatedAnchors);
+            }else {
+                if(!(item instanceof Node)) item = new Node(item);
+                isInPointNode = item.hit(pos);
+            }
+            if(isInPointNode) {
+                params.hoverNode = item;
+                params.order = _i;
+            }
         }
     }
     // 不在此节点上停留
@@ -63,6 +65,7 @@ export function mousMoveFun(type, pos, data) {
 }
 export function mousDownFun(type, eventNode) {
     let params = {};
+    if(eventNode === null) return params;
     const action = eventNode ? parseInt(eventNode.action) : 0;
     if(action === 3) {
         params.eventType = downDataType.Window; // 打开会话窗口

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcim-topology2d",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "",
   "main": "-",
   "scripts": {

package/static/echartsDefaultData.js

@@ -3,7 +3,7 @@ export const echartsLegendDefaultData = {
   icon: 'rect', // 图标类型：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
   itemWidth: 12, // 图标宽
   itemHeight: 12, // 图标高
-  itemGap: 8, // 图例之间的间隔 number
+  itemGap: 8, // 图例之间的间隔
   top: '0%', // 图例距离容器上边位置
   right: 'auto', // 图例距离容器右边位置
   bottom: 'auto', // 图例距离容器下边位置
@@ -140,20 +140,39 @@ export const echartsTypeMap = {
 };
 // 图表颜色
 export const echartsColorData = [
+    '#2648E9',
+    '#E513F7',
+    '#79E10E',
+    '#0D9BE7',
+    '#23CEE2',
+    '#E5B903',
+    '#2BDB8E',
+    '#CAD804',
+    '#117BEE',
+    '#DB8407',
+    '#E72B2B',
+    '#E96812',
+    '#7612D6',
+    '#A117B8',
+    'rgb(21, 151, 224)',
     'rgb(36, 220, 132)',
     'rgb(154, 77, 251)',
     'rgb(226, 182, 56)',
     'rgb(253, 92, 71)',
-    'rgb(26, 117, 255)',
     'rgb(175, 215, 14)',
     'rgb(214, 154, 37)',
     'rgb(66, 251, 251)',
     'rgb(255, 158, 4)',
-    'rgb(30, 107, 222)',
-    'rgb(21, 151, 224)',
     'rgb(19, 236, 236)',
     'rgb(68, 237, 146)',
     'rgb(251, 94, 45)',
-    'rgb(18, 255, 113)',
-    'rgb(18, 255, 113)']
-
+    'rgb(18, 255, 113)'];
+// TOP排行榜默认颜色
+export const rankingTopColorList = [
+    'rgba(239, 120, 66, .6)',
+    'rgba(255, 225, 65, .5)',
+    'rgba(55, 240, 151, .5)',
+    'rgba(72, 211, 255, .6)',
+    'rgba(67, 153, 255, .5)'
+];
+export const rankingTopImageName = ['orange', 'yellow', 'ching', 'lightBlue', 'blue'];