echart的使用

1.安装echarts依赖   npm install echarts --save

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

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3.在你需要用到echart的地方先设置一个div的id、宽高，

例子：

然后我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中。

   mounted(){
    　　this.getEchartData()  
   },


   methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
　　　　　　title: {
　　　　　　　　text: 'ECharts 入门示例'
　　　　　　},
　　　　　　tooltip: {},
　　　　　　xAxis: {
　　　　　　　data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
　　　　　　},
　　　　　　yAxis: {},
　　　　　　series: [
　　　　　　　　{
　　　　　　　　　　name: '销量',
　　　　　　　　　　type: 'bar',
　　　　　　　　　　data: [5, 20, 36, 10, 10, 20]
　　　　　　　　}
　　　　　　]
　　　　　}
        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

以后我这边也会贴出一些常见的属性更改。