前言
通常當柱狀圖資料過多時一般會添加一個滑塊，如下圖：
最近客戶提出了一個要求，一開始顯示的是前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',
// 可選，dataZoom 元件的 index，多個 dataZoom 元件時有用，預設為 0
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',
// 可選，dataZoom 元件的 index，多個 dataZoom 元件時有用，預設為 0
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',
// 可選，dataZoom 元件的 index，多個 dataZoom 元件時有用，預設為 0
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,
// 那一條y軸的滑塊
yAxisIndex: 0,
// 目前資料視窗外的資料，被 設定為空
filterMode: 'empty',
// 滑塊的寬高
width: 15,
height: '70%',
// 滾動條內空白顯示
showDataShadow: false,
// 滑塊的位置
left: '95%',
// 起始位置 類目軸表示下标
startValue: 10,
// 結束位置
endValue: 8,
// 鎖定選擇區域的大小 最多顯示3個類目
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()
來擷取，這是最友善的