如何在vue中使用echart，以及使用的事項

2019年10月23日進行更新，這里不再建議使用document.getElementById的方式獲取元素的id,而是建議使用ref來代替。這樣的話就會避免Echarts的圖形容器還未生成就對其進行了初始化，產生如下的錯誤。

 

 

 

 

1.安裝echarts依賴   npm install echarts --save

2.在main.js中全局中引用

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3.在你需要用到echart的地方先設置一個div的id、寬高，

例子：

<div ref="chart" style="width:100%;height:376px"></div>

 

然后我們要在mounted生命周期函數中實例化echarts對象。因為我們要確保dom元素已經掛載到頁面中。

 

   mounted(){
    this.getEchartData()  
    },


   methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {...}
        myChart.setOption(option)
        window.addEventListener("resize", function() {
          myChart.resize()
        })
      }
       this.$on('hook:destroyed',()=>{
         window.removeEventListener("resize", function() {
          myChart.resize();
        });
        })
    }
  }

 

其中const option = { }就是我們需要引進echart圖表的代碼，需要什么例子可以在官方例子https://www.echartsjs.com/examples/里面找。

注意！目前我遇到兩個比較特殊的圖表需要在main.js里面引入一下才能使用，一個是詞雲圖，一個是盒須圖。代碼如下：

require('echarts-wordcloud')

require('echarts/dist/extension/dataTool.js')

 

 

Echarts常見的屬性改變

通常一個Echarts圖表通常由title(標題)、legend(圖例)、grid（網格）xAxis（x軸）、yAxis（y軸）、dataZoom（區域縮放）tooltip（提示框組件）、toolbox（工具欄）、series（系列列表。每個系列通過 type 決定自己的圖表類型）組成。例子如下圖所示：

 

具體需要修改哪一項的屬性可以再官方配置項里面查找https://www.echartsjs.com/option.html#title

以后我這邊也會貼出一些常見的屬性更改。