vue里面绘制echarts

绘制分为三部分

• 第一部分（初始化echarts实例）init操作

//this.$echarts 是在main.js引入的echarts对象
//this.$refs.echart_ref指的是echarts容器，通常是个空div就行，但是这个div要设置高度
// 'chalk'指的是引入的主题，这个主题文件可以在项目的index模板文件里面引入
// this.chartInstance指的是init后的初始化实例，通常以后操作都是对this.chartInstance

 this.chartInstance = this.$echarts.init(this.$refs.echart_ref, 'chalk');

• 第二部分 (设置setOption）可以多次设置
  • 设置基本的setOption，比如文字了，样式了，偏移距离了，不带echarts data数据

        let initOptions = {
          title: {
            text: '',
          },
          xAxis: {
            type: 'category',
            boundaryGap: false
          },
          yAxis: {
            type: 'value'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            icon: 'circle',
            left: '5%',
            top: '20%'
          },
          grid: {
            top: '25%',
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
          }
        };

• 设置data的setOption，填充数据

// xAxis是横轴，类目轴  
//  series是y轴，数据轴
// legend是图例
 let dataOption = {
          xAxis: {
            data: timeArr
          },
          series: seriesArr,
          legend: {
            data: legendArr
          }
        };

• 设置响应式字体和echarts

window.addEventListener('resize', this.screenAdapter);  //监听resize

      screenAdapter() {
        let fontSize = this.$refs.trend_ref.offsetWidth /100 * 3.6;   //动态获取屏幕宽度
        this.titleFontSize = fontSize;  //设置标题size
        let adapterOption = {
            legend: {   //图例样式动态调整
                itemWidth: fontSize,
                itemHeight: fontSize,
                itemGap: fontSize,
                textStyle: {
                    fontSize: fontSize / 2
                }
            }
        };
        this.chartInstance.setOption(adapterOption);   //设置setOption
        this.chartInstance.resize();  //resize之后才会生效
      }

• 第三部分（取消resize的监听）

// destroyed生命周期函数移除resize监听
    destroyed() {
      window.removeEventListener('resize', this.screenAdapter);
       this.$socket.unRegisterCallBack('trendData');
    },