dcim-topology2d 1.1.6 → 2.0.5

package/chart-diagram/index.d.ts

@@ -2,4 +2,4 @@
 export * from './src/utils';
 export * from './src/echarts';
 export * from './src/register';
-export * from '../myShape-diagram/myShape';
+export * from '../myShape-diagram/index.js';

package/chart-diagram/index.js

@@ -1,5 +1,5 @@
 export * from './src/utils';
 export * from './src/echarts';
 export * from './src/register';
-export * from '../myShape-diagram/myShape.js';
+export * from '../myShape-diagram/index.js';
 //# sourceMappingURL=index.js.map

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

@@ -1,106 +1,98 @@
-import { s8, createDiv, rectangle, commonStore } from '../../../core';
+import {s8, createDiv, rectangle, commonStore} from '../../../core';
+import {plugsPool} from '../../../store';
 import {
-  setMapLineBarOptions,
-  setMapGaugeOptions,
-  setMapRingOptions,
-  setMapAutoMoveOptions,
-  setMapStopAutoMoveOptions,
-  setMap3dBarOptions,
-  setMapTopOptions,
-  setMapGlobalOptions,
-  setMapDataOptions
+    setMapLineBarOptions,
+    setMapGaugeOptions,
+    setMapRingOptions,
+    setMap3dBarOptions,
+    setMapTopOptions,
+    setMapGlobalOptions,
+    setMapDataOptions
 } from '../utils';
