ECharts 饼图切换数据源bug 开始没数据显示 切换或刷新后显示

简介: ECharts 饼图切换数据源bug 开始没数据显示 切换或刷新后显示

1、出现问题原因

一个饼图,右上方两个按钮分别为今天和本月,分别调用不同接口控制,点击则调用不同接口同时饼图绑定数据源刷新;出现此问题原因点击今日按钮有一个饼图区域形没有数据不显示,对应数据值比例都没显示,点击本月按钮时此饼图区域有数据,再次切回今日按钮时刚才没显示的饼图区域显示提示信息且值为0

2、解决办法

echarts每次初始化绘图都会创建实例

image.gif在初始化前,移除echarts.init 创建的实例echartsInstance

image.gif

具体代码如下:

document.getElementById('chart的Id').removeAttribute('_echarts_instance_') // 解决饼图无数据信息(占比为0)首次加载不出来,或者切换页面后,需要强刷新才能出来的问题
// 在初始化之前
this._initPieChart(pieData)
image.gif

如上,问题解决。

3、参考文档

echarts重新加载数据没有绘出图

echarts绘制图表,切换页面后返回,无刷新数据图表不显示问题

4、附录

1、还有的同学饼图数值为0时标签应该显示如下图的但是未显示

image.gif

这可能与饼图的所占区域布局有关遮住了label的显示,可调整series的radius或center属性适当调整即可,关于radius和center属性详解见下图

image.gif

2、还有的同学就是不想让为0的数据显示,可以参考以下文章

解决echarts饼图不显示数据为0的数据

以上就是ECharts 饼图切换数据源bug 开始没数据显示 切换或刷新后显示的介绍,做此记录,如有帮助,欢迎点赞关注收藏!

目录
相关文章
|
4月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
493 1
|
5月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
256 23
echarts地图数据信息流向图效果
|
4月前
|
JavaScript API
Echarts中单独为每个legend图例设置样式-根据数据正负显示不同样式
通过上述方法,我们便能够在ECharts中根据数据的正负为每个图例项设置不同的样式,增强了图表的可读性和表现力。这种方法虽然略显间接,但不失为一种灵活的解决方案。
478 2
|
5月前
|
数据格式
ECharts 饼图
本章节我们将绘制饼图。
100 15
|
4月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
1051 0
|
4月前
|
XML 前端开发 数据库
echarts饼图前后端代码SpringCloud+Vue3
echarts饼图前后端代码SpringCloud+Vue3
48 0
|
6月前
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示
|
6月前
|
XML SQL JavaScript
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。
在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
|
6月前
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
83 0
|
6月前
Echarts——饼图折线图柱状图相互转换
Echarts——饼图折线图柱状图相互转换
181 0

热门文章

最新文章