ECharts组件开发

山海鲸支持对于 echarts 进行快速移植，具体方案如下：

1.添加 Echarts 组件

按住 Ctrl+f 调出搜索框，输入“echarts 二开”即可看到 ECharts 组件，点击即可添加至看板中

2.查看代码

切换到该组件的代码选项卡中，可以看到已经默认有一个二开的代码文件，点击编辑按钮可以查看文件内容

3.编写代码

根据您实际的需求修改代码并保存，保存后点击编辑按钮右侧的刷新按钮即可完成刷新，如替换成以下代码：

class EchartsSample {
  init() {
    //通过调用绑定组件的getMountedInstance获取echartsInstance
    const echarts = this.element.getMountedInstance();
    //从官方例子中拷贝代码
    const option = {
      xAxis: {
        type: "category",
        boundaryGap: false,
      },
      yAxis: {
        type: "value",
        boundaryGap: [0, "30%"],
      },
      visualMap: {
        type: "piecewise",
        show: false,
        dimension: 0,
        seriesIndex: 0,
        pieces: [
          {
            gt: 1,
            lt: 3,
            color: "rgba(0, 0, 180, 0.4)",
          },
          {
            gt: 5,
            lt: 7,
            color: "rgba(0, 0, 180, 0.4)",
          },
        ],
      },
      series: [
        {
          type: "line",
          smooth: 0.6,
          symbol: "none",
          lineStyle: {
            color: "#5470C6",
            width: 5,
          },
          markLine: {
            symbol: ["none", "none"],
            label: { show: false },
            data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }],
          },
          areaStyle: {},
          data: [
            ["2019-10-10", 200],
            ["2019-10-11", 560],
            ["2019-10-12", 750],
            ["2019-10-13", 580],
            ["2019-10-14", 250],
            ["2019-10-15", 300],
            ["2019-10-16", 450],
            ["2019-10-17", 300],
            ["2019-10-18", 100],
          ],
        },
      ],
    };
    //调用setOption方法设置进去即可完成整个echarts的扩展编写
    echarts.setOption(option);
  }
}
export default EchartsSample;