vue中echarts的基本用法

1.安裝echarts包

npm install echarts --save

2.導入echarts和lodash，lodash用作兩個數據合並

var echarts = require('echarts');

  import _ from "lodash";

3.為echarts准備一個具備大小的dom

 <div style="width:750px;height:500px" id="main"></div>

4.基於准備好的dom，初始化echarts

 var myChart = echarts.init(document.getElementById('main'));

5.准備數據和配置項

 const { data: res } = await this.$http.get("reports/type/1");
    if (res.meta.status !== 200) {
      return this.$message.error(res.meta.msg);
    } 
    // 用_merge方法把服務器返回的數據和data中的options做一下合並，如果不合並的話圖表會確一些鼠標跟隨的效果
    // data中的options數據是從接口文檔拷貝的，接口文檔給的
    const result = _.merge(res.data, this.options);

6.展示數據

 myChart.setOption(result);

注意：以上四五六步都必須寫在mounted函數里面

 結果