-import { echartsDataStore, echartsOptionsStore } from '../../../static';
+import {echartsTypeMap} from '../../../static';
 
 export function echarts(ctx, node) {
-  if(!(commonStore[node.TID] && commonStore[node.TID].data.dataResize)) return;
-  //console.log('echarts绘制-----node', node);
-  // 绘制一个底图，类似于占位符。
-  rectangle(ctx, node)
-  // tslint:disable-next-line:no-shadowed-variable
-  var echarts = echartsDataStore.echarts || window.echarts
-  if (!node.data || !echarts) {
-    return
-  }
-  if (typeof node.data === 'string') {
-    node.data = JSON.parse(node.data)
-  }
-  if (!node.data.echarts) {
-    return
-  }
-  if (!node.elementId) {
-    node.elementId = s8()
-  }
-  const currentElement = document.getElementById(node.id)
-  if (!node.elementLoaded && !currentElement) {
-    echartsDataStore[node.id] = {
-      div: createDiv(node)
+    if (!(commonStore[node.TID] && commonStore[node.TID].data.dataResize)) return;
+    //console.log('echarts绘制-----node', node);
+    // if(currentElement) currentElement.style.display = !node.visible ? 'none': 'block';
+    // if(!node.visible) return;
+    // 绘制一个底图，类似于占位符。
+    rectangle(ctx, node)
+    // tslint:disable-next-line:no-shadowed-variable
+    var echarts = plugsPool.echarts || window.echarts
+    if (!node.data || !echarts) {
+        return
     }
-    node.elementLoaded = true
-    document.body.appendChild(echartsDataStore[node.id].div)
-    // 添加当前节点到div层
-    node.addToDiv('init')
-    echartsDataStore[node.id].chart = echarts.init(echartsDataStore[node.id].div, node.data.echarts.theme)
-    node.elementRendered = false
-    // 等待父div先渲染完成，避免初始图表控件太大
-    setTimeout(function() {
-      echartsDataStore[node.id].chart.resize()
-    })
-  }
-  if (!node.elementRendered) {
-    const appearance = node.appearance;
-    // 初始化时，等待父div先渲染完成，避免初始图表控件太大。
-    setTimeout(function() {
-      let option = node.data.echarts.option;
-      const currentChartNode = echartsDataStore[node.id];
-      const mapChart = currentChartNode.chart;
-      const isLocked = commonStore[node.TID] && commonStore[node.TID].data.locked;
-      if(!isLocked || !echartsOptionsStore[node.id]) {
-          // 【未锁定（编辑）状态, options未初始化的状态】
-          // 公共配置 Top排行榜跳过公共属性配置
-          if(option.displayMode !== 4) option = setMapGlobalOptions(option, node);
-          // 折线图和柱状图
-          if (appearance.type === 'line' || appearance.type === 'bar') option = setMapLineBarOptions(option, node);
-          // 仪表盘
-          if (appearance.type === 'gauge') option = setMapGaugeOptions(option, node);
-          // 环形图
-          if (appearance.type === 'ring') option = setMapRingOptions(option, node);
-          // 3d 柱状图
-          if (appearance.type === '3dBar') option = setMap3dBarOptions(option, node);
-          // Top排行榜
-          if (appearance.type === 'TOP') option = setMapTopOptions(option, node);
-          //option.title = appearance.title;
-          option.backgroundColor = appearance.backgroundColor;
-          echartsOptionsStore[node.id] = option;
-          if(!isLocked) mapChart.clear();
-      }else {
-          // 【锁定状态且option值已初始化完成】
-          option = setMapDataOptions(option, node);
-      }
-      // if (window.location.pathname.includes('workspace')) mapChart.clear();
-      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(option, currentChartNode, node, function(chartNode){
-            return mapChart.setOption(chartNode);
-          })
+    if (typeof node.data === 'string') {
+        node.data = JSON.parse(node.data)
+    }
+    if (!node.data.echarts) {
+        return
+    }
+    if (!node.elementId) {
+        node.elementId = s8()
+    }
+    let echartsData = commonStore[node.TID].echartsDataPool[node.id];
+    if (!node.elementLoaded && !(echartsData && echartsData.div)) {
+        if(!echartsData) {
+            echartsData = {
+                div: createDiv(node)
+            };
+        }else {
+            echartsData.div = createDiv(node);
+        }
+        node.elementLoaded = true
+        document.body.appendChild(echartsData.div)
+        // 添加当前节点到div层
+        node.addToDiv()
+        echartsData.chart = echarts.init(echartsData.div, node.data.echarts.theme)
+        node.elementRendered = false
+        // 等待父div先渲染完成，避免初始图表控件太大
+        setTimeout(function () {
+            echartsData.chart.resize()
         });
-        setMapAutoMoveOptions(option, currentChartNode, node, function(chartNode){
-          return mapChart.setOption(chartNode);
+        commonStore[node.TID].echartsDataPool[node.id] = echartsData;
+    }
+    if (!node.elementRendered) {
+        const appearance = node.appearance;
+        // 初始化时，等待父div先渲染完成，避免初始图表控件太大。
+        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]) {
+                // 【未锁定（编辑）状态, options未初始化的状态】
+                if (!appearance.type) appearance.type = echartsTypeMap[`type_${option.displayMode}`]; // 兼容旧数据配置
+                // 公共配置 Top排行榜跳过公共属性配置
+                if (option.displayMode !== 4) setMapGlobalOptions(option, node);
+                // 折线图和柱状图
+                if (['line', 'bar'].includes(appearance.type)) setMapLineBarOptions(option, node);
+                // 仪表盘
+                if (appearance.type === 'gauge') setMapGaugeOptions(option, node);
+                // 环形图 || 饼图
+                if (appearance.type.includes('ring') || appearance.type.includes('pie')) setMapRingOptions(option, node);
+                // 3d 柱状图
+                if (appearance.type === '3dBar') setMap3dBarOptions(option, node);
+                // Top排行榜
+                if (appearance.type === 'TOP') setMapTopOptions(option, node);
+                //option.title = appearance.title;
+                option.backgroundColor = appearance.backgroundColor;
+                commonStore[node.TID].echartsOptionsPool[node.id] = {
+                    option: JSON.parse(JSON.stringify(option)),
+                    data: {
+                        appearance,
+                        id: node.id,
+                        params: node.data.params
+                    }
+                };
+                if (!isLocked) echartsData.chart.clear();
+            }
+            // echarts 数据渲染更新
+            setMapDataOptions(option, node);
+
+            node.elementRendered = true;
         })
-      }
-      mapChart.setOption(option);
-      mapChart.resize();
-      node.elementRendered = true;
-    })
-  }
+    }
 }
 
 //# sourceMappingURL=index.js.map

package/chart-diagram/src/register.js

@@ -1,10 +1,10 @@
 import { registerNode } from '../../core';
 import { echarts } from './echarts';
