项目踩坑之Echarts数据视图不更新问题

已于 2023-05-12 10:33:47 修改
阅读量1.1w 收藏 6
点赞数
分类专栏： 项目踩坑 文章标签： vue.js 前端 echarts javascript
于 2022-04-15 20:50:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45799465/article/details/124203486
版权
本文介绍了Echarts在数据更新后未能实时反映到视图中的问题，并提供了解决方法：通过重新设定Echarts的series数据来触发视图更新。示例代码展示了如何在获取后台数据后，正确设置Echarts图表的series数据，从而实现动态数据的展示。
摘要由CSDN通过智能技术生成

问题描述

Echarts检测到数据更新不会立即更新相应的视图。也就是说即使series中data

或者value的值发生变化，Echarts也不会发生改变。

​​​​解决方法

发送请求获取数据以后重新定义Echarts的series中的data值或者value值。

完整代码：

<template>
  <div class="lineargraph">
    <div id="bug"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { thirdAxios } from "../../../api/BackstageApi";
export default {
  mounted () {
    this.change()
  },
  methods: {
    change(){
      var myChart = echarts.init(document.getElementById("bug"));
      myChart.setOption({
        title: {
          text: "用户增长分布图",
          left: "20px",
          top: "18px",
          // 标题样式
          textStyle: {
            fontSize: 20,
            fontWeigth: 600,
            color: "black"
          }
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["新增用户", "活跃用户", "临时停车用户"],
          top: "12%",
          right: "30%"
        },
        // 整个折线图位置调整
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        // x轴的刻度及x轴的显示
        xAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          type: "category",
          boundaryGap: false,
          data: [
            "1日",
            "3日",
            "6日",
            "9日",
            "12日",
            "15日",
            "18日",
            "21日",
            "24日",
            "27日",
            "30日"
          ],
          // 背景网格图
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#cfcfcf"
            }
          }
        },
          // 背景网格图
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#cfcfcf"
            }
          }
        },
        series: [
          {
            name: "新增用户",
            symbol: "none",
            type: "line",
            smooth: true,
            data: [],
            // data:this.num1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10, // 设置线宽
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: {
                    type: "radio", 
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent" // 0% 处的颜色
                      },
                      {
                        offset: 0.4,
                        color: "#5034fe" // 100% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: "#8ac8ff" // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "transparent" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            }
          },
          {
            name: "活跃用户",
            type: "line",
            smooth: true,
            data: [],
            // data:this.num2,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10, // 设置线宽
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: {
                    type: "radio",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent" // 0% 处的颜色
                      },
                      {
                        offset: 0.4,
                        color: "green" // 100% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: "red" // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "transparent" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            }
          },
          {
            name: "临时停车用户",
            smooth: true,
            type: "line",

            data: [],
            // data:this.num3,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10, // 设置线宽
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: {
                    type: "radio",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent" // 0% 处的颜色
                      },
                      {
                        offset: 0.4,
                        color: "#fd972e" // 100% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: "#f6bc6b" // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "transparent" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            }
          }
        ]

      })  
// option结束


thirdAxios().then( res =>{

if(res.code == 200){
  
let arr1 = res.data.num1;
let arr2 = res.data.num2;
let arr3 = res.data.num3;
// console.log(arr1,arr2,arr3);

myChart.setOption({
  series: [
          {
            name: "新增用户",
            symbol: "none",
            type: "line",
            smooth: true,
            data: arr1,
            // data:this.num1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10, // 设置线宽
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: {
                    type: "radio",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent" // 0% 处的颜色
                      },
                      {
                        offset: 0.4,
                        color: "#5034fe" // 100% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: "#8ac8ff" // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "transparent" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            }
          },
          {
            name: "活跃用户",
            type: "line",
            symbol: "none",
            smooth: true,
            data: arr2,
            // data:this.num2,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10, // 设置线宽
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: {
                    type: "radio",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent" // 0% 处的颜色
                      },
                      {
                        offset: 0.4,
                        color: "#8cc265" // 100% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: "#6bdb20" // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "transparent" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            }
          },
          {
            name: "临时停车用户",
            smooth: true,
            type: "line",
            symbol: "none",
            data: arr3,
            // data:this.num3,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 10, // 设置线宽
                  type: "solid", //'dotted'虚线 'solid'实线
                  color: {
                    type: "radio",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "transparent" // 0% 处的颜色
                      },
                      {
                        offset: 0.4,
                        color: "#fd972e" // 100% 处的颜色
                      },
                      {
                        offset: 0.6,
                        color: "#f6bc6b" // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "transparent" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            }
          }
        ]
})

}
} )
      
    }
  }

}
</script>
<style lang="less" scoped>
.lineargraph {
  height: 400px;
  width: 100%;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 1px 1px 3px 0 #848b7f;
    background: white;

  #bug{
    width: 100%;
    height: 100%;
    // background: red;
  }
}
</style>

运行结果：

 用户增长分布图会根据后端生成的随机数据进行更改。

