echart.js在vue中使用

Posted 2021-01-07 执候

以前可能写过，懒得去翻了，再写一次

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‘
           }
      }
 },像这样遍历出来就可以