一、bar滚动条及固定间隔
dataZoom: [
{
type: 'slider',
show: true,
minValueSpan: 12,
maxValueSpan: 12,
startValue: 0, // 初始显示值
endValue: 12, // 一页展示的条数
height: 10, //组件高度
left: '5%', //左边的距离
right: '4%', //右边的距离
bottom: 50, //底边的距离
borderColor: '#fff',
fillerColor: '#6666664d',
borderRadius: 5,
backgroundColor: '#fff', //两边未选中的滑动条区域的颜色
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: 'filter'
}
],
xAxis: {
// 柱子之间间隔的宽度为一页十三条间隔的宽度
max: bingQuData.length > 13 ? bingQuData.length : 13,
}
二、通用echarts点击事件
this.chart.on('click', function (params) {
fun()
})
二、点击扇形图legend不关闭图但是触发点击事件
let chart = this.chart
this.chart.on('legendselectchanged', function (params) {
chart.setOption({
legend: { selected: { [params.name]: true } }
})
fun()
})
三、柱状图整根柱子触发事件
在echars bar中，点击事件只对有数据的范围点击有效。在数据量较小的时候，用户有时候会点击不上。这是需要对整个柱子的范围都能点击
// 柱状图在数据少的情况下点击不方便，以下拿到了点击的条数
_this.leftChart.getZr().on('click', function (params) {
let xIndex = 0
const pointInPixel = [params.offsetX, params.offsetY]
if (_this.leftChart.containPixel('grid', pointInPixel)) {
// 获取到点击数据的下标
xIndex = _this.leftChart.convertFromPixel({ seriesIndex: 0 }, [
params.offsetX,
params.offsetY
])[0]
}
if (data[xIndex]) fun()
})
