feat(component): add echarts component !#zh: 支持echarts 图表组件📈

ly525
1 parent 71637956
Showing 7 changed files with 1046 additions and 0 deletions
front-end/h5/package.json
front-end/h5/src/components/plugins/charts/chart-mixin.js
front-end/h5/src/components/plugins/charts/chart-model.js
front-end/h5/src/components/plugins/charts/chart-model.ts
front-end/h5/src/components/plugins/charts/line.js
front-end/h5/src/utils/excel-parser.js
front-end/h5/yarn.lock
@@ -21,6 +21,7 @@
     "animate.css": "^3.7.2",
     "ant-design-vue": "^1.3.14",
     "core-js": "^2.6.5",
+    "echarts": "^4.8.0",
     "element-ui": "^2.13.0",
     "font-awesome": "4.7.0",
     "hotkeys-js": "^3.7.6",
@@ -28,7 +29,9 @@
     "proxy-agent": "^3.1.0",
     "qrcode": "^1.4.1",
     "register-service-worker": "^1.6.2",
+    "resize-detector": "^0.2.2",
     "strapi-sdk-javascript": "^0.3.1",
+    "v-charts": "^1.19.0",
     "v-click-outside": "^2.1.4",
     "vant": "^2.2.12",
     "vue": "^2.6.10",
