dcim-topology2d 1.1.3 → 1.1.4

package/chart-diagram/index.d.ts

@@ -1,3 +1,5 @@
+// @ts-ignore
+export * from './src/utils';
 export * from './src/echarts';
 export * from './src/register';
 export * from '../myShape-diagram/myShape';

package/chart-diagram/index.js

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

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

@@ -1,4 +1,3 @@
 // @ts-ignore
 import { Node } from '../../../core';
-export declare const echartsData: any;
 export declare function echarts(ctx: CanvasRenderingContext2D, node: Node): void;

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

@@ -1,107 +1,106 @@
-import { s8, createDiv, rectangle } from '../../../core';
-export let echartsData = {};
-export function echarts(ctx, node) {
-    //console.log('echarts绘制-----node', node);
-    // 绘制一个底图，类似于占位符。
-    rectangle(ctx, node);
-    // tslint:disable-next-line:no-shadowed-variable
-    var echarts = echartsData.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) {
-        // if(echartsData[node.id]) {
-        //     const appearCharts = echarts.getInstanceByDom(echartsData[node.id].div);
-        //     if (appearCharts) echarts.dispose(appearCharts);
-        //     echartsData[node.id] = null;
-        // }
-        echartsData[node.id] = {
-            div: createDiv(node)
-        };
-        node.elementLoaded = true;
-        document.body.appendChild(echartsData[node.id].div);
-        // 添加当前节点到div层
-        node.addToDiv('init');
-        echartsData[node.id].chart = echarts.init(echartsData[node.id].div, node.data.echarts.theme);
-        node.elementRendered = false;
-        // 等待父div先渲染完成，避免初始图表控件太大
-        setTimeout(function () {
-            echartsData[node.id].chart.resize();
-        });
-    }
-    if (!node.elementRendered) {
-        // 初始化时，等待父div先渲染完成，避免初始图表控件太大。
-        setTimeout(function () {
-            let option = {...node.data.echarts.option};
-            if(node.appearance.type === 'line' || node.appearance.type === 'bar') {
-                option.color = node.appearance.color;
-                option.xAxis[0].axisLabel.formatter = function(value, index){
-                    if (index === 0 || index%(node.appearance.intervalNumX) === 0){
-                        return value;
-                    }
-                    else {
-                        return '';
-                    }
-                }
-
-                option.yAxis[0].axisLabel.formatter = function(value, index){
-                    if (index === 0 || index%(node.appearance.intervalNumY) === 0){
-                        return value;
-                    }
-                    else {
-                        return '';
-                    }
-                }
-                if(option.series.length < 2) {
-                    option.tooltip.formatter = function(params) {
-                        const item = params[0];
-                        return item.name + ' : ' + item.value;
-                    }
-                }
-                // if(option.series.length >= 2) {
-
-                //     for(let i=0; i<option.series.length-1 ; i++){
-
-                //         option.color.push(node.appearance.color[0])
-                //     }
-                // }
-                option.yAxis[0].splitLine = node.appearance.splitLine;
-
-            }else if(node.appearance.type === 'gauge') {
-                option.series[0].min = node.appearance.min;
-                option.series[0].max = node.appearance.max;
-                option.series[0].splitNumber = node.appearance.splitNumber;
-                option.series[0].pointer = node.appearance.pointer;
-                option.series[0].axisLabel = node.appearance.axisLabel;
-                option.series[0].axisLine.lineStyle = node.appearance.axisLine.lineStyle;
-                if(node.appearance.detail) option.series[0].detail = node.appearance.detail;
-                if(node.appearance.data) option.series[0].data = node.appearance.data;
-                if(option.isGaugeLinear) {
-                    option.series[0].axisLine.lineStyle.color = [
-                        [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, option.linearColors)]
-                    ]
-                }
-            }else if(node.appearance.type === 'ring') {
-                option.series[0].radius = [`${node.appearance.innerRadius}%`, `${node.appearance.outerRadius}%`];
-                option.series[0].label = node.appearance.label;
-            }
-            option.title = node.appearance.title;
-            option.backgroundColor = node.appearance.backgroundColor;
-            if(window.location.pathname.includes('workspace')) echartsData[node.id].chart.clear();
-            echartsData[node.id].chart.setOption(option);
-            echartsData[node.id].chart.resize();
-            node.elementRendered = true;
-        });
-    }
-}
-//# sourceMappingURL=index.js.map
+import { s8, createDiv, rectangle, commonStore } from '../../../core';
+import {
+  setMapLineBarOptions,
+  setMapGaugeOptions,
+  setMapRingOptions,
+  setMapAutoMoveOptions,
+  setMapStopAutoMoveOptions,
+  setMap3dBarOptions,
+  setMapTopOptions,
+  setMapGlobalOptions,
+  setMapDataOptions
+} from '../utils';
+import { echartsDataStore, echartsOptionsStore } 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)
+    }
+    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);
+          })
+        });
+        setMapAutoMoveOptions(option, currentChartNode, node, function(chartNode){
+          return mapChart.setOption(chartNode);
+        })
+      }
+      mapChart.setOption(option);
+      mapChart.resize();
+      node.elementRendered = true;
+    })
+  }
+}
+
+//# sourceMappingURL=index.js.map

