echarts：通过自定义工具栏来实现一些功能

前言

通常当柱状图数据过多时一般会添加一个滑块，如下图：

最近客户提出了一个要求，一开始显示的是前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
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

效果图

关于位置、图标样式可以自己定义。

功能

从上面可以看到，每一个图标都有一个点击事件。然后我们可以借助官方提供的action 来实现

myChart.dispatchAction({
    type: 'dataZoom',
    // 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0
    dataZoomIndex: 0,
    // 开始位置的数值
    startValue: 6,
    // 结束位置的数值
    endValue: 7
});
1
2
3
4
5
6
7
8
9

完整代码

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

效果图

注意点：
关于起始值、结束值的初始值是几与你滑块的方向有关是水平还是垂直。另外还与滑块的位置有关，滑块一开始是上面还是下面。

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;
     });
 });
1
2
3
4
5
6
7
8
9

不要直接使用滑块回调的参数，有问题，很难进行处理。使用getOption()来获取，这是最方便的