大聪明码农徐
关注
专栏目录
echarts异步数据加载MySQL_微信小程序 Echarts 异步数据更新
weixin_42364609的博客
02-23 373
微信小程序 Echarts 异步数据更新的练习，被坑了很多次，特作记录。作者：罗兵地址：https://www.cnblogs.com/hhh5460/p/9989805.html0、效果图 1、视图2、设置//index.json{"usingComponents": {"ec-canvas": "../../components/ec-canvas/ec-canv...
从柱状堆叠图带你入门Echarts
qq_40597589的博客
10-19 988
前言 实习一个多月了，在部门里负责了度量模块的页面编写，主要涉及的技术就是Echatrs。在此之前，我只稍微接触过python的数据可视化，并没有接触过Echarts。不过现在将度量模块的几个页面写下来，已经可以说是入门了，本文从图的展示需求着手，以柱状堆叠图的各种需求图为例，一步步带你们了解Echarts Echarts入门 1 安装 ①输入npm install echarts安装 ②然后在main.js中全局引入import echarts from "echarts"，Vue.prototype.
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
01-21
1.问题描述：在echarts弹框中嵌入echarts，在页面数据改变时，echarts视图不更新； 2.解决办法： 数据更新时以为drawLine()函数在updated()里面执行（这种情况之前碰到过），后来发现热更新之后视图更新了，所以跟周期函数没有关系；参考了一下网上的一些资料，发现可以用vue中的watch()函数来监听数据的更新，一旦数据更新了，那么就在watch()函数中调用drawLine()函数，发现视图更新了，完美解决。 补充知识：vue echarts line动态刷新数据组件 我就废话不多说了，大家还是直接看代码吧~ <template> <div class=
针对Echarts图表存在数据缓存问题的解决方法
龚箭的博客
02-21 5048
在项目中发现，使用一个echarts图表切换不同数据是，有时会莫名的多出数据组。 1、针对这个问题可以在切换事件中清空echarts的画布数据。 var myChart = echarts.init(document.getElementById('绑定HTML元素的id')); myChart.clear(this.option); //清空当前画布所有数据 2、尽量使用对对象赋值的方...
echarts清理div元素重新赋值，刷新的时候或者交互的时候使用
最新发布
2302_77435585的博客
09-24 454
else {
echarts数据更新没反应解决方案
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中...
06-05 1125
【代码】echarts数据更新没反应解决方案。
echarts遇到数据更新，视图未更新两种解决方法
KMINLIKE的博客
03-01 2213
方法二： setOption有3个属性，setOption(option,notMerge,lazyUpdate);第二个notMerge默认为false,即默认合并数据，设置成true之后就不合并数据，从而实现刷新页面的效果。方法一：添加 trendcharts.clear() 是清空当前实例，会移除实例中所有的组件和图表。
vue3 中使用echarts数据不更新问题
qq_41978004的博客
04-11 1316
折腾一下午，naive-ui中使用echarts数据不更新，不说那么多，直接上代码。子组件中BarChart.vue。父组件index.vue。
echart从后台返回数据，但是数据不更新的解决办法
qq_46199553的博客
06-12 2657
echart表格不更新的解决办法
Vue+TS 踩坑记录与方案总结
HTML网页设计
08-08 1297
vue 和 TypeScript 结合的情况下，很多写法和我们平时的写法都不太一样，这里总结我项目开发过程中遇到的问题和问题的解决方案。
解决echarts echarts数据动态更新和dataZoom被重置问题
11-20
1.全局绑定滚轮事件，获得dataZoom最新的位置： myChart.on('dataZoom',function(event){ if(event.batch){ start=event.batch[0].start; end=event.batch[0].end; }else{ start=event.start; end=event.end; }; }); 2.把最新的start和end赋值给要更新的option window.setInterval(function () { num=Math.random()*num+100; d
java项目中可以封装的组件_封装属于自己的组件库
weixin_42109639的博客
03-02 1901
封装属于自己的组件库 - VUE「适合人群：一起聊聊组件这件事」「观看时间：30min」「说明：一些经验分享，欢迎探讨」前言现目前，vue 社区下大大小小的组件库是越来越多，优秀的开源组件也越来越丰富，比如PC：View ui,Element ui, BootstrapVue ,Ant Design Vue,微软的MS Design，地图的：vue-baidu-map,vue-amap，图表的vu...
vue赋值成功后再回调_vue的数据赋值联动改变解决方案
weixin_39524247的博客
01-13 1162
最近连着做了好几个vue项目，从0到版本迭代，vue教程算是好理解，把vue官方文档看一遍下来，基本上不会有什么大问题(嗯如果你看的够仔细够透彻的话)，此篇是记录vue踩过的坑以及可以优化的地方。1.踩坑1.1.深拷贝/浅拷贝这实际上算不上vue的问题，算是js基础没打好的坑吧。先来看一个简单的例子：let obj = {name:'fiona-SUN'};let copyObj = obj;co...
echarts数据更新了图表没更新
song_Web的博客
11-15 2544
做折线图图表时遇到如下多选框选中值变化，数据更新，但是图表没更新的问题
e-charts 动态更新数据视图不更新
weixin_44523427的博客
11-03 342
切换 父母 子女 视图 动态更新 。 遇到 两个问题 1 视图 数据没有动态更新 2 70岁（男性） 那个 mark point 定位不准 解决1 echart 有个ismerge 的属性 需要设置为 true 解决2 每次 加载 数据 设一个loading 就可以了 ...
echarts数据更新，图表不更新
qq_31404277的博客
05-25 4466
原地址： echarts图表地址 原图： 效果图： 问题：当数据更新时，头部标签不会更新。 代码： var myChart1 = echarts.init(document.getElementById("echartContainer1")); console.log(this.source_data1) myChart1.setOption({ tooltip: {},
echarts - 数据更新但图表不更新
kelly0721的博客
02-22 2025
echarts重绘、setOption
echarts 图表渲染数据 页面不更新
Mature的博客
01-30 1349
【代码】echarts 图表渲染数据 页面不更新。
Vue中ECharts数据更新视图不更新的解决方法
解决Vue中ECharts数据更新但视图不更新的问题，关键在于正确地利用Vue的响应式系统，如`watch`，来监听数据变化并触发图表的重新渲染。通过这样的方式，可以确保ECharts图表在数据变更时保持与数据同步，提供良好的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大聪明码农徐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值