+import echarts from 'echarts/lib/echarts'
+import debounce from 'lodash/debounce'
+import { addListener, removeListener } from 'resize-detector'
+import { LineChart } from './chart-model'
+
+// TODO 工具函数：获取某个时间段内的时间
+function addDays (date, dayStep = 1) {
+  const next = new Date(date)
+  next.setDate(next.getDate() + dayStep)
+  return next
+}
+
+function dateRange (start, end, range = []) {
+  start = new Date(start)
+  end = new Date(end)
+  if (start > end) return range
+  range = [start]
+  while (start < end) {
+    start = addDays(start, 1)
+    range.push(start)
+  }
+  // const next = addDays(start, 1)
+  // return dateRange(next, end, [...range, start])
+  return range
+}
+
+export default {
+  watch: {
+    dataset: {
+      handler (items) {
+        this.renderChart()
+      }
+    }
+  },
+  methods: {
+    getXAxis () {
+      const [start, end] = this.dashboard.currentFilterState.daterange
+      if (start === end) return Array.from({ length: 24 }, (_, i) => `${i}`.padStart(2, '0'))
+      return dateRange(start, end).map(date => date.toISOString().slice(0, 10))
+    },
+    /**
+     *
+     */
+    getDataSet () {
+      // const [start, end] = daterange
+      // if (start === end) {
+      //   // return this.dataset.map(item => ({...item, s: s.replace(/[\d]{4}-[\d]{2}-[\d]{2}\s+([\d]{2}):[\d]{2}:[\d]{2}/, '$1'))
+      //   return this.dataset.map(item => ({
+      //     ...item,
+      //     x: `${new Date(item.x).getHours()}`.padStart(2, '0')
+      //   }))
+      // }
+      return this.dataset
+    },
+    renderChart () {
+      const option = new LineChart({
+        dataset: this.getDataSet(),
+        yIndexMap: { count: 0, sum_base_cpm: 1 }
+        // xAxis: this.getXAxis()
+      }).getOption()
+      // this.option = Object.freeze(option)
+      this.$nextTick(() => {
+        const ele = this.$refs.chart
+        if (ele) {
+          // const chart = window.echarts.init(ele)
+          const chart = echarts.init(ele)
+          this.chart = chart
+          chart.clear()
+          chart.setOption(option)
+        }
+      })
+    },
+    autoResize () {
+      this.lastArea = this.getArea()
+      this.__resizeHandler = debounce(
+        () => {
+          if (this.lastArea === 0) {
+            // emulate initial render for initially hidden charts
+            this.mergeOptions({}, true)
+            this.resize()
+            this.mergeOptions(this.options || this.manualOptions || {}, true)
+          } else {
+            this.resize()
+          }
+          this.lastArea = this.getArea()
+        },
+        100,
+        { leading: true }
+      )
+      addListener(this.$el, this.__resizeHandler)
+    }
+  },
+  mounted () {
+    this.__resizeHandler = debounce(
+      () => {
+        this.chart.resize()
+      },
+      500,
+      { leading: true }
+    )
+    addListener(this.$el, this.__resizeHandler)
+  },
+  destroy () {
+    removeListener(this.$el, this.__resizeHandler)
+  }
+}
+/**
+ * echarts demo: https://www.echartsjs.com/examples/zh/editor.html?c=line-simple
+ * 通过输入固定格式的 echarts dataset，得到 echarts options
+ *
+ * TODO X轴 formatter：1.只针对 X轴，不针对 tooltip 2. tooltip 和 X轴同时生效
+ * TODO legend(series) 到多Y轴的映射
+ */
+import _ from 'lodash'
+
+export class LineChart {
+  constructor ({ xAxis = [], yIndexMap = {}, dataset }) {
+    this.chartType = 'line'
+    this.colors = {
+      series: [
+        { value: '#57b2ff' },
+        { value: '#d70b24' },
+        { value: '#48c765' },
+        { value: '#fbb64e' },
+        { value: '#f95e58' }
+      ],
+      labelText: {
+        xAxis: 'rgba(0,0,0,.6)',
+        yAxis: 'rgba(0,0,0,.6)'
+      },
+      splitLine: 'rgba(236, 237, 239, 0.26)'
+    }
+    this.yIndexMap = yIndexMap
+    this.dataset = dataset
+    this.keys = { xAxis: 'x', yAxis: 'y', legend: 's' }
+    this.legends = this.getLegends()
+    this.xAxis = (xAxis.length && xAxis) || this.getXAxis()
+    this.yAxis = this.getYAxis(this.legends)
+    this.series = this.getSeries(this.legends, this.xAxis)
+    this.tooltip = this.getTooltip()
+  }
+  /**
+   * 填补缺失值，说白了其实就是 merge
+   * seriesTemplate: [{x: '01-01', y: null}, {x: '02-01', y: null}, {x: '03-01', y: null}]
+   * seriesItemsFromDataSet: [{ x: '01-01', y: 11}, {x: '03-01', y: 33 }]
+   *
+   * => [{x: '01-01', y: 11}, {x: '02-01', y: null}, {x: '03-01', y: 33}]
+   *
+   * seriesTemplate (X轴所有点): ['01-01', '01-02', '01-03]
+   * seriesItemsFromDataSet: 可能缺失的数据作为 填充值
+   * options: { legend: string // 某条折线图名字 }
+   *
+   * seriesTemplate -> 循环填充默认值 -> [Object, Object]
+   * seriesItemsFromDataSet -> 字典{} -> 循环模板（X轴所有点）-> 找到X轴上点在 seriesItemsFromDataSet字典中的值 ->，替换模板中的默认值 -> 返回填充后的模板
+   */
+  padMissingValues (seriesTemplate, seriesItemsFromDataSet, options) {
+    const { xAxis, yAxis, legend } = this.keys
+    const seriesItemsFromDataSetDict = seriesItemsFromDataSet.reduce((obj, curr) => (Object.assign(Object.assign({}, obj), { [curr[xAxis]]: curr })), {})
+    const templateWithValue = seriesTemplate.map(xAxis => {
+      return (seriesItemsFromDataSetDict[xAxis] || {
+        [legend]: options.legend,
+        [xAxis]: xAxis,
+        [yAxis]: null
+      })
+    })
+    return templateWithValue
+  }
+  /**
+     * 对于复杂的数据转换，需要写 ts，方便看懂代码之间的数据流转
+     * @returns: ['折线图1', '折线图2']
+     */
+  getLegends () {
+    const legendKey = this.keys.legend
+    const allLegends = _.uniqBy(this.dataset, legendKey).map((item) => item[legendKey])
+    const legends = Array.from(new Set(allLegends))
+    return legends
+  }
+  /**
+     * 获取X轴的数据
+     * demo: ['01-01', '02-01', '03-01', '04-01']
+     */
+  getXAxis () {
+    const xAxis = this.dataset.map(item => item[this.keys.xAxis])
+    return xAxis
+  }
+  getTooltip () {
+    return {
+      trigger: 'axis'
+    }
+  }
+  getDefaultYAxis (option) {
+    const { show, axisLabelFormatter } = option
+    return {
+      show,
+      type: 'value',
+      axisLabel: {
+        // Y轴文字颜色，
+        color: this.colors.labelText.xAxis,
+        // formatter: '{value}',
+        formatter: axisLabelFormatter
+      },
+      // 不需要对 Y 轴顶部的文字做定制
+      // nameTextStyle: {
+      //   color: [yAxisTitleFontColor],
+      //   fontSize: 14,
+      //   fontWeight: 600,
+      // },
+      // y轴坐标轴轴线， 也就是y轴的一条竖线
+      axisLine: {
+        show: false,
+        lineStyle: {
+          // y轴上数字的颜色
+          fontSize: 15,
+          color: this.colors.labelText.yAxis
+          // opacity: 1
+        }
+      },
+      // 显示轴线与数值之间的 「-」
+      axisTick: { show: false },
+      splitLine: {
+        lineStyle: {
+          // 使用深浅的间隔色
+          // 类似四条三格的横线的颜色
+          color: [this.colors.splitLine]
+        }
+      }
+    }
+  }
+  /**
+   * Y轴数据
+   * @param legends
+   */
+  getYAxis (legends) {
+    // TODO 如果返回值 函数怎么办呢？
+    function getAxisLabelFormatter (legend) {
+      return function (value) {
+        // const format = formatDict[legend] || "0.0a";
+        // return numeral(value).format(format);
+        // TODO 自己实现 formatter 函数
+        return value
+      }
+    }
+    const yAxis = legends.map(legend => this.getDefaultYAxis({
+      show: window.innerWidth > 768,
+      // TODO 外界传进来legendValueFormatter
+      axisLabelFormatter: getAxisLabelFormatter(legend)
+    }))
+    return yAxis
+  }
+  /**
+   *
+   * @param {*} legends
+   * @param {*} xAxis
+   *
+   interface Series {
+     name: string,
+      data: seriesData,
+
+    }
+  */
+  getSeries (legends, xAxis) {
+    /**
+    interface groupbyLegend {
+      [legendKey1]: [
+        [legendKey1]: legendValue,
+        [xAxiskey]: xAxisValue,
+        [yAxiskey]: yAxisValue
+      ]
+    }
+    */
+    const groupbyLegend = _.groupBy(this.dataset, this.keys.legend)
+    const series = legends.map((legend, index) => {
+      const seriesItemsFromDataSet = groupbyLegend[legend]
+      const data = this.padMissingValues(xAxis, seriesItemsFromDataSet, { legend }).map(item => item[this.keys.yAxis])
+      return {
+        name: legend,
+        type: this.chartType,
+        // TODO 值和 value 对应起来
+        data,
+        yAxisIndex: this.yIndexMap[legend] || 0,
+        itemStyle: {
+          normal: {
+            color: this.colors.series[index].value
+          }
+          // emphasis: {
+          //   color: '#59a4ed',
+          // },
+        }
+        // TODO 指定 Y轴
+        // TODO zlevel: 0,
+      }
+    })
+    return series
+  }
+  getDefaultOption () {
+    return {
+      tooltip: {
+        show: true,
+        trigger: 'axis'
+      },
+      axisTick: { show: false },
+      xAxis: {
+        type: 'category',
+        boundaryGap: true,
+        axisTick: { show: false },
+        axisLine: {
+          lineStyle: {
+            // x轴颜色, 包含：x轴的颜色、文字颜色
+            // 图例： https://jietu.qq.com/upload/index.html?image=http://jietu-10024907.file.myqcloud.com/hwfezrujmosnhjesfoweuqdguwrwyekw.jpg
+            color: 'rgba(0,0,0,.6)'
+          }
+        }
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      color: this.colors.series
+    }
+  }
+  getOption () {
+    const option = {
+      textStyle: {
+        fontFamily: 'Roboto'
+      },
+      tooltip: this.tooltip,
+      series: this.series,
+      legend: {
+        data: this.legends,
+        show: true
+      },
+      xAxis: {
+        data: this.xAxis
+      },
+      yAxis: this.yAxis
+    }
+    return _.merge(option, this.getDefaultOption())
+  }
+}
+/**
+ * echarts demo: https://www.echartsjs.com/examples/zh/editor.html?c=line-simple
+ * 通过输入固定格式的 echarts dataset，得到 echarts options
+ *
+ * TODO X轴 formatter：1.只针对 X轴，不针对 tooltip 2. tooltip 和 X轴同时生效
+ * TODO legend(series) 到多Y轴的映射
+ */
+import _ from "lodash";
+// import numeral from "numeral";
+
+/**
+ *
+  yIndexMap: {
+    系列1: 0,
+    系列2: 1
+  }
+
+  const users = [
+    {
+      x: "2010/01/01 00:00:00",
+      y: 500,
+      s: "系列1"
+    },
+    {
+      x: "2010/01/01 00:00:00",
+      y: 180,
+      s: "系列2"
+    },
+    {
+      x: "2010/02/01 00:00:00",
+      y: 250,
+      s: "系列1"
+    },
+    {
+      x: "2010/02/01 00:00:00",
+      y: 100,
+      s: "系列2"
+    },
+    {
+      x: "2010/03/01 00:00:00",
+      y: 325,
+      s: "系列1"
+    },
+    {
+      x: "2010/03/01 00:00:00",
+      y: 175,
+      s: "系列2"
+    },
+    {
+      x: "2010/04/01 00:00:00",
+      y: 190,
+      s: "系列1"
+    },
+    {
+      x: "2010/04/01 00:00:00",
+      y: 110,
+      s: "系列2"
+    },
+    {
+      x: "2010/05/01 00:00:00",
+      y: 260,
+      s: "系列1"
+    },
+    {
+      x: "2010/05/01 00:00:00",
+      y: 60,
+      s: "系列2"
+    },
+    {
+      x: "2010/05/19 00:00:00",
+      y: 90,
+      s: "系列2"
+    },
+    {
+      x: "2010/05/23 00:00:00",
+      y: 90,
+      s: "系列2"
+    }
+  ];
+
+ *
+ */
+
+// 固定格式
+interface DataSetItem {
+  x: string; // x轴
+  y: string | number; // y轴，也就是 value
+  s: string | number; // s 也就是 legend
+  [propName: string]: any;
+}
+
+interface SeriesItemDict {
+  [propName: string]: any;
+}
+
+interface SeriesItem {
+  name?: string; // 可选
+  type: string;
+  data: Array<string | number>;
+  itemStyle: {
+    normal: {
+      color: string;
+    };
+    // emphasis: {
+    //   color: '#59a4ed',
+    // },
+  };
+  yAxisIndex?: number
+  // TODO 指定 Y轴
+  // TODO zlevel: 0,
+}
+
+interface YAxisOption {
+  show: boolean;
+  axisLabelFormatter: (value: any) => any;
+}
+
+interface formatDictType {
+  [propName: string]: string;
+}
+
+interface uniqByResultType {
+  [legendKey: string]: string // legendValue
+}
+
+interface LineChartConfig {
+  xAxis?: Array<string|number>;
+  dataset: DataSetItem[];
+  yIndexMap: {
+    [legendkey: string]: number
+  }
+}
+
+const formatDict: formatDictType = {
+  gp: "$0.00",
+  gross_profit: "$0.00",
+  revenue: "$0.00",
+  reveue_f: "$0.00",
+  cvr: "0.00%",
+  click_count: "0,00",
+  conv: "0,00",
+  show_rate: "0.00%",
+  fill_rate: "0.00%"
+};
+
+export class LineChart {
+  // 指定折线采用哪一条Y轴
+  yIndexMap: {
+    // 纬度/折线
+    [legendName: string]: number
+  };
+  chartType: string; // 'line' | 'bar' | 'pie'
+  // TODO class 里面如何定义 ts
+  colors: {
+    series: any;
+    labelText: any;
+    splitLine: string;
+  };
+  // 数据源
+  dataset: DataSetItem[];
+  keys: {
+    xAxis: string;
+    yAxis: string;
+    legend: string;
+  };
+  legends: string[];
+  xAxis: Array<string | number>;
+  yAxis: any[];
+  series: Array<SeriesItem>;
+  tooltip: any;
+
+  constructor({
+      xAxis = [],
+      yIndexMap = {},
+      dataset
+    } : LineChartConfig
+  ) {
+    this.chartType = "line";
+    this.colors = {
+      series: [
+        { value: "#57b2ff" },
+        { value: "#d70b24" },
+        { value: "#48c765" },
+        { value: "#fbb64e" },
+        { value: "#f95e58" }
+      ],
+      labelText: {
+        xAxis: "rgba(0,0,0,.6)",
+        yAxis: "rgba(0,0,0,.6)"
+      },
+      splitLine: "rgba(236, 237, 239, 0.26)"
+    };
+    this.yIndexMap = yIndexMap;
+    this.dataset = dataset;
+    this.keys = { xAxis: "x", yAxis: "y", legend: "s" };
+
+    this.legends = this.getLegends();
+    this.xAxis = (xAxis.length && xAxis) || this.getXAxis();
+    this.yAxis = this.getYAxis(this.legends);
+    this.series = this.getSeries(this.legends, this.xAxis);
+    this.tooltip = this.getTooltip();
+  }
+
+  /**
+   * 填补缺失值，说白了其实就是 merge
+   * seriesTemplate: [{x: '01-01', y: null}, {x: '02-01', y: null}, {x: '03-01', y: null}]
+   * seriesItemsFromDataSet: [{ x: '01-01', y: 11}, {x: '03-01', y: 33 }]
+   *
+   * => [{x: '01-01', y: 11}, {x: '02-01', y: null}, {x: '03-01', y: 33}]
+   *
+   * seriesTemplate (X轴所有点): ['01-01', '01-02', '01-03]
+   * seriesItemsFromDataSet: 可能缺失的数据作为 填充值
+   * options: { legend: string // 某条折线图名字 }
+   *
+   * seriesTemplate -> 循环填充默认值 -> [Object, Object]
+   * seriesItemsFromDataSet -> 字典{} -> 循环模板（X轴所有点）-> 找到X轴上点在 seriesItemsFromDataSet字典中的值 ->，替换模板中的默认值 -> 返回填充后的模板
+   */
+  padMissingValues(
+    seriesTemplate: Array<string | number>,
+    seriesItemsFromDataSet: DataSetItem[],
+    options: { legend: string }
+  ): DataSetItem[] {
+    const { xAxis, yAxis, legend } = this.keys;
+
+    const seriesItemsFromDataSetDict: SeriesItemDict = seriesItemsFromDataSet.reduce(
+      (obj, curr: DataSetItem) => ({
+        ...obj,
+        [curr[xAxis]]: curr
+      }),
+      {}
+    );
+
+    const templateWithValue = seriesTemplate.map(xAxis => {
+      return (
+        seriesItemsFromDataSetDict[xAxis] || {
+          [legend]: options.legend,
+          [xAxis]: xAxis,
+          [yAxis]: null
+        }
+      );
+    });
+
+    return templateWithValue;
+  }
+
+  /**
+   * 对于复杂的数据转换，需要写 ts，方便看懂代码之间的数据流转
+   * @returns: ['折线图1', '折线图2']
+   */
+  getLegends(): string[] {
+    const legendKey = this.keys.legend;
+    const allLegends: string[] = _.uniqBy(this.dataset, legendKey).map(
+      (item: uniqByResultType) => item[legendKey]
+    );
+    const legends: string[] = Array.from(new Set(allLegends));
+    return legends;
+  }
+
+  /**
+   * 获取X轴的数据
+   * demo: ['01-01', '02-01', '03-01', '04-01']
+   */
+  getXAxis(): Array<string | number> {
+    const xAxis = this.dataset.map(item => item[this.keys.xAxis]);
+    return xAxis;
+  }
+
+  getTooltip(): any {
+    return {
+      trigger: "axis"
+    };
+  }
+
+  getDefaultYAxis(option: YAxisOption) {
+    const { show, axisLabelFormatter } = option;
+    return {
+      show,
+      type: "value",
+      axisLabel: {
+        // Y轴文字颜色，
+        color: this.colors.labelText.xAxis,
+        // formatter: '{value}',
+        formatter: axisLabelFormatter
+      },
+      // 不需要对 Y 轴顶部的文字做定制
+      // nameTextStyle: {
+      //   color: [yAxisTitleFontColor],
+      //   fontSize: 14,
+      //   fontWeight: 600,
+      // },
+      // y轴坐标轴轴线， 也就是y轴的一条竖线
+      axisLine: {
+        show: false,
+        lineStyle: {
+          // y轴上数字的颜色
+          fontSize: 15,
+          color: this.colors.labelText.yAxis
+          // opacity: 1
+        }
+      },
+      // 显示轴线与数值之间的 「-」
+      axisTick: { show: false },
+      splitLine: {
+        lineStyle: {
+          // 使用深浅的间隔色
+          // 类似四条三格的横线的颜色
+          color: [this.colors.splitLine]
+        }
+      }
+    };
+  }
+
+  /**
+   * Y轴数据
+   * @param legends
+   */
+  getYAxis(legends: string[]): any[] {
+    // TODO 如果返回值 函数怎么办呢？
+    function getAxisLabelFormatter(legend: string) {
+      return function(value: any) {
+        // const format = formatDict[legend] || "0.0a";
+        // return numeral(value).format(format);
+        // TODO 自己实现 formatter 函数
+        return value
+      };
+    }
+    const yAxis = legends.map(legend =>
+      this.getDefaultYAxis({
+        show: window.innerWidth > 768,
+        // TODO 外界传进来legendValueFormatter
+        axisLabelFormatter: getAxisLabelFormatter(legend)
+      })
+    );
+    return yAxis;
+  }
+
+  /**
+   *
+   * @param {*} legends
+   * @param {*} xAxis
+   *
+   interface Series {
+     name: string,
+     data: seriesData,
+
+   }
+   */
+  getSeries(legends: string[], xAxis: Array<string | number>): SeriesItem[] {
+    /**
+      interface groupbyLegend {
+        [legendKey1]: [
+          [legendKey1]: legendValue,
+          [xAxiskey]: xAxisValue,
+          [yAxiskey]: yAxisValue
+        ]
+      }
+     */
+    const groupbyLegend = _.groupBy(this.dataset, this.keys.legend);
+    const series = legends.map((legend: string, index: number) => {
+      const seriesItemsFromDataSet: DataSetItem[] = groupbyLegend[legend];
+      const data: Array<string | number> = this.padMissingValues(
+        xAxis,
+        seriesItemsFromDataSet,
+        { legend }
+      ).map(item => item[this.keys.yAxis]);
+      return {
+        name: legend, // 可选
+        type: this.chartType,
+        // TODO 值和 value 对应起来
+        data,
+        yAxisIndex: this.yIndexMap[legend] || 0,
+        itemStyle: {
+          normal: {
+            color: this.colors.series[index].value
+          }
+          // emphasis: {
+          //   color: '#59a4ed',
+          // },
+        }
+        // TODO 指定 Y轴
+        // TODO zlevel: 0,
+      };
+    });
+    return series;
+  }
+
+  getDefaultOption() {
+    return {
+      tooltip: {
+        show: true,
+        trigger: "axis"
+      },
+      axisTick: { show: false },
+      xAxis: {
+        type: "category",
+        boundaryGap: true,
+        axisTick: { show: false },
+        axisLine: {
+          lineStyle: {
+            // x轴颜色, 包含：x轴的颜色、文字颜色
+            // 图例： https://jietu.qq.com/upload/index.html?image=http://jietu-10024907.file.myqcloud.com/hwfezrujmosnhjesfoweuqdguwrwyekw.jpg
+            color: "rgba(0,0,0,.6)"
+          }
+        }
+      },
+      grid: {
+        y: 40, // 图表和legend之间的距离
+        left: "5%", // 图表的x轴的零点距离容器左侧的距离
+        right: "4%", // 图表的x轴的最右点距离容器右侧的距离
+        bottom: 30
+      },
+      color: this.colors.series
+    };
+  }
+
+  getOption() {
+    const option = {
+      textStyle: {
+        fontFamily: "Roboto"
+      },
+      tooltip: this.tooltip,
+      series: this.series,
+      legend: {
+        data: this.legends,
+        show: true
+      },
+      xAxis: {
+        data: this.xAxis
+      },
+      yAxis: this.yAxis
+    };
+    return _.merge(option, this.getDefaultOption());
+  }
+}
 \ No newline at end of file
+import VeLine from 'v-charts/lib/line.common'
+import VePie from 'v-charts/lib/pie.common'
+import VeHistogram from 'v-charts/lib/histogram.common'
+import VeFunnel from 'v-charts/lib/funnel.common'
+import PropTypes from '@luban-h5/plugin-common-props'
+import 'echarts/lib/component/legend'
+import 'echarts/lib/component/markLine'
+import 'echarts/lib/component/markPoint'
+import 'echarts/lib/component/markArea'
+import Parser from '../../../utils/excel-parser'
+
+export default {
+  extra: {
+    defaultStyle: {
+      width: 320,
+      height: 400
+    }
+  },
+  name: 'lbp-line-chart',
+  // mixins: [ChartMixin],
+  props: {
+    dataset: PropTypes.excel({
+      defaultValue: () => [
+        ['日期', '销售量'],
+        ['1月1日', 123],
+        ['1月2日', 1223],
+        ['1月3日', 2123],
+        ['1月4日', 4123],
+        ['1月5日', 3123],
+        ['1月6日', 7123]
+      ]
+    }),
+    type: PropTypes.string({
+      label: '类型',
+      defaultValue: 'line',
+      visible: false
+    })
+  },
+  data () {
+    return {
+      option: {}
+    }
+  },
+  render () {
+    const chartData = Parser.csv2VChartJson(this.dataset)
+    const settings = {
+      // metrics: ['日期', '销售量'],
+      // dimension: ['日期']
+    }
+    switch (this.type) {
+      case 'line':
+        return <VeLine data={chartData} settings={settings} />
+      case 'histogram':
+        return <VeHistogram data={chartData} settings={settings} />
+      case 'pie':
+        return <VePie data={chartData} settings={settings} />
+      case 'funnel':
+        return <VeFunnel data={chartData} settings={settings} />
+      default:
+        return null
+    }
+  },
+  mounted () {
+    // this.renderChart()
+  }
+}
+/**
+ *
+ declare module ExcelRows {
+  export interface cell {
+      text: string;
+  }
+  export interface Cells {
+    0: cell;
+    1: cell;
+    2: cell;
+  }
+  export interface ExcelRows {
+    cells: Cells;
+  }
+}
+ */
+
+/**
+  *
+  BinaryMatrix = [
+    [any, any, any, ...],
+    [any, any, any, ...],
+    [any, any, any, ...],
+  ]
+
+  ExcelDataType = [
+    {
+      cells: {
+        0: { text: any },
+        1: { text: any },
+        2: { text: any }
+      }
+    },
+    {
+      cells: {
+        0: { text: any },
+        1: { text: any },
+        2: { text: any }
+      }
+    },
+  ]
+  */
+
+export default class Parser {
+  /**
+   *
+   * @param {*} dataset ExcelDataType
+   */
+  static dataset2excel (dataset) {
+    return dataset.map(item => ({
+      cells: {
+        0: { text: item.x },
+        1: { text: item.y },
+        2: { text: item.s }
+      }
+    }))
+  }
+
+  /**
+   *
+    [
+      [1,2,3,4],
+      [5,6,7,8],
+      [9,10,11,12]
+    ]
+   * @param {Object} BinaryMatrix
+   * @returns {Object} ExcelDataType
+   */
+  static binaryMatrix2excel (binaryMatrix) {
+    const excelData = binaryMatrix.map((row, rowIndex) => {
+      // cells: {
+      //   0: { text: item.x },
+      //   1: { text: item.y },
+      //   2: { text: item.s }
+      // }
+      const cells = {}
+      row.forEach((cellValue, cellIndex) => {
+        cells[cellIndex] = { text: cellValue }
+      })
+      return { cells }
+    })
+    return excelData
+  }
+
+  static excel2chartDataSet (excelData) {
+    const rowsArray = Object.values(excelData.rows).filter(item => typeof item === 'object')
+    const dataset = rowsArray.map(row => {
+      const [x, y, s] = Object.values(row.cells).map(item => item.text)
+      return {
+        x: x,
+        y: y,
+        s: s
+      }
+    })
+    return dataset
+  }
+
+  static excel2BinaryMatrix (excelData) {
+    const rowsArray = Object.values(excelData.rows).filter(item => typeof item === 'object')
+    const dataset = rowsArray.map(row => {
+      // [1,2,3,4]
+      const cells = Object.values(row.cells).map(item => item.text)
+      return cells
+    })
+    console.log('dataset', dataset)
+    return dataset
+  }
+
+  /**
+  *
+  * @param {Array} csvArray
+  *    [
+         ['日期', '销售量'],
+         ["1月1日",123],
+         ["1月2日",1223],
+         ["1月3日",2123],
+         ["1月4日",4123],
+         ["1月5日",3123],
+         ["1月6日",7123]
+       ]
+  * @returns {Object}
+     {
+       columns: ['日期', '销售量'],
+       rows:[
+         { '日期': '1月1日', '销售量': 123 },
+         { '日期': '1月2日', '销售量': 1223 },
+         { '日期': '1月3日', '销售量': 2123 },
+         { '日期': '1月4日', '销售量': 4123 },
+         { '日期': '1月5日', '销售量': 3123 },
+         { '日期': '1月6日', '销售量': 7123 }
+       ]
+     }
+  */
+  static csv2VChartJson (csvArray) {
+    const columns = csvArray[0]
+    const rows = csvArray.slice(1)
+    const json = {
+      columns,
+      rows: rows.map((row, index) => {
+        const obj = {}
+        columns.forEach((col, colIndex) => {
+          obj[col] = row[colIndex]
+        })
+        return obj
+      })
+    }
+    return json
+  }
+}
@@ -3684,6 +3684,28 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
+echarts-amap@1.0.0-rc.6:
+  version "1.0.0-rc.6"
+  resolved "https://registry.npm.taobao.org/echarts-amap/download/echarts-amap-1.0.0-rc.6.tgz#5782a74daee52ed44ce3f8f62577561783f09e16"
+  integrity sha1-V4KnTa7lLtRM4/j2JXdWF4PwnhY=
+
+echarts-liquidfill@^2.0.2:
+  version "2.0.6"
+  resolved "https://registry.npm.taobao.org/echarts-liquidfill/download/echarts-liquidfill-2.0.6.tgz#0668dc61d87a6262003090bd32c55aa8108c252e"
+  integrity sha1-BmjcYdh6YmIAMJC9MsVaqBCMJS4=
+
+echarts-wordcloud@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npm.taobao.org/echarts-wordcloud/download/echarts-wordcloud-1.1.3.tgz#07b140c8ba76b19c317b43c310f3d5dc99289ff2"
+  integrity sha1-B7FAyLp2sZwxe0PDEPPV3Jkon/I=
+
+echarts@^4.8.0:
+  version "4.8.0"
+  resolved "https://registry.npm.taobao.org/echarts/download/echarts-4.8.0.tgz?cache=0&sync_timestamp=1596214937248&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fecharts%2Fdownload%2Fecharts-4.8.0.tgz#b2c1cfb9229b13d368ee104fc8eea600b574d4c4"
+  integrity sha1-ssHPuSKbE9No7hBPyO6mALV01MQ=
+  dependencies:
+    zrender "4.3.1"
+
 editorconfig@^0.15.3:
   version "0.15.3"
   resolved "https://registry.npm.taobao.org/editorconfig/download/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
@@ -7556,6 +7578,11 @@ number-is-nan@^1.0.0:
   resolved "https://registry.npm.taobao.org/number-is-nan/download/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
+numerify@1.2.9:
+  version "1.2.9"
+  resolved "https://registry.npm.taobao.org/numerify/download/numerify-1.2.9.tgz#af4696bb1d57f8d3970a615d8b0cd53d932bd559"
+  integrity sha1-r0aWux1X+NOXCmFdiwzVPZMr1Vk=
+
 nwsapi@^2.0.7:
   version "2.2.0"
   resolved "https://registry.npm.taobao.org/nwsapi/download/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
@@ -9208,6 +9235,11 @@ reselect@^3.0.1:
   resolved "https://registry.npm.taobao.org/reselect/download/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
   integrity sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=
+resize-detector@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npm.taobao.org/resize-detector/download/resize-detector-0.2.2.tgz#b207e72912bef0bda9fb825fe894ed9686ca965e"
+  integrity sha1-sgfnKRK+8L2p+4Jf6JTtlobKll4=
+
 resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
@@ -10681,6 +10713,11 @@ utila@^0.4.0, utila@~0.4:
   resolved "https://registry.npm.taobao.org/utila/download/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
   integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
+utils-lite@0.1.10:
+  version "0.1.10"
+  resolved "https://registry.npm.taobao.org/utils-lite/download/utils-lite-0.1.10.tgz#d2908c0482e23c31e6b082558540e7134ffad7d7"
+  integrity sha1-0pCMBILiPDHmsIJVhUDnE0/619c=
+
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
@@ -10691,6 +10728,17 @@ uuid@^3.0.1, uuid@^3.3.2:
   resolved "https://registry.npm.taobao.org/uuid/download/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
   integrity sha1-RWjwIW54dg7h2/Ok0s9T4iQRKGY=
+v-charts@^1.19.0:
+  version "1.19.0"
+  resolved "https://registry.npm.taobao.org/v-charts/download/v-charts-1.19.0.tgz#07b701800b159bd514264ffc8bf12b0405142da3"
+  integrity sha1-B7cBgAsVm9UUJk/8i/ErBAUULaM=
+  dependencies:
+    echarts-amap "1.0.0-rc.6"
+    echarts-liquidfill "^2.0.2"
+    echarts-wordcloud "^1.1.3"
+    numerify "1.2.9"
+    utils-lite "0.1.10"
+
 v-click-outside@^2.1.4:
   version "2.1.4"
   resolved "https://registry.npm.taobao.org/v-click-outside/download/v-click-outside-2.1.4.tgz#7d7813b09a0fd4a9d0fbccc2ca12ca7c5591e087"
@@ -11459,3 +11507,8 @@ yorkie@^2.0.0:
     is-ci "^1.0.10"
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
+
+zrender@4.3.1:
+  version "4.3.1"
+  resolved "https://registry.npm.taobao.org/zrender/download/zrender-4.3.1.tgz?cache=0&sync_timestamp=1596718864550&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fzrender%2Fdownload%2Fzrender-4.3.1.tgz#baf8aa6dc8187a2f819692d7d5f9bedfa2b90fa3"
+  integrity sha1-uviqbcgYei+BlpLX1fm+36K5D6M=