前言
通常当柱状图数据过多时一般会添加一个滑块，如下图：
最近客户提出了一个要求，一开始显示的是前3条数据，想看第4条数据的话可以用滑块进行拖动。可能是客户鼠标比较灵敏吧，不好操作。客户想要一个类似滚动条箭头可以点击的功能，如：
思考了很久，最终觉得可以通过 toolbox 工具栏来实现。
官方API：https://echarts.apache.org/zh/option.html#toolbox
; 实现页面布局
这里主要是接着自定义工具栏来实现，常用属性基本上就是下面这些，其他属性可以查看官方文档。
icon：图标，我这里使用的是svg格式， path:// 是固定的，后面的是svg的path属性值，就是路径
toolbox: {
show: true,
orient: 'horizontal',
itemSize: 15,
itemGap: 8,
showTitle: true,
feature: {
myLeft: {
show: true,
title: '上一个',
icon: 'path://M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z',
onclick: () => {
alert('上一个');
}
},
myRight: {
show: true,
title: '下一个',
icon: 'path://M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z',
onclick: () => {
alert('下一个');
}
}
},
iconStyle: {
color: '#869AD7'
},
right: 3
},
效果图
关于位置、图标样式可以自己定义。
功能
从上面可以看到，每一个图标都有一个点击事件。然后我们可以借助官方提供的 action 来实现
myChart.dispatchAction({
type: 'dataZoom',
dataZoomIndex: 0,
startValue: 6,
endValue: 7
});
完整代码
<template>
<div id="demo"></div>
</template>
<script setup lang="ts">
import * as echart from 'echarts';
import { onMounted, ref } from 'vue';
const start = ref(7);
const end = ref(9);
onMounted(() => {
const myChart = echart.init(document.getElementById('demo'));
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: 50,
bottom: 50,
right: 30
},
toolbox: {
show: true,
orient: 'horizontal',
itemSize: 15,
itemGap: 8,
showTitle: true,
feature: {
myLeft: {
show: true,
title: '上一个',
icon: 'path://M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z',
onclick: () => {
if (end.value < 9) {
start.value += 1;
end.value += 1;
}
myChart.dispatchAction({
type: 'dataZoom',
dataZoomIndex: 0,
startValue: start.value,
endValue: end.value
});
}
},
myRight: {
show: true,
title: '下一个',
icon: 'path://M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z',
onclick: () => {
if (start.value > 0) {
start.value -= 1;
end.value -= 1;
}
myChart.dispatchAction({
type: 'dataZoom',
dataZoomIndex: 0,
startValue: start.value,
endValue: end.value
});
}
}
},
iconStyle: {
color: '#869AD7'
},
right: 3
},
xAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
type: 'category',
data: [
'ten',
'nine',
'eight',
'seven',
'six',
'five',
'four',
'three',
'two',
'one'
]
},
dataZoom: [
{
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 15,
height: '70%',
showDataShadow: false,
left: '95%',
startValue: 10,
endValue: 8,
zoomLock: true
}
],
series: [
{
name: 'Cost',
type: 'bar',
data: [12, 23, 34, 56, 43, 67, 89, 90, 76, 29]
}
]
};
myChart.setOption(option);
});
</script>
<style lang="scss" scoped>
#demo{
width: 600px;
height: 300px;
border: 1px solid red;
padding-right: 30px;
}
</style>
效果图
注意点：
关于起始值、结束值的初始值是几与你滑块的方向有关是水平还是垂直。另外还与滑块的位置有关，滑块一开始是上面还是下面。
bug
之前忽略了一个问题，就是当滑块滑动后要更新开始值和结束值。可以通过给滑块添加监听事件
myChart.on('datazoom', params => {
this.$nextTick(() => {
console.log(params,this.start,this.end);
console.log(myChart.getOption());
this.start = (myChart.getOption()).dataZoom[0].startValue;
this.end = (myChart.getOption()).dataZoom[0].endValue;
});
});
不要直接使用滑块回调的参数，有问题，很难进行处理。使用 getOption()来获取，这是最方便的
Original: https://blog.csdn.net/weixin_41897680/article/details/127803495
Author: @我不认识你
Title: echarts：通过自定义工具栏来实现一些功能
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/656407/
转载文章受原作者版权保护。转载请注明原作者出处！