Vue.js中使用ECharts

有一些文章在讲述了 在Vue中使用echarts的两种方式 感觉都没有说到重点上，一些注意事项没有把握住的话，会出现一些问题，导致图标没有渲染出来。本文详细说明一下Vue.js中使用ECharts的方法和注意事项。

npm 安装 ECharts

npm install echarts --save

引入ECharts

更多按需引入 ECharts 图表和组件可参考在 webpack 中使用 ECharts

import echarts from "echarts";

准备容器

5 分钟上手 ECharts中有说明。
注意 准备一个具备 高宽 的 DOM 容器，一定要具有宽高，否则，容器内没有任何展示，且js没有任何错误。

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>

初始化初始化echarts实例和绘制图表

注意 这个过程要在mounted的时候中执行，如果放在mountend之前（如：beforeMount、created、beforeCreate）都无法完成渲染，引发 "TypeError: Cannot read property 'getAttribute' of null"。

如果使用的vue-echarts，options也是在mounted执行。

  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例"
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  }

效果

echarts实例效果.png

更多效果、参数配置请参考 官方API