echarts設置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)
更新時間：2023年10月11日 10:20:14 作者：水冗水孚
這篇文章主要為大家介紹了echarts設置tootip輪播切換展示效果,vue3搭配vue-echarts粘貼即用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步
效果圖
長話短說，先看效果
思路
- 來一個定時器
setInterval每隔一秒觸發(fā)一次showTip展示tootip - 關鍵代碼如下：（派發(fā)一次，就彈出一次
tootip） tootip切換就是更改一下數(shù)據(jù)的下標索引dataIndex
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: i
})- 最后當鼠標移入進去以后，再取消定時器輪播即可
- 當然，需要綁定一些鼠標事件
完整代碼（復制粘貼即可使用）
option配置項
數(shù)據(jù)在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": [
"城市",
"申報數(shù)",
"通過數(shù)",
"通過率"
],
"source": [
{
"城市": "北京",
"申報數(shù)": 352,
"通過數(shù)": 254,
"通過率": 72.16
},
{
"城市": "上海",
"申報數(shù)": 107,
"通過數(shù)": 79,
"通過率": 73.83
},
{
"城市": "廣州",
"申報數(shù)": 51,
"通過數(shù)": 47,
"通過率": 92.16
},
{
"城市": "深圳",
"申報數(shù)": 201,
"通過數(shù)": 172,
"通過率": 85.57
},
{
"城市": "成都",
"申報數(shù)": 36,
"通過數(shù)": 26,
"通過率": 72.22
},
{
"城市": "重慶",
"申報數(shù)": 24,
"通過數(shù)": 13,
"通過率": 54.17
},
{
"城市": "合肥",
"申報數(shù)": 31,
"通過數(shù)": 14,
"通過率": 45.16
},
{
"城市": "南京",
"申報數(shù)": 147,
"通過數(shù)": 117,
"通過率": 79.59
},
{
"城市": "杭州",
"申報數(shù)": 330,
"通過數(shù)": 314,
"通過率": 95.15
},
{
"城市": "蘇州",
"申報數(shù)": 140,
"通過數(shù)": 113,
"通過率": 80.71
},
{
"城市": "寧波",
"申報數(shù)": 273,
"通過數(shù)": 134,
"通過率": 49.08
},
{
"城市": "石家莊",
"申報數(shù)": 265,
"通過數(shù)": 181,
"通過率": 68.3
},
{
"城市": "武漢",
"申報數(shù)": 118,
"通過數(shù)": 46,
"通過率": 38.98
},
{
"城市": "長沙",
"申報數(shù)": 249,
"通過數(shù)": 184,
"通過率": 73.9
},
{
"城市": "南昌",
"申報數(shù)": 215,
"通過數(shù)": 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": "申報數(shù)"
},
{
"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": "通過數(shù)"
},
{
"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) // 定時器一直派發(fā)
const option = 上面一大堆的option數(shù)據(jù)
const addE = (chartObj, option) => {
return new Promise((resolve, reject) => {
// vue-echarts實例，再往里一層才是echarts（可打印瞅瞅就知道了）
const chart = chartObj.chart
let zRender = chart.getZr();
// 鼠標經(jīng)過清除定時器
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(() => {
/**
* 派發(fā)展示tootip事件，第一個系列，從柱狀圖第一項開始
* 派發(fā)一次，就彈出tootip【關鍵代碼】
* */
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: i
})
// chart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: i }); // 派發(fā)高亮此案例用不到
/**
* 當跑到最后一個柱狀圖的時候，再回到第一項
* */
if (i == length - 1) {
i = 0
} else {
i = i + 1
}
}, 1000);
}
onMounted(async () => {
// 先綁定監(jiān)聽鼠標事件，再開始輪播tootip
await addE(vChartRef.value, option.value)
loopTootip(vChartRef.value, option.value)
})
</script>以上就是echarts設置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)的詳細內(nèi)容，更多關于echarts tootip輪播切換的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了關于vue的路由模式及修改方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue.js打包項目后頁面出現(xiàn)空白的解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-11-11
在 Vue 3 中上傳 KML 文件并在地圖上顯示的實現(xiàn)方法
KML 文件作為一種標準的地理數(shù)據(jù)格式,廣泛應用于地理信息系統(tǒng)（GIS）中,通過 OpenLayers 和 Vue 3 的組合,您可以方便地實現(xiàn)地圖數(shù)據(jù)的可視化和交互,本文介紹在 Vue 3 中上傳 KML 文件并在地圖上顯示的實現(xiàn)方法,感興趣的朋友一起看看吧2024-12-12
在Vue中,自定義指令提供了一種機制來直接操作DOM元素,或者在元素的生命周期中注入特定的行為,自定義指令可以封裝復雜的DOM操作,使得它們可以像內(nèi)置指令一樣被復用和維護,本文將介紹如何在Vue中注冊和使用自定義指令,需要的朋友可以參考下2025-05-05
這篇文章主要介紹了nginx部署多個vue項目的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
搜索功能在后臺管理頁面中非常常見，這篇文章就著重講一下vue3-admin-element框架中如何實現(xiàn)一個頂部多條件搜索功能，感興趣的小伙伴可以了解一下2023-08-08
Vue中的 mixins 和 provide/inject詳解
這篇文章主要介紹了Vue中的 mixins 和 provide/inject詳解,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了uniapp開發(fā)打包多端應用完整流程指南,包括了uniapp打包小程序，uniapp打包安卓apk，uniapp打包IOS應用,需要的朋友可以參考下2022-12-12
vue-router是vue.js官方給出的路由解決方案，能夠輕松的管理SPA項目中組件的切換，這篇文章主要介紹了Vue3?中路由Vue?Router?的使用,需要的朋友可以參考下2023-02-02
Vue是一套用于構(gòu)建用戶界面的漸進式框架,與其它大型框架不同的是,Vue被設計為可以自底向上逐層應用,下面這篇文章主要給大家介紹了關于vue使用csp的相關資料,需要的朋友可以參考下2022-08-08