vue 中安装并使用echart

本文为博主原创，转载请注明出处：

1.安装echart 依赖：

　　安装命令： 

npm install echarts --save

　　在vscode 的终端窗口进行执行，如图所示：

 　　执行完之后，查看 项目中的echart 版本依赖是否添加成功：

　　package-lock.json 中有具体的echart 依赖信息：

             

 　　package.json 的  dependencies 中有 echart 的依赖

                           

2. 在页面中使用echart：

　　在vue 页面中 定义绑定的 标签元素

<div style="width:1200px;height:300px" ref="chart"></div>

　　引入echart 依赖：

// 引入基本模板
import echarts from “echarts/lib/echarts”;

//引入环形图
import “echarts/lib/chart/bar”;
//引入折现图
import “echarts/lib/chart/line”;
// 引入提示框组件、标题组件、工具箱组件。
import “echarts/lib/component/tooltip”;
import “echarts/lib/component/title”;
import “echarts/lib/component/legend”;

　　在method 中定义加载的参数：

 methods: {

   initCharts () {
        let myChart = echarts.init(this.$refs.chart);
        // 绘制图表
        myChart.setOption({
          //此处插入echart实例中的option内部内容
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [1500, 2300, 2240, 2180, 1350, 1470, 2600],
            type: 'line'
          }
        ]

          });
      },
}

3. 在 mounted 函数中定义加载

 mounted() {
    this.initCharts();
  },

　　需要注意的是，不可放在 create 中去加载图表，放在create 中会出现dom元素还没有加载结束就进行图表挂在，会报 dom 不存在的异常

4. 加载示例