管理後臺圖表也是常見得需求。這裡圖表就只推薦ECharts，功能齊全，社群demo也豐富gallery。我還是那個觀點，大部分外掛建議大家還是自己用vue來包裝就好了，真的很簡單。ECharts支援webpack引入，圖省事可以將ECharts整個引入var echarts = require('echarts');不過ECharts還是不小的，我們大部分情況只是用到很少一部分功能，我平時習慣於按需引入的。

// 引入 ECharts 主模組
var echarts = require('echarts/lib/echarts');
// 引入柱狀圖
require('echarts/lib/chart/bar');
// 引入提示框和標題元件
require('echarts/lib/component/tooltip');
require(
 
'echarts/lib/component/title');

webpack中使用ECharts文件ECharts按需引入模組文件接下來我們就要在vue中宣告初始化ECharts了。因為ECharts初始化必須繫結dom，所以我們只能在vue的mounted生命週期裡初始化。

mounted() {
  this.initCharts();
},
methods: {
  this.initCharts() {
    this.chart = echarts.init(this.$el);
    this.setOptions();
  },
  setOptions() {
    
 
this.chart.setOption({
      title: {
        text: 'ECharts 入門示例'
      },
      tooltip: {},
      xAxis: {
        data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
      },
      yAxis: {},
      series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    })
  }
}
 

就這樣簡單，ECharts就配置完成了，這時候你想說我的data是遠端獲取的，或者說我動態改變ECharts的配置該怎麼辦呢？我們可以通過watch來觸發setOptions方法

//第一種 watch options變化 利用vue的深度 watcher，options一有變化就重新setOption
watch: {
  options: {
    handler(options) {
      this.chart.setOption(this.options)
    },
    deep: true
  },
}
//第二種 只watch 資料的變化 只有資料變化時觸發ECharts
watch: {
  seriesData(val) {
    this.setOptions({series:val})
  }
}

其實都差不多，還是要結合自己業務來封裝。後面就和平時使用ECharts沒有什麼區別了。題外話ECharts的可配置項真心多，大家使用的時候可能要花一點時間瞭解它的api的。知乎有個問題：百度還有什麼比較良心的產品？答案：ECharts，可見ECharts的強大與好用。
作者：花褲衩
連結：https://juejin.cn/post/6844903481224986638
來源：稀土掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。