最近在做一个数据看板的项目,项目涉及很多数据可视化图表的功能,我采用的是百度的 Echarts,这里记录一下项目使用过程中遇到的一些问题和解决方案
echarts 版本为4.6.0
1、将柱状图的点击事件范围扩大到阴影部分
this.myChart.on('click', (params) => {
// 点击事件
})
通过上面的代码注册点击事件后发现,事件只在点击柱状图时生效,点击阴影部分并不会触发
这样就带来了一个问题,如果数据量比较小,会导致柱状图点击事件难以触发,体验比较差,所以需要让柱状图的阴影部分也能响应点击事件
- 解决办法:getZr()
this.myChart.getZr().on('click', (params) => {
const pointInPixel = [params.offsetX, params.offsetY]
if (this.myChart.containPixel('grid', pointInPixel)) {
// 获取当前点击的x轴索引
const xIndex = this.myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]
}
})
2、图表点击事件多次触发问题
该问题有上一问题衍生而来,当我从渠道切换到品牌的时候,发现上面注册的点击事件触发了两次,切换3次就触发3次,到这里大概就知道是由于多次注册事件而引发的问题了
- 解决办法:注册事件之前先off掉
this.myChart.getZr().off('click')
this.myChart.getZr().on('click', (params) => {
const pointInPixel = [params.offsetX, params.offsetY]
if (this.myChart.containPixel('grid', pointInPixel)) {
// 获取当前点击的x轴索引
const xIndex = this.myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]
}
})
3、饼图文本超出被隐藏问题
如图,文字“ODM产品”超出容器被截断
- 解决:series里的label设置alignTo的对齐方式,仅当 position 值为 'outer' 时有效
const option = {
// 省略其他代码
series: [
{
label: {
// 增加代码
position: 'outer',
alignTo: 'edge',
margin: 10
}
}
]
}
4、dataZoom 显示固定数量
dataZoom: [{
type: 'inside',
realtime: true,
start: 0,
end: 50
}, {
show: true,
realtime: true,
height: 18, // 这里可以设置dataZoom的尺寸
bottom: 6
}]
dataZoom常见设置都是设置start和end来圈定窗口范围的百分比,设置0-50也就是50%的显示范围,坏就坏在这个百分比上,现在我的数据一共只有5条,所以这里显示了3条数据,看起来没什么异样
当数据一多的时候,例如有200条数据
这时候的界面。。。
产品经理已经提刀来问了,能不能默认显示5条数据?
- 解决办法:startValue、endValue
dataZoom: [{
type: 'inside',
realtime: true,
startValue: 0,
endValue: 5-1 // 显示5个,需要-1
}, {
show: true,
realtime: true,
height: 18, // 这里可以设置dataZoom的尺寸
bottom: 6
}]
如果需要禁止滚动条缩放可以设置zoomLock为true
5、页面切换后回来,图表空白
切出去别的页面后改变窗口大小,这时会触发图表的resize事件,由于页面缓存,图表获取不到缓存页面的DOM,所以echarts没有重新渲染导致空白。知道了原因后我们可以这样解决:
activated() {
window.dispatchEvent(new Event('resize'))
}
在 activated 重新触发触发 resize 即可。