-import { echartsDataStore } from '../../static';
+import { plugsPool } from '../../store';
 // import './echarts/echarts.min.js';
 export function register(_echarts) {
-  echartsDataStore.echarts = _echarts;
-    // if (process.browser && !echartsDataStore.echarts && !window.echarts) {
+    plugsPool.echarts = _echarts;
+    // if (process.browser && !echartsDataPool.echarts && !window.echarts) {
     //     //loadJS('https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js', null, true);
     //     loadJS(`${location.origin}/libary/echarts.min.js`, null, true);
     // }

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

@@ -1,4 +1,7 @@
-export declare function setChartLegendData<T>(legend: T, appearance: T): T;
-export declare function setChartXAxisData<T>(xAxis: [], appearance: T): [];
-export declare function setChartYAxisData<T>(yAxis: [], appearance: T): []; 
-export declare function setLineSeriesStyleData<T>(series: [], appearance: T): [];
+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 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;
+export declare function setLineSeriesStyleData<T>(series: [], appearance: T): void;

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

@@ -1,163 +1,247 @@
 // 初始化图例数据和图例配置数据
 import {
-  echartsLegendDefaultData,
-  echartsXAxisDefaultStyleData,
-  echartsYAxisDefaultStyleData,
-  echartsLineSeriesStyleData
+    echartsLegendDefaultData,
+    echartsXAxisDefaultStyleData,
+    echartsYAxisDefaultStyleData,
+    echartsLineSeriesStyleData,
+    echartsColorData
 } from '../../../static';
-// 图表X轴数据
-export function setChartXAxisData(xAxis, appearance){
-  for (let i = 0; i < xAxis.length; i++) {
-    const item = xAxis[i];
-    if(!item.axisLabel) {
-      item.axisLabel = JSON.parse(JSON.stringify(echartsXAxisDefaultStyleData['x1AxisLabel']));
+
+// 配置环形图中间区域文字样式
+export function setRingChartText(textData) {
+    const {
+        vFontSize, vFontWeight, vColor,
+        vTop, unitTop, unitFontSize, unitFontWeight,
+        unitColor} = textData;
+    if(!unitTop) textData.unitTop = 0;  
+    return {
+        v: {
+            fontSize: vFontSize,
+            fontWeight: vFontWeight,
+            color: vColor,
+            padding: [vTop, 0, 0, 0]
+        },
+        unit: {
+            fontSize: unitFontSize,
+            fontWeight: unitFontWeight,
+            color: unitColor,
+            padding: [unitTop, 0, 0, 0]
+        }
+    };
+}
+// 配置环形‘设备告警统计图’节点展示
+export function setRingPreSeriesOptions(option, appearance) {
+    const rich = setRingChartText(appearance.text);
+    Object.assign(option.title.textStyle.rich, rich);
+    option.title.y = `${appearance.text.y}%`;
+    option.series[0].radius[1] = `${appearance.inner.borderWidth}%`;
+    option.series[0].data[0].itemStyle.color = appearance.inner.borderColor;
+    option.series[0].data[1].itemStyle.color = appearance.inner.borderBgColor;
+    option.series[1].radius[1] = `${appearance.outer.borderWidth}%`;
+    option.series[1].data[0].itemStyle.color = appearance.outer.borderColor;
+}
+// 配置环形‘内存、硬盘、CPU指标占比统计’节点展示
+export function setRingProSeriesOptions(option, appearance) {
+    const seriesFirstChildNode = option.series[0];
+    const rich = setRingChartText(appearance.text);
+    Object.assign(seriesFirstChildNode.data[0].label.normal.rich, rich);
+    seriesFirstChildNode.data[0].label.normal.formatter = function(params){
+        return `{v|${params.value}}{unit|%}`;
     }
-    const axisLabelStr = `x${i+1}AxisLabel`;
-    if(!appearance[axisLabelStr]) {
-      appearance[axisLabelStr] = JSON.parse(JSON.stringify(echartsXAxisDefaultStyleData[axisLabelStr]));
-      Object.assign(appearance[axisLabelStr], item.axisLabel);
-    }else {
-      item.axisLabel.color = appearance[axisLabelStr].color || '';
-      item.axisLabel.fontSize = appearance[axisLabelStr].fontSize || 12;
+    seriesFirstChildNode.data[0].value = appearance.proportion;
+    seriesFirstChildNode.radius = appearance.outer.radius;
+    seriesFirstChildNode.data[0].itemStyle = {
+        normal: {
+            color: appearance.outer.borderColor,
+            shadowColor: appearance.outer.borderColor,
+            shadowBlur: 0
+        }
+    };
+    seriesFirstChildNode.data[1].value = 100 - appearance.proportion;
+    seriesFirstChildNode.data[1].itemStyle.normal.color = appearance.outer.borderBgColor;
+    const seriesLastChildNode = option.series[1];
+    seriesLastChildNode.radius = appearance.inner.radius;
+    seriesLastChildNode.itemStyle.normal.color.colorStops[0].color = appearance.inner.borderColor;
+}
+// 图表X轴数据
+export function setChartXAxisData(xAxis, appearance) {
+    for (let i = 0; i < xAxis.length; i++) {
+        const item = xAxis[i];
+        if (!item.axisLabel) {
+            item.axisLabel = JSON.parse(JSON.stringify(echartsXAxisDefaultStyleData['x1AxisLabel']));
+        }
+        const axisLabelStr = `x${i + 1}AxisLabel`;
+        if (!appearance[axisLabelStr]) {
+            appearance[axisLabelStr] = JSON.parse(JSON.stringify(echartsXAxisDefaultStyleData[axisLabelStr]));
+            Object.assign(appearance[axisLabelStr], item.axisLabel);
+        } else {
+            item.axisLabel.color = appearance[axisLabelStr].color || '';
+            item.axisLabel.fontSize = appearance[axisLabelStr].fontSize || 12;
+        }
     }
-  }
-  return xAxis;
+    //return xAxis;
 }
+
 // 图表Y轴数据
-export function setChartYAxisData(yAxis, appearance){
-  if(typeof appearance.ySplitLineShow !== 'boolean') {
-    appearance.ySplitLineShow = yAxis[0].splitLine.show;
-  }
-  if(!appearance.ysplitLineLineStyle && yAxis[0].splitLine.show) {
-    appearance.ysplitLineLineStyle = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData['ysplitLineLineStyle'])); 
-  }
-  for (let i = 0; i < yAxis.length; i++) {
-    const item = yAxis[i];
-    if(!item.axisLabel.textStyle) {
-      item.axisLabel.textStyle = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData['y1axisLabelTextStyle'])); 
+export function setChartYAxisData(yAxis, appearance) {
+    if (typeof appearance.ySplitLineShow !== 'boolean') {
+        appearance.ySplitLineShow = yAxis[0].splitLine.show;
     }
-    if(!item.splitLine.lineStyle) {
-      item.splitLine.lineStyle = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData['ysplitLineLineStyle']));
+    if (!appearance.ysplitLineLineStyle && yAxis[0].splitLine.show) {
+        appearance.ysplitLineLineStyle = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData['ysplitLineLineStyle']));
     }
-    const axisLabelTextStyleStr = `y${i+1}axisLabelTextStyle`;
-    if(!appearance[axisLabelTextStyleStr]) {
-      appearance[axisLabelTextStyleStr] = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData[axisLabelTextStyleStr]));
-      Object.assign(appearance[axisLabelTextStyleStr], item.axisLabel.textStyle);
-    }else {
-      const axisLabelTextStyNode = appearance[axisLabelTextStyleStr];
-      item.axisLabel.textStyle.color = axisLabelTextStyNode.color || '';
-      item.axisLabel.textStyle.fontSize = axisLabelTextStyNode.fontSize || '12';
-      item.axisLabel.textStyle.padding = axisLabelTextStyNode.padding || [20, 20, 20, 20];
+    for (let i = 0; i < yAxis.length; i++) {
+        const item = yAxis[i];
+        if (!item.axisLabel.textStyle) {
+            item.axisLabel.textStyle = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData['y1axisLabelTextStyle']));
+        }
+        if (!item.splitLine.lineStyle) {
+            item.splitLine.lineStyle = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData['ysplitLineLineStyle']));
+        }
+        const axisLabelTextStyleStr = `y${i + 1}axisLabelTextStyle`;
+        if (!appearance[axisLabelTextStyleStr]) {
+            appearance[axisLabelTextStyleStr] = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData[axisLabelTextStyleStr]));
+            Object.assign(appearance[axisLabelTextStyleStr], item.axisLabel.textStyle);
+        } else {
+            const axisLabelTextStyNode = appearance[axisLabelTextStyleStr];
+            item.axisLabel.textStyle.color = axisLabelTextStyNode.color || '';
+            item.axisLabel.textStyle.fontSize = axisLabelTextStyNode.fontSize || '12';
+            item.axisLabel.textStyle.padding = axisLabelTextStyNode.padding || [20, 20, 20, 20];
+        }
+        if (appearance.ysplitLineLineStyle) {
+            item.splitLine.show = appearance.ySplitLineShow;
+            const axisLabelTextStyNode = appearance.ysplitLineLineStyle;
+            item.splitLine.lineStyle.type = axisLabelTextStyNode.type || 'solid';
+            item.splitLine.lineStyle.color = axisLabelTextStyNode.color || '';
+        }
+        const minMaxStr = `y${i + 1}MinMaxData`;
+        if (!appearance[minMaxStr] && item.max) {
+            appearance[minMaxStr] = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData[minMaxStr]));
+            const minMaxParams = {
+                max: item.max,
+                min: item.min,
+                interval: item.interval
+            };
+            Object.assign(appearance[minMaxStr], minMaxParams);
+        } else {
+            const minMaxNode = appearance[minMaxStr];
+            if (minMaxNode) {
+                item.max = minMaxNode.max;
+                item.min = minMaxNode.min;
+                item.interval = minMaxNode.interval;
+            }
+        }
+        const nameStr = `y${i + 1}NameData`;
+        if (!appearance[nameStr] && item.name) {
+            appearance[nameStr] = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData[nameStr]));
+            const nameParams = {
+                name: item.name,
+                nameTextStyle: {
+                    color: item.nameTextStyle.color,
+                    padding: item.nameTextStyle.padding,
+                },
+                nameGap: item.nameGap
+            };
+            Object.assign(appearance[nameStr], nameParams);
+        } else {
+            const nameNode = appearance[nameStr];
+            if (nameNode) {
+                item.name = nameNode.name;
+                item.nameTextStyle.color = nameNode.nameTextStyle.color;
+                item.nameTextStyle.padding = nameNode.nameTextStyle.padding;
+                item.nameGap = nameNode.nameGap;
+            }
+        }
     }
