echarts设置tootip轮播切换展示(vue3搭配vue-echarts粘贴即用)
更新时间：2023年10月11日 10:20:14 作者：水冗水孚
这篇文章主要为大家介绍了echarts设置tootip轮播切换展示效果,vue3搭配vue-echarts粘贴即用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
效果图
长话短说，先看效果
思路
- 来一个定时器
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>以上就是echarts设置tootip轮播切换展示(vue3搭配vue-echarts粘贴即用)的详细内容，更多关于echarts tootip轮播切换的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue路由如何实现登录拦截，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要给大家介绍了关于Vue图片裁剪组件的相关资料,本文介绍的组件是基于vue-cropper二次封装,vue-cropper大家应该都很熟悉了吧,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了关于vue-i18n在单文件js中的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue 导航锚点_点击平滑滚动,导航栏对应变化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最近在项目中遇到了一个需求，我们通过Vue.nextTick()来解决这一需求，但发现网上这方面的资料较少，所以自己来总结下，下面这篇文章主要给大家介绍了关于Vue.nextTick()正确使用方法的相关资料，需要的朋友可以参考下。2017-08-08
这篇文章主要介绍了Spring boot 和Vue开发中CORS跨域问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue2.0 自定义组件的方法（vue组件的封装）,本文通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友可以参考下2018-06-06
深入解析el-col-group强大且灵活的Element表格列组件
这篇文章主要为大家介绍了el-col-group强大且灵活的Element表格列组件深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了vue脚手架项目创建步骤详解，文章讲解的很清晰，初学者可以跟着步骤学习下2021-03-03
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
这篇文章主要介绍了Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners),需要的朋友可以参考下2018-05-05
最新评论