echarts
一只小菜鳥
这个作者很懒,什么都没留下…
展开
-
echarts点击图表事件和鼠标悬浮事件
在使用echarts开发过程中,经常会遇到一些需求就是点击图表或者鼠标悬浮在图表上有接下来的相关动态操作,只需将获取的echarts实例添加监听事件即可实现。鼠标点击echarts图表const myChart = echarts.init(document.getElementById("myChart"))myChart.on("click",function(params){ console.log(params) //这里的params是鼠标点击的图表节点的数据})鼠标点击echa原创 2021-04-07 10:13:27 · 8045 阅读 · 1 评论 -
echarts更新数据不重新绘制图表
在使用echarts进行可视化图表的开发时,由于option配置项配置项太多,在进行一些动态操作时我们一般情况下都是去直接更新series里面的数据来更新页面图表的数据。这就产生了一个问题,当series里面的数据条数不相等时,再重新对获取echart实例进行setOption,当更新的数据少于之前数据时,会发现页面回遗留下之前的数据,包括图例。解决办法:给setOption这个方法加上第二个参数true,重新绘制整个图表(默认是false)配置项手册myChart.setOption(option,tr原创 2021-04-06 15:30:50 · 13503 阅读 · 4 评论 -
echarts鼠标悬浮浏览器页面抖动
在使用echarts开发可视化图表时,突然遇到了一个问题,就是刚进来这个页面时,鼠标悬浮到饼图上会有一个页面抖动的现象,再次悬浮上去就不会抖动了。查阅文档得出解决办法如下tooltip:{ transitionDuration:0,}...原创 2021-04-06 14:04:53 · 542 阅读 · 0 评论 -
echarts有数据但是无法绘制图表
碰到了一个上一任开发人员遗留下的bug,就是在第一次进页面的时候能正常渲染echarts图表,当请求接口数据发生改变时发现页面上一片空白啥都没有如下图;前一任留下的代码类似下面这种 <div id="chart" style="position: relative; width: 500px; height: 500px;margin: auto;"> </div><div style="text-align: center"> <but原创 2020-12-10 15:01:50 · 4806 阅读 · 2 评论