-    if(appearance.ysplitLineLineStyle) {
-      item.splitLine.show = appearance.ySplitLineShow;
-      const axisLabelTextStyNode = appearance.ysplitLineLineStyle;
-      item.splitLine.lineStyle.type = axisLabelTextStyNode.type || 'solid';
-      item.splitLine.lineStyle.color = axisLabelTextStyNode.color || '';
-    }
-    const minMaxStr = `y${i+1}MinMaxData`;
-    if(!appearance[minMaxStr] && item.max){
-      appearance[minMaxStr] = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData[minMaxStr]));
-      const minMaxParams = {
-        max: item.max,
-        min: item.min,
-        interval: item.interval
-      };
-      Object.assign(appearance[minMaxStr], minMaxParams);
-    }else {
-      const minMaxNode = appearance[minMaxStr];
-      if(minMaxNode) {
-        item.max = minMaxNode.max;
-        item.min = minMaxNode.min;
-        item.interval = minMaxNode.interval;
-      }
-    }
-    const nameStr = `y${i+1}NameData`;
-    if(!appearance[nameStr] && item.name){
-      appearance[nameStr] = JSON.parse(JSON.stringify(echartsYAxisDefaultStyleData[nameStr]));
-      const nameParams = {
-        name: item.name,
-        nameTextStyle: {
-          color: item.nameTextStyle.color,
-          padding: item.nameTextStyle.padding,
-        },
-        nameGap: item.nameGap
-      };
-      Object.assign(appearance[nameStr], nameParams);
-    }else {
-      const nameNode = appearance[nameStr];
-      if(nameNode) {
-        item.name = nameNode.name;
-        item.nameTextStyle.color = nameNode.nameTextStyle.color;
-        item.nameTextStyle.padding = nameNode.nameTextStyle.padding;
-        item.nameGap = nameNode.nameGap;
-      }
-    }
-  }
-  return yAxis;
+    //return yAxis;
 }
