dcim-topology2d 2.0.5 → 2.0.7

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

@@ -7,12 +7,14 @@ import {
     setMap3dBarOptions,
     setMapTopOptions,
     setMapGlobalOptions,
-    setMapDataOptions
+    setMapDataOptions,
+    initBindTabSetting
 } from '../utils';
 import {echartsTypeMap} from '../../../static';
 
 export function echarts(ctx, node) {
-    if (!(commonStore[node.TID] && commonStore[node.TID].data.dataResize)) return;
+    const currentStore = commonStore[node.TID];
+    if (!(currentStore && currentStore.data.dataResize)) return;
     //console.log('echarts绘制-----node', node);
     // if(currentElement) currentElement.style.display = !node.visible ? 'none': 'block';
     // if(!node.visible) return;
@@ -32,7 +34,7 @@ export function echarts(ctx, node) {
     if (!node.elementId) {
         node.elementId = s8()
     }
-    let echartsData = commonStore[node.TID].echartsDataPool[node.id];
+    let echartsData = currentStore.echartsDataPool[node.id];
     if (!node.elementLoaded && !(echartsData && echartsData.div)) {
         if(!echartsData) {
             echartsData = {
@@ -51,7 +53,7 @@ export function echarts(ctx, node) {
         setTimeout(function () {
             echartsData.chart.resize()
         });
-        commonStore[node.TID].echartsDataPool[node.id] = echartsData;
+        currentStore.echartsDataPool[node.id] = echartsData;
     }
     if (!node.elementRendered) {
         const appearance = node.appearance;
@@ -59,12 +61,17 @@ export function echarts(ctx, node) {
         setTimeout(function () {
             let option = node.data.echarts.option;
             if(!(echartsData && echartsData.chart)) return;
-            const isLocked = commonStore[node.TID] && commonStore[node.TID].data.locked;
-            if (!isLocked || !commonStore[node.TID].echartsOptionsPool[node.id]) {
+            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 (['line', 'bar'].includes(appearance.type)) setMapLineBarOptions(option, node);
                 // 仪表盘
@@ -74,22 +81,23 @@ 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;
-                commonStore[node.TID].echartsOptionsPool[node.id] = {
+                currentStore.echartsOptionsPool[node.id] = {
                     option: JSON.parse(JSON.stringify(option)),
                     data: {
+                        TID: node.TID,
                         appearance,
                         id: node.id,
-                        params: node.data.params
+                        params: node.data.params,
+                        tabData
                     }
                 };
                 if (!isLocked) echartsData.chart.clear();
             }
             // echarts 数据渲染更新
-            setMapDataOptions(option, node);
-
+            setMapDataOptions(option, currentStore.echartsOptionsPool[node.id].data);
             node.elementRendered = true;
         })
     }

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

@@ -82,7 +82,11 @@ export function setChartXAxisData(xAxis, appearance) {
     //return xAxis;
 }
 
-// 图表Y轴数据
+/**
+ * 图表Y轴数据
+ * @param yAxis Y轴配置数据
+ * @param appearance 图表自定义配置
+ */
 export function setChartYAxisData(yAxis, appearance) {
     if (typeof appearance.ySplitLineShow !== 'boolean') {
         appearance.ySplitLineShow = yAxis[0].splitLine.show;
@@ -92,9 +96,11 @@ export function setChartYAxisData(yAxis, appearance) {
     }
     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

@@ -6,6 +6,7 @@ interface echartsOptions {
     tooltip: null
 }
 export declare function getXYAxisLabelVal(index: number, intervalNum: number, value: any): string;
+export declare function initBindTabSetting(node: any): string;
 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,9 +16,11 @@ import {
     pieRingAssetTotalAuto,
     pieRingProportionAuto,
     pieRingNormalAuto,
-    topRankingListAuto
+    topRankingListAuto,
+    scatterDataAuto,
+    barPileStaticDataAuto
 } from './render';
-import {commonStore} from "../../../core";
+import {commonStore, echartsStaticType} from "../../../core";
 
 export function getXYAxisLabelVal(index, intervalNum, value) {
     if (index === 0 || index % intervalNum === 0) {
@@ -27,6 +30,26 @@ export function getXYAxisLabelVal(index, intervalNum, value) {
     }
 }
 
+/**
+ * 初始化图表与tabs关联的配置数据
+ * @param node 元件节点
+ */
+export function initBindTabSetting(node) {
+    const tabStaticKey = node.tags && node.tags.find((tag) => {return tag.includes('switchTabType')});
+    const switchTabData = tabStaticKey && commonStore[node.TID].switchTabDataPool[`${tabStaticKey}Data`];
+    if(switchTabData) {
+        const tabNode = Object.values(switchTabData)[0];
+        const tabEventNode = tabNode.events.find((ev) => {return ev.action === 8});
+        const tabStaticType = tabEventNode && tabEventNode.dcimStaticForType || '';
+        node.data.params.staticForType = tabStaticType;
+        return {
+            type: tabStaticType,
+            data: tabNode.tabData
+        };
+    }
+    return null;
+}
+
 // 自动滑动展示数据
 export function setMapAutoMoveOptions(option, chartNode, node, callback) {
     option.dataZoom = echartsDataRoom;
@@ -113,13 +136,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')) {
@@ -131,16 +154,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;
     }
 }
 
@@ -179,9 +227,28 @@ 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`
+            }
+        }
+    }
 }
 
-// 公共配置
+/**
+ * 公共配置
+ * @param option 图表配置数据
+ * @param node 元件数据
+ */
 export function setMapGlobalOptions(option, node) {
     // const chartOption = JSON.parse(JSON.stringify(option));
     const appearance = node.appearance;
@@ -196,7 +263,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);
 }
@@ -205,24 +272,50 @@ export function setMapGlobalOptions(option, node) {
 export function setMapDataOptions(option, node) {
     const optionNode = commonStore[node.TID].echartsOptionsPool[node.id].option;
     const appearance = node.appearance;
-    const params = node.data ? node.data.params : node.params;
+    const params = node.params;
     // 3d 柱状图
     if (appearance.type === '3dBar') renderMap3dBarSeriesItem(optionNode.series[0], appearance);
     const displayMode = parseInt(option.displayMode); // 图表类型
-    const staticForType = params && params.staticForType || ''; //统计类型：日，周，月，年，实时
+    const staticForType = params && params.staticForType || ''; //统计类型：日，周，月，年，实时，其他
     const syncEchartsData = commonStore[node.TID].echartsRealDataPool[node.id]; // 统计图实时数据
-    const staticTypeData = staticForType ? syncEchartsData && syncEchartsData[`${staticForType}_Data`] : syncEchartsData; // 统计类型数据
+    let staticTypeData = null; // 统计类型数据
+    if(staticForType === 'OTHER'){
+        // 其他类型，类型中的数据通常统计的都是历史数据，日、周、月、年、实时中的某一类，通常搭配分组统计使用。
+        // 类型中绑定一个测点为一个类型，绑定多个测点为多个类型。比如：有电功率和功率因数为两个分类，图表分组中分类数据绑定时就要同时绑定有电功率和功率因数两个测点，否则无法实现切换
+        for (let i = 0 ; i < echartsStaticType.length; i++) {
+            const chartData = syncEchartsData && syncEchartsData[`${echartsStaticType[i]}_Data`];
+            if(chartData) staticTypeData = chartData;
+        }
+    }else {
+        // 日，周，月，年，实时类型，不与分组统计一起使用
+        staticTypeData = staticForType ? syncEchartsData && syncEchartsData[`${staticForType}_Data`] : syncEchartsData;
+    }
     // 实时数据加载
     if(staticTypeData) {
 
         if (displayMode === 1 || displayMode === 2) { // 折线图，柱状图
 
-            lineBarDataAuto(optionNode, params, staticTypeData);
+            if(node.tabData && node.tabData.data.state && optionNode.yAxis[0].max) Object.assign(optionNode.yAxis[0], node.tabData.data); //若Tabs切换配置了数据，则修改Y轴原有配置
+
+            if(appearance.type === 'barPileStatic') {
+                
+                barPileStaticDataAuto(optionNode, staticTypeData, appearance);
+                
+            }else {
+                
+                lineBarDataAuto(optionNode, params, staticTypeData);
+                
+            }
 
         }
-        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) { // 饼图/环形图
@@ -268,7 +361,6 @@ export function setMapDataOptions(option, node) {
                 if (item.data) {
                     optionNode.yAxis[i].data = item.data;
                 }
-                ;
             }
         }
         if (option.series) {
@@ -280,6 +372,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,129 @@
+import {rankingTopImageName, 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('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 setMapBarPileStaticFormatter(appearance, options) {
+    if(!options.tooltip.formatter){
+        options.tooltip.formatter = function(param) {
+            return `<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 12px;margin-bottom: 5px;">${param[0].name}</div>${param[0].seriesName}：${param[0].value}<br>${param[1].seriesName}：${appearance.total[param[1].dataIndex]}`;
+        }
+    }
+    if(!options.series[1].label.formatter){
+        options.series[1].label.formatter = function(param) {
+            if(!param.value) return '';
+            let value = '';
+            if(appearance.totalStyle) {
+                value = `${appearance.totalStyle.label ? appearance.total[param.dataIndex] : ''}${appearance.totalStyle.unit}`;
+            }else {
+                value = `${appearance.total[param.dataIndex]}`;
+            }
+            return value;
+        }
+    }
+}
+// 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;
+        if(realData && realData.length) {
+            seriesNode.data = appearance.total;
+            seriesNode.itemStyle.normal.label.formatter = function(param) {
+                return `${realData[param.dataIndex]}${appearance.unit}`;
+            }
+        }
+    }
+    if(seriesNode.itemStyle.normal.color) return;
+    for (let i = 0; i < options.series.length; i++) {
+        const node = options.series[i];
+        node.itemStyle.normal.color = function(params) {
+            return rankingTopColorList[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 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

@@ -10,6 +10,13 @@ export function lineBarDataAuto(option, params, data) {
     const seriesNodes = option.series;
     if(data && data.XData) option.xAxis[0].data = data.XData;
     if(!(data && data.seriesData && data.seriesData.length)) return;
+    if(params.tabCorrelationType) {
+        // 如果操作类型是select下拉分组下的tab切换，执行下面的逻辑
+        const realSeriesNode = data.seriesData[params.tabVisitOrder || 0];
+        seriesNodes[0].data = realSeriesNode.data;
+        if(realSeriesNode.name) seriesNodes[0].name = realSeriesNode.name;
+        return;
+    }
     if(seriesNodes.length > 1 || params && params.curveNum > 1){
         // 双曲线|柱状
         const legendData = [];
@@ -39,21 +46,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] - Number(seriesData[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
+    };
 }
 
 /**
@@ -82,7 +157,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}}`;