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

已于 2023-04-09 14:49:00 修改
阅读量4k 收藏 8
点赞数 1
文章标签： echarts 前端 javascript
于 2023-03-03 11:03:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Coco_998/article/details/128183452
版权

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里面定义各图例的文本，以及该文本对应的样式

简宁909
关注
Vue中使用ECharts，ECharts中Option更新时Chart没有重新绘制和其他问题
FpwgTcl的博客
09-18 1434
在Vue项目中使用ECharts进行数据可视化是一种常见的做法，然而，有时会遇到一些问题，比如当ECharts的Option更新时，Chart没有重新绘制，或者出现其他一些问题。当ECharts的Option更新时，Vue组件中的Chart应该重新绘制以反映最新的配置。为了做到这一点，我们可以在Vue组件中使用计算属性来生成动态的Option，并在数据变化时自动更新Chart。除了Chart没有重新绘制的问题，还可能会遇到其他一些与Vue和ECharts的集成相关的问题。选项，可以用于监听数据的变化。
uniapp中使用echart，单个或者多个，封装组件后echart图表不刷新
Femi的博客欢迎大家
11-05 1952
此文以饼图数据为例： 对于单个图标渲染，只需要在结构和js中插入以下代码即可 <view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts-pie"></view> 设置变量： option: { graphic: [{ //环形图中间添加文字 ...
如何在 ECharts 中实现实时数据更新与动画效果
最新发布
09-11 1023
通过上述代码，你可以实现 ECharts 中的实时数据更新与动画效果。只需定义一个更新逻辑，通过定时器周期性地向图表添加新数据，同时使用setOption方法更新图表配置，从而生成动态、实时变化的可视化效果。你可以根据需求进一步调整样式和配置，以满足特定的项目要求。
项目踩坑之Echarts数据视图不更新问题
qq_45799465的博客
04-15 1万+
Echarts无法同步更新视图问题及解决方法
echarts第一次正常渲染，第二次不能渲染（二次不渲染）
huai42717的博客
11-13 1974
在使用vue模板中需要echarts图表就重新写了一个，发现第一次能渲染，但点击其他页面在点击回来就不渲染了。图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染。echarts每次绘制都需要创建一个Echarts的实例，返回echartsInstance。echarts的渲染是从setOption中开始的，不是从echarts.init()开始。
echarts数据更新了图表没更新
song_Web的博客
11-15 2516
做折线图图表时遇到如下多选框选中值变化，数据更新，但是图表没更新的问题
echarts 解决图表不更新渲染问题
ljjpaopao的博客
09-14 1352
在做关于echarts项目时常常会遇到，套用组件时，明明拿到了数据，图表数据效果却渲染不出来的情况。 在检查有关数据设置没问题之后，我们可以用watch监听对应的获取数据，开启deep和immediate后，将原option中的相关设置复制过来再次赋值，给与到对应的option中的data，lable或其他设置项中，以保证图表能重新渲染
Vue-echarts 更改配置options没有触发视图更新问题解决——配置notMerge:true
japlus的博客
07-22 7872
前提 echart@5.1.2 vue-echarts@6.0.0-rc.6 vue-echarts是个将echarts封装为vue组件的包 引入后，代码中可以使用<v-chart :option="chartOption"/>来绘制表格 现象 this.chartOption更改后，如果内容比原来多，则会触发更新，反之不会。 例如点击按钮后将this.chartOption设置为空对象{}，发现图表并未更新。 this.chartOption输出发现已改变。 调查 根据官.
Echarts重新加载数据但不重新渲染的原因和解决方法
weixin_42365757的博客
10-26 9768
Echarts重新加载数据但不重新渲染的原因和解决方法
下拉框选择事件动态加载echart数据
09-11
当请求成功并返回JSON数据后，我们将新数据应用到ECharts的option对象中，并调用`setOption`方法刷新图表。 在实际应用中，我们还需要考虑错误处理和数据格式的兼容性。确保在请求失败时提供合适的提示，并确保从...
解决echarts echarts数据动态更新和dataZoom被重置问题
11-20
1.全局绑定滚轮事件，获得dataZoom最新的位置： myChart.on('dataZoom',function(event){ ...2.把最新的start和end赋值给要更新的option window.setInterval(function () { num=Math.random()*num+100; d
echart实现定时自动刷新数据
jumptigerfu的博客
03-02 6694
这里我要实现的是前端实现类似加速小球样式的内存容量监控图像 echart部分代码: <div class="ibox-content"> <div class="echarts" id="main"></div> </div> js读取后端发来的json数据,js代码(这个放在html的开头): setInterval(function () {
vue-cli3使用Echart动态渲染数据 轮询获取后台数据
ryan55的博客
03-17 2414
实现效果 采用轮询的方式向后台获取数据，然后动态将数据赋值给Echart饼状图的option.series[0].data数据，前端网页做出相应的改变 准备工作 进Echart官网选择适合的图，这里以Doughnut Chart饼状图为例。 1.导入Echart,在script里导入 import echarts from 'echarts' 2.给Echart一个大小 <div id...
解决echarts数据更新，页面不刷新问题
qq_46738283的博客
09-15 1512
this.charts.setOption(data,true)，这里setOption有3个属性，setOption(option,notMerge,lazyUpdate);第二个notMerge默认为false,即默认合并数据，设置成true之后就不合并数据，从而实现刷新页面的效果。
echarts中setOption没有重新渲染表格，导致图表显示有问题？
热门推荐
纸上得来终觉浅
09-11 1万+
问题：echarts中setOption没有重新渲染表格，导致图表显示有问题说明： 使用的是折线图 第一次渲染的是三组数据，显示三根线。 切换后数据调整为两组，但是图表仍然显示三根线。 排查后数据源没有问题，但是显示有问题，猜测是echarts问题，查找资料发现没有重新渲染。解决方法： myChart.setOption(chartOption,true); 第二个参数设置为true参考链
使用vue-echarts绘图更新option视图不更新问题
XIAO_A_fighting的博客
01-03 3264
在更新echarts视图的配置项时，在对echarts图本身的配置项进行修改的时候，删除新增的图表配置，视图并不会更新，查看原因之后可以发现是因为对于echarts来说，为了提升效率，会自动将图表的option与之前的option进行合并， 但是当图表，根据传进来的option变化的时候，比如折线图当传进来两列数据的时候绘制一条线，传进一列数据时就绘制一条线。
echarts数据更新没反应解决方案
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中...
06-05 1099
【代码】echarts数据更新没反应解决方案。
echart实时更新数据不重新渲染绘图
06-14
要实现 Echart 实时更新数据不重新渲染绘图，可以通过以下两种方式实现： 1. 使用 Echart 提供的 API，即 setOption 方法，通过更新数据来实现实时更新。具体实现方法为，先初始化 Echart 实例，然后在需要更新数据的时候，使用 setOption 方法，只传递需要更新的数据部分，而不是整个 option 对象。 2. 使用 WebSocket 技术，将后台实时推送的数据通过 WebSocket 推送到前端，然后通过 Echart 提供的 addData 方法，将新数据添加到已有数据的末尾。这样可以实现数据的实时更新，而不需要重新渲染整个图表。 需要注意的是，在使用 addData 方法时，需要先设置好 x 轴的数据类型和数据格式，以便正确地解析新的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值