dcim-topology2d 2.0.7 → 2.1.0

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,
@@ -72,8 +73,10 @@ export function echarts(ctx, node) {
                 if (!appearance.type) appearance.type = echartsTypeMap[`type_${option.displayMode}`]; // 兼容旧数据配置
                 // 公共配置 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);
                 // 环形图 || 饼图

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

@@ -1,6 +1,7 @@
 export declare function setRingChartText<T>(textData: T): void;
 export declare function setRingPreSeriesOptions<T>(option: T, appearance: T): void;
 export declare function setRingProSeriesOptions<T>(option: T, appearance: T): void;
+export declare function set3DPieOptions<T>(option: T, appearance: T, labelLineData: any, realData: any): {};
 export declare function setChartLegendData<T>(legend: T, appearance: T): void;
 export declare function setChartXAxisData<T>(xAxis: [], appearance: T): void;
 export declare function setChartYAxisData<T>(yAxis: [], appearance: T): void;

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

@@ -1,11 +1,11 @@
 // 初始化图例数据和图例配置数据
 import {
-    echartsLegendDefaultData,
     echartsXAxisDefaultStyleData,
     echartsYAxisDefaultStyleData,
     echartsLineSeriesStyleData,
     echartsColorData
 } from '../../../static';
+import {getPie3D} from './surfaceParametricConversion';
 
 // 配置环形图中间区域文字样式
 export function setRingChartText(textData) {
@@ -63,6 +63,20 @@ export function setRingProSeriesOptions(option, appearance) {
     seriesLastChildNode.radius = appearance.inner.radius;
     seriesLastChildNode.itemStyle.normal.color.colorStops[0].color = appearance.inner.borderColor;
 }
+
+// 3D饼图 | 环形图 属性配置
+export function set3DPieOptions(option, appearance, labelLineData, realData){
+    let type = appearance.type.includes('pie') ? 'pie' : 'ring';
+    const {legendData, series, node, total, boxHeight} = getPie3D(appearance.grid.internalDiameterRatio, type, appearance, labelLineData, realData);
+    option.grid3D.boxHeight = boxHeight;
+    option.legend.data = legendData;
+    option.series = series;
+    return {
+        node,
+        total
+    };
+}
+
 // 图表X轴数据
 export function setChartXAxisData(xAxis, appearance) {
     for (let i = 0; i < xAxis.length; i++) {
@@ -94,6 +108,14 @@ 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 = {};
@@ -164,7 +186,6 @@ export function setChartYAxisData(yAxis, appearance) {
 
 // 图表图例数据
 export function setChartLegendData(legend, appearance) {
-    if (!legend.formatter) legend.formatter = ['{a|{name}}'].join('\n');
     // 设置默认图例文字配置，如果想改变初始化文字属性，在 appearance中配置即可
     if (!legend.textStyle) legend.textStyle = {
         color: '#fff',
@@ -176,39 +197,32 @@ export function setChartLegendData(legend, appearance) {
             verticalAlign: 'bottom',
         }
     };
-    if (!appearance.legend) {
-        appearance.legend = JSON.parse(JSON.stringify(echartsLegendDefaultData));
-        Object.assign(appearance.legend, legend);
-        delete appearance.legend['data'];
-        delete appearance.legend['textStyle'];
-    } else {
-        const {
-            icon,
-            itemWidth,
-            itemHeight,
-            itemGap,
-            top,
-            right,
-            bottom,
-            left,
-            padding,
-            color,
-            height,
-            fontSize
-        } = appearance.legend;
-        legend.icon = icon || '';
-        legend.itemWidth = itemWidth || 12;
-        legend.itemHeight = itemHeight || 12;
-        legend.itemGap = itemGap || 8;
-        legend.top = top || 'auto';
-        legend.right = right || 'auto';
-        legend.bottom = bottom || 'auto';
-        legend.left = left || 'auto';
-        legend.padding = padding || [5, 5, 5, 5];
-        legend.textStyle.color = color || '';
-        legend.textStyle.height = height || 8;
-        legend.textStyle.rich.a = fontSize || 12;
-    }
+    const {
+        icon,
+        itemWidth,
+        itemHeight,
+        itemGap,
+        top,
+        right,
+        bottom,
+        left,
+        padding,
+        color,
+        height,
+        fontSize
+    } = appearance.legend;
+    legend.icon = icon || '';
+    legend.itemWidth = itemWidth || 12;
+    legend.itemHeight = itemHeight || 12;
+    legend.itemGap = itemGap || 8;
+    legend.top = top || 'auto';
+    legend.right = right || 'auto';
+    legend.bottom = bottom || 'auto';
+    legend.left = left || 'auto';
+    legend.padding = padding || [5, 5, 5, 5];
+    legend.textStyle.color = color || '';
+    legend.textStyle.height = height || 8;
+    legend.textStyle.rich.a = fontSize || 12;
     //return legend;
 }
 

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

@@ -8,7 +8,9 @@ import {
     setLineSeriesStyleData,
     setRingPreSeriesOptions,
     setRingProSeriesOptions,
-    mapFormatterSet
+    set3DPieOptions,
+    mapFormatterSet,
+    set3DPieMouseHover
 } from '../utils';
 import {
     gaugeNormalAuto,
@@ -41,7 +43,7 @@ export function initBindTabSetting(node) {
         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;
+        if(node.data.params) node.data.params.staticForType = tabStaticType;
         return {
             type: tabStaticType,
             data: tabNode.tabData
@@ -79,6 +81,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;
@@ -88,11 +117,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)) {
@@ -136,14 +171,53 @@ 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'){
-
+        //环形‘内存、硬盘、CPU指标占比统计’节点展示配置
         setRingProSeriesOptions(option, appearance);
 
+    }else if(appearance.type === 'ring3d' || appearance.type === 'pie3d'){
+        // 3D饼图配置
+        option.backgroundColor = appearance.backgroundColor;
+        option.grid3D = {
+            show: false,
+            top: appearance.grid.top,
+            left: appearance.grid.left,
+            right: appearance.grid.right,
+            bottom: appearance.grid.bottom,
+            viewControl: {
+                alpha: appearance.grid.alpha, //角度
+                distance: appearance.grid.distance, //调整视角到主体的距离，类似调整zoom
+                rotateSensitivity: 0, //设置为0无法旋转
+                zoomSensitivity: 0, //设置为0无法缩放
+                panSensitivity: 0, //设置为0无法平移
+                autoRotate: false, //自动旋转
+            }
+        };
+        if(appearance.grid.beta) option.grid3D.viewControl.beta = appearance.grid.beta;
+        Object.assign(option.legend, appearance.legend);
+        if(appearance.labelLine && appearance.labelLine.show) set3DPieLabelLine(option, appearance.labelLine, node.TID, node.id);
+        if(appearance.legendTextStyle) {
+            const {fontSize, align, color, width, data} = appearance.legendTextStyle;
+            const rich = {
+                a: {
+                    color,
+                    width
+                }
+            }
+            for (let i = 0; i < data.length; i++) {
+                rich[`b${i}`] = data[i];
+            }
+            option.legend.textStyle = {
+                fontSize,
+                align,
+                rich
+            }
+        }
     }else {
+        // 基础图表的配置
         const seriesNode = option.series[0];
         if ((!appearance.label || typeof appearance.label.showValue !== 'boolean')) {
             appearance.label = {
@@ -192,6 +266,66 @@ export function setMapRingOptions(option, node) {
     }
 }
 
+function getItemNode(color, fontSize, fontWeight, padding) {
+    return {
+        color,
+        fontSize,
+        fontWeight,
+        padding
+    }
+}
+
+// 设置3D饼图引线样式
+function set3DPieLabelLine(option, labelLine, TID, id){
+    const rich = {};
+    const { data, color, lengthWidth, startAngle, clockwise, center, radius } = labelLine;
+    const lineData = [];
+    for (let i = 0; i < data.length; i ++){
+        const {
+            length,
+            length2,
+            nameFontSize,
+            nameFontWeight,
+            nameColor,
+            namePadding,
+            valueFontSize,
+            valueFontWeight,
+            valueColor,
+            valuePadding,
+            unitFontSize,
+            unitFontWeight,
+            unitColor,
+            unitPadding
+        } = data[i];
+        rich[`name${i+1}`] = getItemNode(nameColor, nameFontSize, nameFontWeight, namePadding);
+        rich[`unit${i+1}`] = getItemNode(unitColor, unitFontSize, unitFontWeight, unitPadding);
+        rich[`value${i+1}`] = getItemNode(valueColor, valueFontSize, valueFontWeight, valuePadding);
+        lineData.push({
+            minTurnAngle: 90,
+            length: length,
+            length2: length2,
+            lineStyle: {
+                width: lengthWidth
+            }
+        })
+    }
+    commonStore[TID].echartsDataPool[id].labelLineData = {
+        name: 'pie2d',
+        type: 'pie',
+        hoverAnimation: false,
+        label: {
+            opacity: 1,
+            color,
+            rich
+        },
+        startAngle, //起始角度，支持范围[0, 360]。
+        clockwise, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius, // 两个值设置成相同的，环形就隐藏了
+        center, //指示线的位置
+        data: lineData
+    };
+}
+
 // 自动配置3D柱状图的节点数据
 export function setMap3dBarOptions(option, node) {
     // 取消注册自定义形状
@@ -253,7 +387,7 @@ export function setMapGlobalOptions(option, node) {
     // const chartOption = JSON.parse(JSON.stringify(option));
     const appearance = node.appearance;
     // 图表网格数据
-    if (appearance.grid) {
+    if (appearance.grid && !appearance.grid.distance) {
 
         option.grid ? Object.assign(option.grid, appearance.grid) : option.grid = appearance.grid;
 
@@ -263,14 +397,15 @@ export function setMapGlobalOptions(option, node) {
     // 图表Y轴数据
     if (option.yAxis) setChartYAxisData(option.yAxis, appearance);
     // 图表图例数据
-    //if (option.legend) setChartLegendData(option.legend, appearance);
+    if (appearance.legend) setChartLegendData(option.legend, appearance);
     // 曲线样式数据
     if (appearance.type.includes('line')) setLineSeriesStyleData(option.series, appearance);
 }
 
 // 实时改变图表data值
 export function setMapDataOptions(option, node) {
-    const optionNode = commonStore[node.TID].echartsOptionsPool[node.id].option;
+    const currentStore = commonStore[node.TID];
+    let optionNode = currentStore.echartsOptionsPool[node.id].option;
     const appearance = node.appearance;
     const params = node.params;
     // 3d 柱状图
@@ -290,6 +425,7 @@ export function setMapDataOptions(option, node) {
         // 日，周，月，年，实时类型，不与分组统计一起使用
         staticTypeData = staticForType ? syncEchartsData && syncEchartsData[`${staticForType}_Data`] : syncEchartsData;
     }
+    let dataDictionary = {};
     // 实时数据加载
     if(staticTypeData) {
 
@@ -298,13 +434,13 @@ 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轴原有配置
 
             if(appearance.type === 'barPileStatic') {
-                
+
                 barPileStaticDataAuto(optionNode, staticTypeData, appearance);
-                
+
             }else {
-                
-                lineBarDataAuto(optionNode, params, staticTypeData);
-                
+
+                lineBarDataAuto(optionNode, params, staticTypeData, appearance);
+
             }
 
         }
@@ -327,6 +463,16 @@ export function setMapDataOptions(option, node) {
             }else if(appearance.type === 'ringPro'){
                 // 按照百分比统计设备配置情况
                 pieRingProportionAuto(optionNode, pieData, appearance.proportion);
+
+            }else if(appearance.type === 'ring3d' || appearance.type === 'pie3d'){
+                for (let i = 0; i < pieData.length; i++){
+                    pieData[i].itemOpacity = 0.9;
+                    pieData[i].itemColor = appearance.chartData[i] && appearance.chartData[i].itemColor || echartsColorData[i];
+                }
+                // 3D饼图图例更新
+                const labelLineData = currentStore.echartsDataPool[node.id].labelLineData;
+                dataDictionary = set3DPieOptions(optionNode, appearance, labelLineData, pieData);
+
             }else {
 
                 pieRingNormalAuto(optionNode, pieData);
@@ -363,16 +509,23 @@ export function setMapDataOptions(option, node) {
                 }
             }
         }
-        if (option.series) {
-            for (let i = 0; i < option.series.length; i++) {
-                const item = option.series[i];
-                if(item.name) optionNode.series[i].name = item.name;
-                optionNode.series[i].data = item.data;
+        if(option.series[0].pieData) {
+            // 3D饼图图例初始化
+            const labelLineData = currentStore.echartsDataPool[node.id].labelLineData;
+            dataDictionary = set3DPieOptions(option, appearance, labelLineData);
+            optionNode = option;
+        }else {
+            if (option.series) {
+                for (let i = 0; i < option.series.length; i++) {
+                    const item = option.series[i];
+                    if(item.name) optionNode.series[i].name = item.name;
+                    optionNode.series[i].data = item.data;
+                }
             }
         }
     }
 
-    mapFormatterSet(appearance, optionNode, staticTypeData);
+    mapFormatterSet(appearance, optionNode, staticTypeData, dataDictionary);
 
     const currentChartNode = commonStore[node.TID].echartsDataPool[node.id];
     const mapChart = currentChartNode.chart;
@@ -394,6 +547,13 @@ export function setMapDataOptions(option, node) {
             return mapChart.setOption(chartNode);
         })
     }
+    // 鼠标hover状态,用于3D饼图
+    if(appearance.mouseHoverState) {
+        mapChart.off('mouseover');
+        mapChart.off('globalout');
+        let type = appearance.type.includes('pie') ? 'pie' : 'ring';
+        set3DPieMouseHover(mapChart, type, option, appearance.seriesStyleData);
+    }
     mapChart.setOption(optionNode);
     mapChart.resize();
 }

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

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

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

@@ -1,12 +1,15 @@
-import {rankingTopImageName, rankingTopColorList} from '../../../static';
+import {rankingTopColorList} from '../../../static';
 
-export function mapFormatterSet(appearance, options, data) {
+export function mapFormatterSet(appearance, options, data, dataDictionary) {
     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 === 'ring3d') setMapRing3DFormatter(appearance, options, dataDictionary);
+    if(appearance.type === 'pie3d') setMapPie3DFormatter(appearance, options);
+    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);
@@ -30,23 +33,47 @@ function setMapLineTwinsFormatter(appearance, options) {
         }
     }
 }
-// 堆叠统计
-function setMapBarPileStaticFormatter(appearance, options) {
+// 折线 || 柱状图
+function setMapLineBarFormatter(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]}`;
+            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}：${appearance.total && appearance.total[item.dataIndex].value || 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) {
+    return appearance.tooltipUnit && appearance.tooltipUnit[index] || appearance.series && appearance.series[index] && appearance.series[index].labelUnit || '';
+}
+function getTooltipDott(color) {
+    return `<span style="display: inline-block;margin-right: 8px;border: 5px solid ${color};border-radius: 100%"></span>`;
+}
+// 堆叠统计
+function setMapBarPileStaticFormatter(appearance, options) {
+    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(!options.series[1].label.formatter){
+    if(appearance.total && appearance.total.length) {
         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;
+            const val = appearance.totalLabel ? appearance.total[param.dataIndex].value ||  options.series[1].data[param.dataIndex] : '';
+            return `${val}${appearance.series[1].labelUnit}`;
         }
     }
 }
@@ -61,18 +88,22 @@ function setMapTopScoreFormatter(options, data, appearance) {
     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}`;
-            }
+        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 rankingTopColorList[params.dataIndex];
+            return colorList[params.dataIndex];
         }
     }
 }
@@ -126,4 +157,50 @@ function setMapRingOptionsFormatter(appearance, seriesNode) {
             }
         }
     }
+}
+// 环形3D图自定义展示配置
+function setMapRing3DFormatter(appearance, options, data) {
+    if(!options.tooltip.formatter) {
+        options.tooltip.formatter = (params) => {
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+                const pieData = options.series[params.seriesIndex].pieData;
+                const pv = (pieData.endRatio - pieData.startRatio) *100;
+                let bfb = Math.round(pv);
+                return `${
+                        params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                        params.color
+                };"></span>${bfb}${appearance.unit}`;
+            }
+        }
+    }
+    options.legend.formatter = (name) => {
+        const legendItem = data.node[name];
+        const pv = (legendItem.value / data.total) * 100;
+        const p = Math.round(pv)+'%';
+        return `{a|${name}}{b${legendItem.order}|${legendItem.value}}{b${legendItem.order}|${p}}`;
+    }
+}
+// 饼图3D图自定义展示配置
+function setMapPie3DFormatter(appearance, options) {
+    if(!options.tooltip.formatter) {
+        options.tooltip.formatter = (params) => {
+            if (params.seriesName !== 'mouseoutSeries') {
+                const pieData = options.series[params.seriesIndex].pieData;
+                if(!pieData) return; // 先退出，后期若有hover引线时，图形联动的需求时再做逻辑处理
+                return `${
+                        params.seriesName
+                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                        params.color
+                };"></span>${pieData.value}${appearance.unit}`;
+            }
+        }
+    }
+    const lastSeriesNode = options.series[options.series.length - 1];
+    if(appearance.labelLine.show && !lastSeriesNode.label.formatter) {
+        lastSeriesNode.label.formatter = (params) => {
+            const dataIndex = params.dataIndex + 1;
+            return `{name${dataIndex}|${params.name}}{value${dataIndex}|${params.value}}{unit${dataIndex}|${appearance.unit}}`;
+        }
+    }
 }

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

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

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

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

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

@@ -1,4 +1,4 @@
-export declare function lineBarDataAuto(option: any, params: {}, 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;