+
 // 图表图例数据
 export function setChartLegendData(legend, appearance) {
-  if(!legend.formatter) legend.formatter = ['{a|{name}}'].join('\n');
-  // 设置默认图例文字配置，如果想改变初始化文字属性，在 appearance中配置即可
-  if(!legend.textStyle) legend.textStyle = {
-    color: '#fff',
-    height: 8,
-    rich: {
-      a: {
-        fontSize: 12,
-        verticalAlign: 'bottom',
-      }
+    if (!legend.formatter) legend.formatter = ['{a|{name}}'].join('\n');
+    // 设置默认图例文字配置，如果想改变初始化文字属性，在 appearance中配置即可
+    if (!legend.textStyle) legend.textStyle = {
+        color: '#fff',
+        height: 8
+    };
+    legend.textStyle.rich = {
+        a: {
+            fontSize: 12,
+            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;
     }
-  };
-  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;
-  }
-  return legend;
+    //return legend;
 }
+
 // 图表曲线数据配置
 export function setLineSeriesStyleData(series, appearance) {
-  const defaultSeriesStyle = JSON.parse(JSON.stringify(echartsLineSeriesStyleData));
-  if(!appearance.seriesOptions) appearance.seriesOptions = [defaultSeriesStyle];
-  for (let i = 0; i < series.length; i++) {
-    const item = series[i];
-    const appearanceSeries = appearance.seriesOptions[i] || defaultSeriesStyle;
-    item.symbol = appearanceSeries.symbol;
-    item.smooth = appearanceSeries.smooth;
-    item.symbolSize = appearanceSeries.symbolSize || 18;
-    item.itemStyle = {
-      normal: {
-        color: appearanceSeries.itemLineStyle.color,
-        lineStyle: appearanceSeries.itemLineStyle
-      }
-    };
-    if(appearanceSeries.area) {
-      item.areaStyle = {
-        color: appearanceSeries.areaColor && { ...appearanceSeries.areaColor } || { ...defaultSeriesStyle.areaColor }
-      };
-      appearanceSeries.linear ?
-        item.areaStyle.color.colorStops = [...appearanceSeries.areaColorStops] :
-        item.areaStyle = Object.assign({}, item.areaStyle, {color: appearanceSeries.areaBgColor || 'rgba(49, 144, 255, 0.21)'});
-    }else {
-      if(item.areaStyle) delete item['areaStyle'];
+    let seriesOptions = [];
+    for (let i = 0; i < series.length; i++) {
+        const defaultSeriesStyle = JSON.parse(JSON.stringify(echartsLineSeriesStyleData));
+        const item = series[i];
+        let appearanceSeries = appearance.seriesOptions && appearance.seriesOptions[i];
+        if(!appearanceSeries) {
+            appearanceSeries = defaultSeriesStyle;
+            appearanceSeries.name = item.name;
+            appearanceSeries.itemLineStyle.color = i === 0 ? defaultSeriesStyle.itemLineStyle.color : echartsColorData[i];
+            seriesOptions.push(defaultSeriesStyle);
+        }else {
+            seriesOptions.push(appearanceSeries);
+        }
+        item.symbol = appearanceSeries.symbol;
+        item.smooth = appearanceSeries.smooth;
+        item.symbolSize = appearanceSeries.symbolSize || 18;
+        item.itemStyle = {
+            normal: {
+                color: appearanceSeries.itemLineStyle.color,
+                lineStyle: appearanceSeries.itemLineStyle
+            }
+        };
+        if (appearanceSeries.area) {
+            item.areaStyle = {
+                color: appearanceSeries.areaColor && {...appearanceSeries.areaColor} || {...defaultSeriesStyle.areaColor}
+            };
+            appearanceSeries.linear ?
+                    item.areaStyle.color.colorStops = [...appearanceSeries.areaColorStops] :
+                    item.areaStyle = Object.assign({}, item.areaStyle, {color: appearanceSeries.areaBgColor || 'rgba(49, 144, 255, 0.21)'});
+        } else {
+            if (item.areaStyle) delete item['areaStyle'];
+        }
     }
-  }
-  return series;
+
+    appearance.seriesOptions = seriesOptions;
+    //return series;
 }