echart.js在vue中使用

以前可能寫過，懶得去翻了，再寫一次

1，安裝echarts   導入到頁面   

 import echarts from 'echarts';

2.在生命周期里面做初始化

data(){
   return{
        teacherChart:null
    } 
}

created(){
  this.teacherChart= echarts.init(document.getElementById('teacherChart'));  
  //執行一個函數
  this.teacherCont();
},
methods:{
    teacherCont(){
        /*要哪個圖去官網拿，不多寫了*/
        const chartOption={
            title:{},
            tooltip:{},
            series:[{
              data:[
                  {val：數據里面的值，name:‘關注’}，
                  {val：數據里面的值，name:‘不關注’}，
               ]
            }]
        }
        this.teacherChart.setOption(chartOption);
    }
}        

上面是最簡單的圖表

來一個數據遍歷的

比如x軸

xAxis: {
      data: this.chartData.map(item => {
           return item.name;
      }),
      axisLabel:{
           interval: 0,
           rotate: 60
      },
      axisLine: {
           show: false,
           lineStyle: {
              color: '#a3a3a3'
           }
      }
 },像這樣遍歷出來就可以