dcim-topology2d 2.1.0 → 2.2.2

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

@@ -1,559 +1,601 @@
-import {echartsDataRoom, echartsColorData, rankingTopImageName} from '../../../static';
-import {
-    setSeriesRenderGroup,
-    drawGraphicShape,
-    setChartLegendData,
-    setChartXAxisData,
-    setChartYAxisData,
-    setLineSeriesStyleData,
-    setRingPreSeriesOptions,
-    setRingProSeriesOptions,
-    set3DPieOptions,
-    mapFormatterSet,
-    set3DPieMouseHover
-} from '../utils';
-import {
-    gaugeNormalAuto,
-    lineBarDataAuto,
-    pieRingAssetTotalAuto,
-    pieRingProportionAuto,
-    pieRingNormalAuto,
-    topRankingListAuto,
-    scatterDataAuto,
-    barPileStaticDataAuto
-} from './render';
-import {commonStore, echartsStaticType} from "../../../core";
-
-export function getXYAxisLabelVal(index, intervalNum, value) {
-    if (index === 0 || index % intervalNum === 0) {
-        return value;
-    } else {
-        return '';
-    }
-}
-
-/**
- * 初始化图表与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 || '';
-        if(node.data.params) node.data.params.staticForType = tabStaticType;
-        return {
-            type: tabStaticType,
-            data: tabNode.tabData
-        };
-    }
-    return null;
-}
-
-// 自动滑动展示数据
-export function setMapAutoMoveOptions(option, chartNode, node, callback) {
-    option.dataZoom = echartsDataRoom;
-    const dataZoomNode = option.dataZoom[0];
-    const {start, end, time} = node.appearance.zoomParams;
-    const zoomStart = Number(start);
-    const zoomEnd = Number(end);
-    const zoomTime = Number(time);
-    dataZoomNode.start = zoomStart;
-    dataZoomNode.end = zoomEnd;
-    chartNode.timeTicket = setInterval(() => {
-        if (Number(dataZoomNode.end) > 100) {
-            dataZoomNode.end = zoomEnd;
-            dataZoomNode.start = zoomStart;
-        } else {
-            dataZoomNode.end = dataZoomNode.end + 1 * (100 / option.series[0].data.length);
-            dataZoomNode.start = dataZoomNode.start + 1 * (100 / option.series[0].data.length);
-        }
-        callback(option);
-    }, zoomTime * 1000);
-}
-
-// 停止自动滑动展示数据
-export function setMapStopAutoMoveOptions(chartNode) {
-
-    clearInterval(chartNode.timeTicket);
-
-}
-
-// 自动配置散点图的节点数据
-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;
-    option.xAxis[0].axisLabel.formatter = function (value, index) {
-        return getXYAxisLabelVal(index, node.appearance.intervalNumX, value);
-    }
-    option.yAxis[0].axisLabel.formatter = function (value, index) {
-        return getXYAxisLabelVal(index, node.appearance.intervalNumY, 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)) {
-                item.itemStyle = {
-                    normal: {
-                        color : echartsColorData[index]
-                    }
-                }
-            }
-        });
-    }
-    // chartOption.yAxis[0].splitLine = node.appearance.splitLine;
-}
-
-// 自动配置仪表盘的节点数据
-export function setMapGaugeOptions(option, node) {
-    //const chartOption = JSON.parse(JSON.stringify(option));
-    const seriesNode = option.series[0];
-    const appearance = node.appearance;
-    if(!appearance.min) appearance.min = 0;
-    if(!appearance.max) appearance.max = 100;
-    if (typeof appearance.min === 'number') seriesNode.min = appearance.min;
-    if (appearance.max) seriesNode.max = appearance.max;
-    if (appearance.splitNumber) seriesNode.splitNumber = appearance.splitNumber;
-    if (appearance.pointer) seriesNode.pointer = appearance.pointer;
-    if (appearance.axisLabel) seriesNode.axisLabel = appearance.axisLabel;
-    if (appearance.axisLine) seriesNode.axisLine.lineStyle = appearance.axisLine.lineStyle;
-    if (appearance.detail) seriesNode.detail = appearance.detail;
-    if (appearance.data) seriesNode.data = appearance.data;
-    if (appearance.detail) seriesNode.detail = appearance.detail;
-    if (appearance.data) seriesNode.data = appearance.data;
-    if (option.isGaugeLinear) {
-        seriesNode.axisLine.lineStyle.color = [
-            [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, option.linearColors)]
-        ]
-    }
-}
-
-// 自动配置环形图和饼图的节点数据
-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 = {
-                showValue: appearance.type === 'ring',
-                unit: appearance.type === 'ring' ? '%' : ''
-            }
-        }
-        seriesNode.label = {
-            normal: {
-                show: true,
-                position: 'outside',
-                color: appearance.label.color || '',
-                fontSize: appearance.label.fontSize || '12'
-            }
-        };
-
-        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;
-    }
-}
-
-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) {
-    // 取消注册自定义形状
-    //const chartOption = JSON.parse(JSON.stringify(option));
-    const seriesNode = option.series[0];
-    const appearance = node.appearance;
-    if (appearance.seriesCubeLeftLinear) appearance.seriesCubeLeftColor = 'rgb(0, 128, 215)';
-    if (appearance.seriesCubeRightLinear) appearance.seriesCubeRightColor = 'rgb(3, 58, 125)';
-    if (appearance.graphicShape) {
-        const {CubeLeft, CubeRight, CubeTop} = drawGraphicShape(appearance);
-        // 注册三个面图形
-        echarts.graphic.registerShape('CubeLeft', CubeLeft);
-        echarts.graphic.registerShape('CubeRight', CubeRight);
-        echarts.graphic.registerShape('CubeTop', CubeTop);
-    }
-    option.tooltip.formatter = function (params) {
-        const item = params[0];
-        return item.name + ' : ' + item.value;
-    }
-}
-
-function renderMap3dBarSeriesItem(seriesNode, appearance) {
-    seriesNode.renderItem = (params, api) => {
-        const seriesRenderData = setSeriesRenderGroup(appearance, api);
-        return {
-            type: 'group',
-            children: seriesRenderData,
-        };
-    };
-}
-
-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;
-    // 图表网格数据
-    if (appearance.grid && !appearance.grid.distance) {
-
-        option.grid ? Object.assign(option.grid, appearance.grid) : option.grid = appearance.grid;
-
-    }
-    // 图表X轴数据
-    if (option.xAxis) setChartXAxisData(option.xAxis, appearance);
-    // 图表Y轴数据
-    if (option.yAxis) setChartYAxisData(option.yAxis, appearance);
-    // 图表图例数据
-    if (appearance.legend) setChartLegendData(option.legend, appearance);
-    // 曲线样式数据
-    if (appearance.type.includes('line')) setLineSeriesStyleData(option.series, appearance);
-}
-
-// 实时改变图表data值
-export function setMapDataOptions(option, node) {
-    const currentStore = commonStore[node.TID];
-    let optionNode = currentStore.echartsOptionsPool[node.id].option;
-    const appearance = node.appearance;
-    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 syncEchartsData = commonStore[node.TID].echartsRealDataPool[node.id]; // 统计图实时数据
-    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;
-    }
-    let dataDictionary = {};
-    // 实时数据加载
-    if(staticTypeData) {
-
-        if (displayMode === 1 || displayMode === 2) { // 折线图，柱状图
-
-            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, appearance);
-
-            }
-
-        }
-        if(displayMode === 4) { // top排行榜-电量仪
-
-            topRankingListAuto(optionNode, staticTypeData, appearance);
-
-        }
-        if(displayMode === 7) { // 散点图
-
-            scatterDataAuto(optionNode, staticTypeData);
-
-        }
-        if (displayMode === 5 || displayMode === 3) { // 饼图/环形图
-            const pieData = staticTypeData && staticTypeData.data || staticTypeData || [];
-            if(appearance.type === 'ringPre') {
-                // 按照资产总台数统计设备告警数量
-                pieRingAssetTotalAuto(optionNode, pieData, appearance.total, appearance.alarmCount);
-
-            }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);
-
-            }
-        }
-        if(displayMode === 6) { // 仪表盘
-
-            gaugeNormalAuto(optionNode, staticTypeData);
-
-        }
-    }else {
-        if(option.title && option.title.text) {
-            optionNode.title.text = option.title.text;
-        }
-        if (option.legend) {
-            optionNode.legend = option.legend;
-        } else {
-            delete optionNode['legend'];
-        }
-        if (option.xAxis) {
-            for (let i = 0; i < option.xAxis.length; i++) {
-                const item = option.xAxis[i];
-                if (item.data) {
-                    optionNode.xAxis[i].data = item.data;
-                }
-            }
-        }
-        if (option.yAxis) {
-            for (let i = 0; i < option.yAxis.length; i++) {
-                const item = option.yAxis[i];
-                if (item.data) {
-                    optionNode.yAxis[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, dataDictionary);
-
-    const currentChartNode = commonStore[node.TID].echartsDataPool[node.id];
-    const mapChart = currentChartNode.chart;
-    clearInterval(currentChartNode.timeTicket);
-    currentChartNode.timeTicket = null;
-    // 自动滑动展示数据
-    if (appearance.timeTicket) {
-        mapChart.off('mouseover');
-        mapChart.off('mouseout');
-        mapChart.on('mouseover', function () {
-            setMapStopAutoMoveOptions(currentChartNode);
-        });
-        mapChart.on('mouseout', function () {
-            setMapAutoMoveOptions(optionNode, currentChartNode, node, function (chartNode) {
-                return mapChart.setOption(chartNode);
-            })
-        });
-        setMapAutoMoveOptions(optionNode, currentChartNode, node, function (chartNode) {
-            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();
-}
+import {echartsDataRoom, echartsColorData, rankingTopImageName} from '../../../static';
+import {
+    setSeriesRenderGroup,
+    drawGraphicShape,
+    setChartLegendData,
+    setChartXAxisData,
+    setChartYAxisData,
+    setLineSeriesStyleData,
+    setRingPreSeriesOptions,
+    setRingProSeriesOptions,
+    set3DPieOptions,
+    mapFormatterSet,
+    set3DPieMouseHover
+} from '../utils';
+import {
+    gaugeNormalAuto,
+    lineBarDataAuto,
+    pieRingAssetTotalAuto,
+    pieRingProportionAuto,
+    pieRingNormalAuto,
+    topRankingListAuto,
+    scatterDataAuto,
+    barPileStaticDataAuto
+} from './render';
+import {commonStore, echartsStaticType} from "../../../core";
+
+export function getXYAxisLabelVal(index, intervalNum, value) {
+    if (index === 0 || index % intervalNum === 0) {
+        return value;
+    } else {
+        return '';
+    }
+}
+
+/**
+ * 初始化图表与其他组件关联的配置数据
+ * @param node 元件节点
+ */
+export function initBindCorrelationSetting(node) {
+    if(!node.data.params || node.data.params.staticForType !== 'OTHER') return null;
+    const tabStaticKey = node.tags && node.tags.find((tag) => {return tag.includes('switchTabType')});
+    if(!tabStaticKey) return null; // 与tabs关联？
+    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
+        };
+    }
+}
+
+// 自动滑动展示数据
+export function setMapAutoMoveOptions(option, chartNode, node, callback) {
+    option.dataZoom = echartsDataRoom;
+    const dataZoomNode = option.dataZoom[0];
+    const {start, end, time} = node.appearance.zoomParams;
+    const zoomStart = Number(start);
+    const zoomEnd = Number(end);
+    const zoomTime = Number(time);
+    dataZoomNode.start = zoomStart;
+    dataZoomNode.end = zoomEnd;
+    chartNode.timeTicket = setInterval(() => {
+        if (Number(dataZoomNode.end) > 100) {
+            dataZoomNode.end = zoomEnd;
+            dataZoomNode.start = zoomStart;
+        } else {
+            dataZoomNode.end = dataZoomNode.end + 1 * (100 / option.series[0].data.length);
+            dataZoomNode.start = dataZoomNode.start + 1 * (100 / option.series[0].data.length);
+        }
+        callback(option);
+    }, zoomTime * 1000);
+}
+
+// 停止自动滑动展示数据
+export function setMapStopAutoMoveOptions(chartNode) {
+
+    clearInterval(chartNode.timeTicket);
+
+}
+
+// 自动配置散点图的节点数据
+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;
+    }
+}
+function setLineBarLinear(item, appearance, index) {
+    if(!appearance.seriesOptions[index]) {
+        appearance.seriesOptions.push({
+            colorStops: [
+                {
+                    offset: 0,
+                    color: echartsColorData[index],
+                },
+                {
+                    offset: 1,
+                    color: 'rgba(255, 255, 255, 1)',
+                },
+            ],
+            label: {
+                show: false,
+                position: 'top',
+                distance: 5,
+                color: '#fff',
+            }
+        })
+    }
+    const seriesSetItem = appearance.seriesOptions[index];
+    item.itemStyle = {
+        color: {
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            type: 'linear',
+            colorStops: seriesSetItem.colorStops,
+        }
+    };
+    item.label = seriesSetItem.label;
+}
+// 自动配置折线和柱状图的节点数据
+export function setMapLineBarOptions(option, node) {
+    option.color = node.appearance.color;
+    option.xAxis[0].axisLabel.formatter = function (value, index) {
+        return getXYAxisLabelVal(index, node.appearance.intervalNumX, value);
+    }
+    option.yAxis[0].axisLabel.formatter = function (value, index) {
+        return getXYAxisLabelVal(index, node.appearance.intervalNumY, value);
+    }
+    if(node.appearance.linear) setLineBarLinear(option.series[0], node.appearance, 0); // 线性渐变
+    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 {
+        for (let i = 0; i < option.series.length; i++) {
+            const item = option.series[i];
+            if(node.appearance.linear){
+                // 线性渐变
+                setLineBarLinear(item, node.appearance, i);
+            }else {
+                // 非线性渐变
+                if(!(item.itemStyle && item.itemStyle.normal && item.itemStyle.normal.color)) {
+                    item.itemStyle = {
+                        normal: {
+                            color : echartsColorData[i]
+                        }
+                    }
+                }
+            }
+        }
+    }
+    // chartOption.yAxis[0].splitLine = node.appearance.splitLine;
+}
+
+// 自动配置仪表盘的节点数据
+export function setMapGaugeOptions(option, node) {
+    //const chartOption = JSON.parse(JSON.stringify(option));
+    const seriesNode = option.series[0];
+    const appearance = node.appearance;
+    if(!appearance.min) appearance.min = 0;
+    if(!appearance.max) appearance.max = 100;
+    if (typeof appearance.min === 'number') seriesNode.min = appearance.min;
+    if (appearance.max) seriesNode.max = appearance.max;
+    if (appearance.splitNumber) seriesNode.splitNumber = appearance.splitNumber;
+    if (appearance.pointer) seriesNode.pointer = appearance.pointer;
+    if (appearance.axisLabel) seriesNode.axisLabel = appearance.axisLabel;
+    if (appearance.axisLine) seriesNode.axisLine.lineStyle = appearance.axisLine.lineStyle;
+    if (appearance.detail) seriesNode.detail = appearance.detail;
+    if (appearance.data) seriesNode.data = appearance.data;
+    if (appearance.detail) seriesNode.detail = appearance.detail;
+    if (appearance.data) seriesNode.data = appearance.data;
+    if (option.isGaugeLinear) {
+        seriesNode.axisLine.lineStyle.color = [
+            [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, option.linearColors)]
+        ]
+    }
+}
+
+// 自动配置环形图和饼图的节点数据
+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 = {
+                showValue: appearance.type === 'ring',
+                unit: appearance.type === 'ring' ? '%' : ''
+            }
+        }
+        seriesNode.label = {
+            normal: {
+                show: true,
+                position: 'outside',
+                color: appearance.label.color || '',
+                fontSize: appearance.label.fontSize || '12'
+            }
+        };
+
+        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;
+    }
+}
+
+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) {
+    // 取消注册自定义形状
+    //const chartOption = JSON.parse(JSON.stringify(option));
+    const seriesNode = option.series[0];
+    const appearance = node.appearance;
+    if (appearance.seriesCubeLeftLinear) appearance.seriesCubeLeftColor = 'rgb(0, 128, 215)';
+    if (appearance.seriesCubeRightLinear) appearance.seriesCubeRightColor = 'rgb(3, 58, 125)';
+    if (appearance.graphicShape) {
+        const {CubeLeft, CubeRight, CubeTop} = drawGraphicShape(appearance);
+        // 注册三个面图形
+        echarts.graphic.registerShape('CubeLeft', CubeLeft);
+        echarts.graphic.registerShape('CubeRight', CubeRight);
+        echarts.graphic.registerShape('CubeTop', CubeTop);
+    }
+    option.tooltip.formatter = function (params) {
+        const item = params[0];
+        return item.name + ' : ' + item.value;
+    }
+}
+
+function renderMap3dBarSeriesItem(seriesNode, appearance) {
+    seriesNode.renderItem = (params, api) => {
+        const seriesRenderData = setSeriesRenderGroup(appearance, api);
+        return {
+            type: 'group',
+            children: seriesRenderData,
+        };
+    };
+}
+
+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;
+    // 图表网格数据
+    if (appearance.grid && !appearance.grid.distance) {
+
+        option.grid ? Object.assign(option.grid, appearance.grid) : option.grid = appearance.grid;
+
+    }
+    // 图表X轴数据
+    if (option.xAxis) setChartXAxisData(option.xAxis, appearance);
+    // 图表Y轴数据
+    if (option.yAxis) setChartYAxisData(option.yAxis, appearance);
+    // 图表图例数据
+    if (appearance.legend) setChartLegendData(option.legend, appearance);
+    // 曲线样式数据
+    if (appearance.type.includes('line')) setLineSeriesStyleData(option.series, appearance);
+}
+
+// 实时改变图表data值
+export function setMapDataOptions(option, node) {
+    const currentStore = commonStore[node.TID];
+    let optionNode = currentStore.echartsOptionsPool[node.id].option;
+    const appearance = node.appearance;
+    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 syncEchartsData = commonStore[node.TID].echartsRealDataPool[node.id]; // 统计图实时数据
+    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;
+    }
+    let dataDictionary = {};
+    // 实时数据加载
+    if(staticTypeData) {
+
+        if (displayMode === 1 || displayMode === 2) { // 折线图，柱状图
+
+            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, appearance);
+
+            }
+
+        }
+        if(displayMode === 4) { // top排行榜-电量仪
+
+            topRankingListAuto(optionNode, staticTypeData, appearance);
+
+        }
+        if(displayMode === 7) { // 散点图
+
+            scatterDataAuto(optionNode, staticTypeData);
+
+        }
+        if (displayMode === 5 || displayMode === 3) { // 饼图/环形图
+            const pieData = staticTypeData && staticTypeData.data || staticTypeData || [];
+            if(appearance.type === 'ringPre') {
+                // 按照资产总台数统计设备告警数量
+                pieRingAssetTotalAuto(optionNode, pieData, appearance.total, appearance.alarmCount);
+
+            }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);
+
+            }
+        }
+        if(displayMode === 6) { // 仪表盘
+
+            gaugeNormalAuto(optionNode, staticTypeData);
+
+        }
+    }else {
+        if(option.title && option.title.text) {
+            optionNode.title.text = option.title.text;
+        }
+        if (option.legend) {
+            optionNode.legend = option.legend;
+        } else {
+            delete optionNode['legend'];
+        }
+        if (option.xAxis) {
+            for (let i = 0; i < option.xAxis.length; i++) {
+                const item = option.xAxis[i];
+                if (item.data) {
+                    optionNode.xAxis[i].data = item.data;
+                }
+            }
+        }
+        if (option.yAxis) {
+            for (let i = 0; i < option.yAxis.length; i++) {
+                const item = option.yAxis[i];
+                if (item.data) {
+                    optionNode.yAxis[i].data = item.data;
+                }
+            }
+        }
+        if(option.series[0] && 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, dataDictionary);
+
+    const currentChartNode = commonStore[node.TID].echartsDataPool[node.id];
+    const mapChart = currentChartNode.chart;
+    clearInterval(currentChartNode.timeTicket);
+    currentChartNode.timeTicket = null;
+    // 自动滑动展示数据
+    if (appearance.timeTicket) {
+        mapChart.off('mouseover');
+        mapChart.off('mouseout');
+        mapChart.on('mouseover', function () {
+            setMapStopAutoMoveOptions(currentChartNode);
+        });
+        mapChart.on('mouseout', function () {
+            setMapAutoMoveOptions(optionNode, currentChartNode, node, function (chartNode) {
+                return mapChart.setOption(chartNode);
+            })
+        });
+        setMapAutoMoveOptions(optionNode, currentChartNode, node, function (chartNode) {
+            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();
+}