一、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()
})