echarts设置tootip轮播切换展示（vue3搭配vue-echarts复制粘贴即用）
水冗水孚发表于 2023-10-10 15:18:20
长话短说，先看效果
效果图
思路
- 来一个定时器
setInterval每隔一秒触发一次showTip展示tootip - 关键代码如下：（派发一次，就弹出一次
tootip） tootip切换就是更改一下数据的下标索引dataIndex
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: i
})- 最后当鼠标移入进去以后，再取消定时器轮播即可
- 当然，需要绑定一些鼠标事件
完整代码（复制粘贴即可使用）
option配置项
数据在option中的dataset里面
const option = ref({
"legend": {
"show": true,
"top": "5%",
"textStyle": {
"color": "#B9B8CE"
},
"pageTextStyle": {
"color": "#B9B8CE"
},
"orient": "horizontal",
"itemGap": 14,
"padding": -14
},
"xAxis": {
"show": true,
"name": "",
"nameGap": 15,
"nameTextStyle": {
"color": "#B9B8CE",
"fontSize": 12
},
"inverse": false,
"axisLabel": {
"show": true,
"fontSize": 12,
"color": "#B9B8CE",
"rotate": 0
},
"position": "bottom",
"axisLine": {
"show": true,
"lineStyle": {
"color": "#B9B8CE",
"width": 1
},
"onZero": true
},
"axisTick": {
"show": true,
"length": 5,
"alignWithLabel": true
},
"splitLine": {
"show": false,
"lineStyle": {
"color": "#484753",
"width": 1,
"type": "solid"
}
},
"type": "category"
},
"yAxis": [
{
"type": "value",
"splitNumber": 4,
"splitLine": {
"show": false
},
"axisLine": {
"show": true,
"lineStyle": {
"color": "#BDBDBD",
"width": 1,
"type": "solid"
}
},
"axisLabel": {
"show": true,
"color": "#BDBDBD",
"fontSize": "12"
},
"yAxisIndex": 0,
"show": true,
"name": "件",
"nameGap": 12
},
{
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
"show": true,
"lineStyle": {
"color": "#BDBDBD",
"width": 1,
"type": "solid"
}
},
"splitNumber": 6,
"axisLabel": {},
"yAxisIndex": 1,
"show": true,
"name": "%",
"nameGap": 12
}
],
"grid": {
"show": false,
"left": "50",
"top": "50",
"right": "50",
"bottom": "30"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow",
"label": {
"show": true,
"backgroundColor": "#7B7DDC"
}
},
formatter(params) {
let unit1 = '件'
let unit2 = '件'
let key = '通过率'
let list = []
let listItem = ''
params.forEach((item) => {
let unitValue = ''
if (item.seriesType == 'line') {
unitValue = item.value[key] + '%'
} else {
unitValue = item.componentIndex === 0 ? item.value[item.seriesName] + unit1 : item.value[item.seriesName] + unit2
}
list.push(item.marker + '' + item.seriesName + ' : ' + unitValue)
})
listItem = list.join('<br/>')
return '<div>' + params[0].name + "<br />" + listItem + '</div>'
}
},
"dataset": {
"dimensions": [
"城市",
"申报数",
"通过数",
"通过率"
],
"source": [
{
"城市": "北京",
"申报数": 352,
"通过数": 254,
"通过率": 72.16
},
{
"城市": "上海",
"申报数": 107,
"通过数": 79,
"通过率": 73.83
},
{
"城市": "广州",
"申报数": 51,
"通过数": 47,
"通过率": 92.16
},
{
"城市": "深圳",
"申报数": 201,
"通过数": 172,
"通过率": 85.57
},
{
"城市": "成都",
"申报数": 36,
"通过数": 26,
"通过率": 72.22
},
{
"城市": "重庆",
"申报数": 24,
"通过数": 13,
"通过率": 54.17
},
{
"城市": "合肥",
"申报数": 31,
"通过数": 14,
"通过率": 45.16
},
{
"城市": "南京",
"申报数": 147,
"通过数": 117,
"通过率": 79.59
},
{
"城市": "杭州",
"申报数": 330,
"通过数": 314,
"通过率": 95.15
},
{
"城市": "苏州",
"申报数": 140,
"通过数": 113,
"通过率": 80.71
},
{
"城市": "宁波",
"申报数": 273,
"通过数": 134,
"通过率": 49.08
},
{
"城市": "石家庄",
"申报数": 265,
"通过数": 181,
"通过率": 68.3
},
{
"城市": "武汉",
"申报数": 118,
"通过数": 46,
"通过率": 38.98
},
{
"城市": "长沙",
"申报数": 249,
"通过数": 184,
"通过率": 73.9
},
{
"城市": "南昌",
"申报数": 215,
"通过数": 92,
"通过率": 42.79
},
]
},
"series": [
{
"type": "bar",
"barWidth": 15,
"label": {
"show": true,
"position": "top",
"color": "#fff",
"fontSize": 12
},
"itemStyle": {
"color": {
"colorStops": [
{
"offset": 0,
"color": "#8063B0"
},
{
"offset": 1,
"color": "#342A61"
}
],
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false
},
"borderRadius": [
12,
12,
3,
3
]
},
"barGap": "-100%",
"name": "申报数"
},
{
"type": "bar",
"barWidth": 15,
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"fontSize": 12,
"distance": -8
},
"itemStyle": {
"color": {
"colorStops": [
{
"offset": 0,
"color": "#9781D4"
},
{
"offset": 1,
"color": "#3BA1E3"
}
],
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false
},
"borderRadius": [
12,
12,
3,
3
]
},
"name": "通过数"
},
{
"smooth": true,
"showAllSymbol": true,
"symbol": "emptyCircle",
"type": "line",
"yAxisIndex": 1,
"symbolSize": 10,
"label": {
"show": true,
"color": "#FFFFFFFF",
"fontSize": 12,
"position": "top",
"distance": 3,
"fontStyle": "italic",
"fontWeight": "normal"
},
"lineStyle": {
"width": 2,
"type": "solid",
"color": "#946496"
},
"name": "通过率",
"step": false,
"emphasis": {
"disabled": true,
"scale": 1.5,
"itemStyle": {
"borderWidth": 2.4,
"color": "#2EC7C9",
"borderColor": "#fff"
}
},
"itemStyle": {
"color": "#2EC7C9",
"borderColor": "#2EC7C9"
}
}
],
})js逻辑控制（重点）
<template>
<div style="width:100%; height:80vh">
<v-chart ref="vChartRef" theme="dark" resize :option="option"></v-chart>
</div>
</template>
<script setup>
import * as echarts from "echarts"; // 本代码中的echarts的版本5.3.2
import VChart from "vue-echarts"; // echarts的套壳子的vue-echarts组件版本6.0.2
import { onMounted, ref } from "vue"; // vue版本3.3.4
const vChartRef = ref(null); // vue-echarts实例，注意再往里一层才是echarts
let timer = ref(null) // 定时器一直派发
const option = 上面一大堆的option数据
const addE = (chartObj, option) => {
return new Promise((resolve, reject) => {
// vue-echarts实例，再往里一层才是echarts（可打印瞅瞅就知道了）
const chart = chartObj.chart
let zRender = chart.getZr();
// 鼠标经过清除定时器
chart.on('mouseover', () => {
if (timer.value) { clearInterval(timer.value) }
})
// 鼠标移动清除定时器
zRender.on('mousemove', () => {
if (timer.value) { clearInterval(timer.value) }
});
// 鼠标移动离开再开启轮播
chart.on('mouseout', function () {
loopTootip(chart, option)
});
// 鼠标全局离开再开启轮播
zRender.on('globalout', () => {
loopTootip(chart, option)
});
resolve(true)
})
}
const loopTootip = (chart, option) => {
if (timer.value) { clearInterval(timer.value) } // 清空定时器并再设置一个新的定时器
let i = 0 // 索引0开始tootip轮播
let length = option.dataset.source.length // 多少个需要轮播
timer.value = setInterval(() => {
/**
* 派发展示tootip事件，第一个系列，从柱状图第一项开始
* 派发一次，就弹出tootip【关键代码】
* */
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: i
})
// chart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: i }); // 派发高亮此案例用不到
/**
* 当跑到最后一个柱状图的时候，再回到第一项
* */
if (i == length - 1) {
i = 0
} else {
i = i + 1
}
}, 1000);
}
onMounted(async () => {
// 先绑定监听鼠标事件，再开始轮播tootip
await addE(vChartRef.value, option.value)
loopTootip(vChartRef.value, option.value)
})
</script>好了，又shui了一篇文章...