package/chart-diagram/src/register.js

@@ -1,9 +1,10 @@
 import { registerNode, loadJS } from '../../core';
-import { echarts, echartsData } from './echarts';
+import { echarts } from './echarts';
+import { echartsDataStore } from '../../static';
 import './echarts/echarts.min.js';
 export function register(_echarts) {
-    echartsData.echarts = _echarts;
-    if (process.browser && !echartsData.echarts && !window.echarts) {
+  echartsDataStore.echarts = _echarts;
+    if (process.browser && !echartsDataStore.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

@@ -0,0 +1,4 @@
+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): [];

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

@@ -0,0 +1,163 @@
+// 初始化图例数据和图例配置数据
+import {
+  echartsLegendDefaultData,
+  echartsXAxisDefaultStyleData,
+  echartsYAxisDefaultStyleData,
+  echartsLineSeriesStyleData
+} 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']));
+    }
+    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;
+}
+// 图表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'])); 
+    }
+    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;
+      }
+    }
+  }
+  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 (!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;
+}
+// 图表曲线数据配置
+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'];
+    }
+  }
+  return series;
+}

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

@@ -0,0 +1,17 @@
+interface echartsOptions {
+  color: '',
+  xAxis: [],
+  yAxis: [],
+  series: [],
+  tooltip: null
+}
+export declare function getXYAxisLabelVal(index: number, intervalNum: number, value: any): string;
+export declare function setMapLineBarOptions(option: echartsOptions, node: any): echartsOptions;
+export declare function setMapGaugeOptions(option: echartsOptions, node: any): echartsOptions;
+export declare function setMapRingOptions(option: echartsOptions, node: any): echartsOptions;
+export declare function setMap3dBarOptions(option: echartsOptions, node: any): echartsOptions;
+export declare function setMapTopOptions(option: echartsOptions, node: any): echartsOptions;
+export declare function setMapGlobalOptions(option: echartsOptions, node: any): echartsOptions;
+export declare function setMapDataOptions(option: echartsOptions, node: any): echartsOptions;
+export declare function setMapAutoMoveOptions(option: echartsOptions, chartNode: string,node: any, callback: any): void;
+export declare function setMapStopAutoMoveOptions(chartNode: string): void;

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

