echart的数据渲染，option不刷新问题

echart的数据渲染问题及常见的图例样式修改：

我们的项目是wrj有关的项目，数据要求做到实时获取。包括红圈住的echart图标的数据，还有就是民用及警用tab切换的时候数据也需要刷新。

问题描述

例如：我先前以为是我的切换时没有调用echart图标数据的接口，一路log看接口是调了，但是数据还是没刷新，手动浏览器刷新才正常。最后我发现页面首次加载的时候，数据根本就没更新到最新的接口数据，还取得是data里面的数据。

原因分析：

我猜想的原因是，因为echart图标已经在和dom渲染的时候一起渲染了，数据自然就取得data里面的数据。就算接口返回把option的数据替换，他也不会自动渲染到图表中。

解决方案：

数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据

    computed:{
    option(){
      let data = this.dataList;
      return {
        intervalId:null,
        legend: {
          // selectedMode: false, //取消图例上的点击事件
          top: 0,
          right: -5,
          orient: 'vertical',
          height:'84px',//图例组件的高度
          textStyle:{
            color:'#fff',
          },
          itemHeight: 12,
          itemWidth: 12,//图例标记的图形高度
          itemGap:8,//图例每项之间的间隔
          myChart:null,
          data: [
           {
                name:'任务中',
                // icon:`image://${imgUrl}`,//格式为'image://+icon文件地址'，其中image::后的//不能省略
                icon:`image://${require('@/assets/img/echart/rwing.png')}` //格式为'image://+icon文件地址'，其中image::后的//不能省略
            },
            {
                name:'已完成',
                icon:`image://${require('@/assets/img/echart/rwed.png')}`
            },
            {
                name:'未开始',
                icon:`image://${require('@/assets/img/echart/rwwks.png')}`
            },
            {
                name:'任务异常',
                icon:`image://${require('@/assets/img/echart/rwyc.png')}`
            }
          ],
          formatter: function (name) {
            let str;
            for (let i=0;i<data.length;i++){
              if (data[i].name==name){
                str = name + ' ' + data[i].value
              }
            }
            return str
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            center:['35%','50%'],
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.dataList
          }
        ]
      }
    }
  },

data中定义最初始的值

  data() {
    return {
      dataList:[
        { value: 0, name: '未开始' },
        { value: 0, name: '已完成' },
        { value: 0, name: '任务中' },
        { value: 0, name: '任务异常' },
      ],
    };
  },

渲染是在切换tab的时候来渲染echart，watch监控tab项渲染

  watch:{
    titleValue(val){
      if (val=='2'){
        setTimeout(()=>{
          this.initEchart()
        },100)
      }
    },
    //观察option的变化
    option: {
    //**解决不渲染的重点**
      handler(newVal, oldVal) {
        //数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal);
          } else {
            this.myChart.setOption(oldVal);
          }
        } else {
          this.initEchart();
        }
      },
      deep: true //对象内部属性的监听，关键。
    }
  },

methods及html中

//html
 <div class="t3" id="t3"></div>
 
 methods: {
 //初始化图表
    initEchart(){
      this.myChart = this.$echarts.init(document.getElementById('t3'));
      this.myChart.setOption(this.option);
    },
}

关于echart的option的补充说明：
① legend的图标替换如下面的data中定义的，可以用’image://url’ ,引入外部的图标。
图例之间的间距及宽度都可以调整

itemWidth: 12,//图例标记的图形高度
 itemGap:8,//图例每项之间的间隔

②图例的字体颜色，一般都是如下

 legend: {
      textStyle:{
        color:'#fff',
      },
    },

这样设置的就是图例的字体整体颜色，我们有个需求就是，图例名称是统一的颜色，但是图例数据需要多种颜色的配置，
在lengend 中通过formmatter函数配合textStyle中的属性rich富文本来格式化处理样式或者内容等

 legend: {
  textStyle:{
      color:'#fff',
       rich: {
         rwing: {
            color: '#3ADCAB',
          },
          rwed: {
            color: '#1DD6FF',
          },
          rwwks: {
            color: '#FFAD32',
          },
          rwyc: {
            color: '#EC7C83',
          },
        }
    },
 },

 formatter: function (name,id) {
     let str,temp;
     for (let i=0;i<data.length;i++){
       if (data[i].name==name){
         // str = name + ' ' + data[i].value
         str=data[i].value
       }
     }
     // return str
     if (name=='任务中') {
       temp="{name|" +name +"} {rwing|"+str+"}"
     }else if(name=='已完成'){
       temp="{name|" +name +"} {rwed|"+str+"}"
     }else if(name=='未开始'){
       temp="{name|" +name +"} {rwwks|"+str+"}"
     }else if(name=='任务异常'){
       temp="{name|" +name +"} {rwyc|"+str+"}"
     }
     return temp
   }

设置完之后的页面就如一一一对应

option完整代码

 option(){
      let data = this.dataList;
      return {
        legend: {
          // selectedMode: false, //取消图例上的点击事件
          top: 0,
          right: -5,
          orient: 'vertical',
          height:'84px',//图例组件的高度
          textStyle:{
            color:'#fff',
            rich: {
              rwing: {
                color: '#3ADCAB',
              },
              rwed: {
                color: '#1DD6FF',
              },
              rwwks: {
                color: '#FFAD32',
              },
              rwyc: {
                color: '#EC7C83',
              },
            }
          },
          itemHeight: 12,
          itemWidth: 12,//图例标记的图形高度(可根据icon的大小设置)
          itemGap:8,//图例每项之间的间隔
          myChart:null,
          data: [
            {
                name:'任务中',
                // icon:`image://${imgUrl}`,//格式为'image://+icon文件地址'，其中image::后的//不能省略
                icon:`image://${require('@/assets/img/echart/rwing.png')}` //格式为'image://+icon文件地址'，其中image::后的//不能省略
            },
            {
                name:'已完成',
                icon:`image://${require('@/assets/img/echart/rwed.png')}`
            },
            {
                name:'未开始',
                icon:`image://${require('@/assets/img/echart/rwwks.png')}`
            },
            {
                name:'任务异常',
                icon:`image://${require('@/assets/img/echart/rwyc.png')}`
            }
          ],
          formatter: function (name,id) {
            let str,temp;
            for (let i=0;i<data.length;i++){
              if (data[i].name==name){
                // str = name + ' ' + data[i].value
                str=data[i].value
              }
            }
            // return str
            if (name=='任务中') {
              temp="{name|" +name +"} {rwing|"+str+"}"
            }else if(name=='已完成'){
              temp="{name|" +name +"} {rwed|"+str+"}"
            }else if(name=='未开始'){
              temp="{name|" +name +"} {rwwks|"+str+"}"
            }else if(name=='任务异常'){
              temp="{name|" +name +"} {rwyc|"+str+"}"
            }
            return temp
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            center:['35%','50%'],
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.dataList,
            color:  ['#FFAD32', '#1DD6FF','#3ADCAB','#EC7C83',],
          }
        ]
      }
    }

对于图例字体颜色的设置还有一种方式就是，假如图例有一项是固定的，如下图

这样的就可以，在lengend 中配置data属性，data里面定义各图例的文本，以及该文本对应的样式

代码007普通

打赏 收藏 海报 链接