使用echarts多个饼图时，遇到的bug

最新推荐文章于 2024-07-13 21:33:14 发布
最新推荐文章于 2024-07-13 21:33:14 发布
阅读量4.1k 收藏 4
点赞数 1
分类专栏： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42816550/article/details/93500762
版权

在这里插入图片描述
点击武定后
在这里插入图片描述

当第二次加载的数据覆盖等量的第一次的数据时，第一次加载多余的数据不会丢失，还会展示在图上。console输出echarts中的option的数据legend和series数据均为正常第二次加载的数据，数据已更新，也触发了echarts的渲染。
解决办法：

this.charts.setOption(option);
应为this.charts.setOption(option,true);

setOption有3个属性setOption(option,notMerge,lazyUpdate);第二个notMerge默认为false,即默认合并两个数据，置为true之后则不合并数据

渣渣枫!
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts 多饼图
10-23
Echarts 多饼图
echarts不一样的饼图
weixin_41897680的博客
05-24 553
echarts不一样的饼图
ECharts饼图技巧：打造断开的环形图
qq_36463299的博客
07-08 587
通过上述步骤，我们可以实现一个具有断开效果的环形图。这种图表不仅可以提供传统饼图的所有功能，还可以通过断开部分扇区来吸引观众的注意力或展示更多的数据信息。
echarts关于一次性绘制多个饼图 (基于vue3)
m0_69097184的博客
10-15 2767
在echarts中，`dataset` 和 `source` 是用来配置数据的选项。是一个包含数据相关配置的对象，用于指定数据的来源和格式。它可以包含多个维度的数据集，每个维度都可以有自己的名称和数据。是 `dataset` 中的一个子项，用于指定数据的具体内容。在这个例子中，`source` 的值是一个二维数组，表示具体的数据。每一行代表一个数据条目，每一列代表一个维度。数据格式为dataset: {source: [
echarts在一个div图例中显示多个饼图。实例
AlinMa的博客
03-13 2万+
var myChart = echarts.init(document.getElementById("1"));myChart.setOption({               backgroundColor: '#f7f7f7',//背景颜色               tooltip : {                   show: true,                   f...
Echarts中饼图进阶使用-多饼图
2203_75599803的博客
04-02 949
Echarts中的多饼图是一种将多个饼图组合在一起展示的图表类型，可以同时比较不同组的数据占比和相对关系。
Echarts 多环饼图实现
weixin_53858977的博客
05-11 920
经两个（或以上）的数据种类，通过radius设置图形的半径堆叠出图形，itemStyle隐藏多余图形等方式渲染出图形大致形状，按自身实际业务场景完成配置后，按对应数据结构注入相应的数据即可实现
ECharts3.0饼状(多个饼状图)之三------------手把手教你每一项的样式设计
jianchileiliang的博客
12-02 6122
刚到公司接到一个几乎全是图表的项目,之前从没接触过EChart,不得以慢慢学 现在把我的经验贡献出来   代码及详细解释如下: div class="membersickchart" style="width: 550px;height:316px;position: relative"> 患病率--> div class="m
记一次echarts饼图-鼠标移到图形上出现闪动的问题解决方法
tangqiuyan521的专栏
02-25 3437
很久没有用echarts做图表了，很多东西都忘记了，这次主要是做一次记录 echarts做成的饼图，鼠标移到相应的饼图上会出现闪动的问题，主要还是我自己把颜色配置的位置放错了，会出现闪动的option如下： { color: ["rgb(224 22 22 / 60%)", "rgba(195, 46, 255, .6)", "rgb(45 57 191 / 60%)", "rgb(134 213 239 / 60%)", "rgb(61 191 45 / 60%)","rgb(...
vue中使用echarts与echarts-gl 实现3D饼图环形饼图
weixin_47336389的博客
12-29 1万+
vue脚手架中安装echarts与echarts-gl，在vue页面中引入使用，实现3d饼图 环形图，移动上去有效果的那种
在前后端分离的项目中使用echarts展示分析结果，卡住了，如何继续？
最新发布
**My Coding Family**
07-13 353
🏆本文收录于《CSDN问答解惑-专业版》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！
web单页面实现多个echarts图表铺满整个div(柱状图，折线图，饼形图……)
05-19
最近针对web端实现单页面展示多个echarts图表，更直观的展示数据的变化，响应式
echarts复合饼图，堆叠柱状图
12-08
echarts复合饼图（没有边线），堆叠柱状图，柱状图
uniapp-Echarts.zip
07-25
uni-app是一个多端开发框架，允许开发者用一套代码同时发布到iOS、Android、H5、小程序等多个平台。Echarts则是一个基于JavaScript的数据可视化库，提供了丰富的图表类型，如柱状图、饼图等。"Uniapp-Echarts组件包...
ECharts地图中tooltip提示框通过formatter分别显示多个数值
热门推荐
GiScript的博客
08-09 7万+
Echarts官方实例中 地图  最后一个是 iphone销量的全国地图    实例链接 但是tooltip提示框组件里默认显示的数量信息是所有value的和，而不是每一个单独展示。 现在我们想要分别显示iphone3，iphone4，iphone5的值，只需要修改tooltip即可。 //官方实例tooltip tooltip: {         trigger: 'item
echart饼图渲染多组数据
q18852548808的博客
09-01 1761
准备好数据barDats 2.定时器 3.Echart饼图 4.饼图的数据 数组for循环到哪个数据，把该数据给饼图。当for循环到最后一个，再从0开始 实现一直循环，返回各个饼图的数据 5.datas数据怎么来的 6.源码 function getCustEcah(barDatas) { console.log("====") console.log(barDatas) let index =0; ...
echarts之饼图
star的博客
03-16 839
echarts.vue 1.初始化视图 最好使用vue框架中自带的ref，之前是用的html的id 初始化视图，pieOut指向ref： data() { return { pieOut: null, } } methods: { initPieOut() { this.pieOut = this.$echarts.init(this.$...
VUE Echarts 饼图 - 组件化, 多饼图
学习笔记
03-08 2161
前言: 由于有地方需要使用饼图展示, 就搜索了下, 发现Echarts 很好用. 就直接拿来用了. Echarts官网 https://echarts.apache.org/zh/index.html Echarts安装 npm install echarts --save 饼图组件 <template> <div class="pieChart" :id="id"></div> </template> <script> import
根据数组长度动态生成多个echarts饼状图
xh888zw的博客
06-10 710
根据数组长度动态生成多个echarts饼状图
echarts多个饼图轮播
06-06
如果你想要实现echarts多个饼图轮播的效果，可以使用setInterval()函数和echarts的API实现。具体步骤如下： 1. 首先创建一个包含多个饼图数据的数组，每个饼图数据包含饼图的名称、数据等信息。 2. 创建一个echarts实例，并设置好饼图的基本配置，例如：title、tooltip、legend等。 3. 创建一个函数，用于更新饼图的数据和option配置。在该函数内部，使用echarts提供的setOption()函数更新数据和配置。 4. 使用setInterval()函数定时调用上述函数，实现饼图轮播的效果。为了更好的体验，建议在饼图之间添加一个过渡动画效果。 下面是一个简单的实现示例代码： ```javascript var pieData = [{name: 'pie1', data: [...]}, {name: 'pie2', data: [...]}, {name: 'pie3', data: [...]}, ...]; var currentIndex = 0; var chart = echarts.init(document.getElementById('chart')); function updateChart() { currentIndex = (currentIndex + 1) % pieData.length; var pie = pieData[currentIndex]; var option = { title: {text: pie.name}, series: [{ type: 'pie', data: pie.data }] }; chart.setOption(option, true); } setInterval(updateChart, 3000); ``` 在上述代码中，我们定义了一个包含多个饼图数据的数组pieData，然后创建了一个echarts实例chart，并设置好基本配置。接着定义了一个updateChart函数，用于更新饼图数据和option配置。最后使用setInterval()函数每隔3秒调用一次updateChart函数，实现饼图轮播的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值