@@ -0,0 +1,179 @@
+import { echartsDataRoom, echartsOptionsStore } from '../../../static';
+import {
+  setSeriesRenderGroup,
+  drawGraphicShape,
+  setChartLegendData,
+  setChartXAxisData,
+  setChartYAxisData,
+  setLineSeriesStyleData
+} from '../utils';
+
+export function getXYAxisLabelVal(index, intervalNum, value) {
+  if (index === 0 || index % intervalNum === 0) {
+    return value;
+  } else {
+    return '';
+  }
+}
+// 自动滑动展示数据
+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 setMapLineBarOptions(option, node) {
+  const chartOption = JSON.parse(JSON.stringify(option));
+  chartOption.color = node.appearance.color;
+  chartOption.xAxis[0].axisLabel.formatter = function(value, index) {
+    return getXYAxisLabelVal(index, node.appearance.intervalNumX, value);
+  }
+  chartOption.yAxis[0].axisLabel.formatter = function(value, index) {
+    return getXYAxisLabelVal(index, node.appearance.intervalNumY, value);
+  }
+  if (chartOption.series.length < 2) {
+    chartOption.tooltip.formatter = function(params) {
+      const item = params[0];
+      return item.name + ' : ' + item.value;
+    }
+  }
+  // chartOption.yAxis[0].splitLine = node.appearance.splitLine;
+  return chartOption;
+}
+// 自动配置仪表盘的节点数据
+export function setMapGaugeOptions(option, node) {
+  const chartOption = JSON.parse(JSON.stringify(option));
+  const seriesNode = chartOption.series[0];
+  const appearance = node.appearance;
+  seriesNode.min = appearance.min;
+  seriesNode.max = appearance.max;
+  seriesNode.splitNumber = appearance.splitNumber;
+  seriesNode.pointer = appearance.pointer;
+  seriesNode.axisLabel = appearance.axisLabel;
+  seriesNode.axisLine.lineStyle = appearance.axisLine.lineStyle;
+  if(appearance.detail) seriesNode.detail = appearance.detail;
+  if(appearance.data) seriesNode.data = appearance.data;
+  if(chartOption.isGaugeLinear) {
+    seriesNode.axisLine.lineStyle.color = [
+      [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, chartOption.linearColors)]
+    ]
+  }
+  return chartOption;
+}
+// 自动配置环形图和饼图的节点数据
+export function setMapRingOptions(option, node) {
+  const chartOption = JSON.parse(JSON.stringify(option));
+  const seriesNode = chartOption.series[0];
+  const appearance = node.appearance;
+  seriesNode.radius = [`${appearance.innerRadius}%`, `${appearance.outerRadius}%`];
+  seriesNode.label = appearance.label;
+  return chartOption;
+}
+// 自动配置3D柱状图的节点数据
+export function setMap3dBarOptions(option, node) {
+  // 取消注册自定义形状
+  const chartOption = JSON.parse(JSON.stringify(option));
+  const seriesNode = chartOption.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);
+    seriesNode.renderItem = (params, api) => {
+      const seriesRenderData = setSeriesRenderGroup(appearance, api);
+      return {
+        type: 'group',
+        children: seriesRenderData,
+      };
+    };
+  }
+  chartOption.tooltip.formatter = function(params) {
+    const item = params[0];
+    return item.name + ' : ' + item.value;
+  }
+  return chartOption;
+}
+export function setMapTopOptions(option, node) {
+  const chartOption = JSON.parse(JSON.stringify(option));
+  const appearance = node.appearance;
+  Object.assign(chartOption.grid, appearance.grid);
+  return chartOption;
+}
+// 公共配置
+export function setMapGlobalOptions(option, node) {
+  const chartOption = JSON.parse(JSON.stringify(option));
+  const appearance = node.appearance;
+  // 图表网格数据
+  if (appearance.grid) {
+
+    chartOption.grid ? Object.assign(chartOption.grid, appearance.grid) : chartOption.grid = appearance.grid;
+
+  }
+  // 图表X轴数据
+  if(chartOption.xAxis) setChartXAxisData(chartOption.xAxis, appearance);
+  // 图表Y轴数据
+  if(chartOption.yAxis) setChartYAxisData(chartOption.yAxis, appearance);
+   // 图表图例数据
+  if (chartOption.legend) setChartLegendData(chartOption.legend, appearance);
+  // 曲线样式数据
+  if (appearance.type.includes('line')) setLineSeriesStyleData(chartOption.series, appearance);
+
+  return chartOption;
+}
+// 实时改变图表data值
+export function setMapDataOptions(option, node) {
+    const optionNode = echartsOptionsStore[node.id];
+    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) {
+        for (let i = 0; i < option.series.length; i++) {
+            const item = option.series[i];
+            optionNode.series[i].data = item.data;
+        }
+    }
+    return optionNode;
+}

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

@@ -0,0 +1,3 @@
+export declare function drawGraphicShape(appearance: any): any;
+export declare function graphicLinearGradient(nr: number, nb: number, nl: number, nt: number, colors: []): any;
+export declare function setSeriesRenderGroup(appearance: any, api: any): [];