echarts設(shè)置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)
更新時(shí)間：2023年10月11日 10:20:14 作者：水冗水孚
這篇文章主要為大家介紹了echarts設(shè)置tootip輪播切換展示效果,vue3搭配vue-echarts粘貼即用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步
效果圖
長(zhǎng)話短說，先看效果
思路
- 來一個(gè)定時(shí)器
setInterval每隔一秒觸發(fā)一次showTip展示tootip - 關(guān)鍵代碼如下：（派發(fā)一次，就彈出一次
tootip） tootip切換就是更改一下數(shù)據(jù)的下標(biāo)索引dataIndex
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: i
})- 最后當(dāng)鼠標(biāo)移入進(jìn)去以后，再取消定時(shí)器輪播即可
- 當(dāng)然，需要綁定一些鼠標(biāo)事件
完整代碼（復(fù)制粘貼即可使用）
option配置項(xiàng)
數(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": [
"城市",
"申報(bào)數(shù)",
"通過數(shù)",
"通過率"
],
"source": [
{
"城市": "北京",
"申報(bào)數(shù)": 352,
"通過數(shù)": 254,
"通過率": 72.16
},
{
"城市": "上海",
"申報(bào)數(shù)": 107,
"通過數(shù)": 79,
"通過率": 73.83
},
{
"城市": "廣州",
"申報(bào)數(shù)": 51,
"通過數(shù)": 47,
"通過率": 92.16
},
{
"城市": "深圳",
"申報(bào)數(shù)": 201,
"通過數(shù)": 172,
"通過率": 85.57
},
{
"城市": "成都",
"申報(bào)數(shù)": 36,
"通過數(shù)": 26,
"通過率": 72.22
},
{
"城市": "重慶",
"申報(bào)數(shù)": 24,
"通過數(shù)": 13,
"通過率": 54.17
},
{
"城市": "合肥",
"申報(bào)數(shù)": 31,
"通過數(shù)": 14,
"通過率": 45.16
},
{
"城市": "南京",
"申報(bào)數(shù)": 147,
"通過數(shù)": 117,
"通過率": 79.59
},
{
"城市": "杭州",
"申報(bào)數(shù)": 330,
"通過數(shù)": 314,
"通過率": 95.15
},
{
"城市": "蘇州",
"申報(bào)數(shù)": 140,
"通過數(shù)": 113,
"通過率": 80.71
},
{
"城市": "寧波",
"申報(bào)數(shù)": 273,
"通過數(shù)": 134,
"通過率": 49.08
},
{
"城市": "石家莊",
"申報(bào)數(shù)": 265,
"通過數(shù)": 181,
"通過率": 68.3
},
{
"城市": "武漢",
"申報(bào)數(shù)": 118,
"通過數(shù)": 46,
"通過率": 38.98
},
{
"城市": "長(zhǎng)沙",
"申報(bào)數(shù)": 249,
"通過數(shù)": 184,
"通過率": 73.9
},
{
"城市": "南昌",
"申報(bào)數(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": "申報(bào)數(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邏輯控制（重點(diǎn)）
<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實(shí)例，注意再往里一層才是echarts
let timer = ref(null) // 定時(shí)器一直派發(fā)
const option = 上面一大堆的option數(shù)據(jù)
const addE = (chartObj, option) => {
return new Promise((resolve, reject) => {
// vue-echarts實(shí)例，再往里一層才是echarts（可打印瞅瞅就知道了）
const chart = chartObj.chart
let zRender = chart.getZr();
// 鼠標(biāo)經(jīng)過清除定時(shí)器
chart.on('mouseover', () => {
if (timer.value) { clearInterval(timer.value) }
})
// 鼠標(biāo)移動(dòng)清除定時(shí)器
zRender.on('mousemove', () => {
if (timer.value) { clearInterval(timer.value) }
});
// 鼠標(biāo)移動(dòng)離開再開啟輪播
chart.on('mouseout', function () {
loopTootip(chart, option)
});
// 鼠標(biāo)全局離開再開啟輪播
zRender.on('globalout', () => {
loopTootip(chart, option)
});
resolve(true)
})
}
const loopTootip = (chart, option) => {
if (timer.value) { clearInterval(timer.value) } // 清空定時(shí)器并再設(shè)置一個(gè)新的定時(shí)器
let i = 0 // 索引0開始tootip輪播
let length = option.dataset.source.length // 多少個(gè)需要輪播
timer.value = setInterval(() => {
/**
* 派發(fā)展示tootip事件，第一個(gè)系列，從柱狀圖第一項(xiàng)開始
* 派發(fā)一次，就彈出tootip【關(guān)鍵代碼】
* */
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: i
})
// chart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: i }); // 派發(fā)高亮此案例用不到
/**
* 當(dāng)跑到最后一個(gè)柱狀圖的時(shí)候，再回到第一項(xiàng)
* */
if (i == length - 1) {
i = 0
} else {
i = i + 1
}
}, 1000);
}
onMounted(async () => {
// 先綁定監(jiān)聽鼠標(biāo)事件，再開始輪播tootip
await addE(vChartRef.value, option.value)
loopTootip(vChartRef.value, option.value)
})
</script>以上就是echarts設(shè)置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)的詳細(xì)內(nèi)容，更多關(guān)于echarts tootip輪播切換的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問題解決方案
在lodash函數(shù)工具庫中，防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用，這篇文章主要介紹了vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問題與解決,需要的朋友可以參考下2023-10-10
插槽slot可以說在一個(gè)Vue項(xiàng)目里面處處都有它的身影，比如我們使用一些UI組件庫的時(shí)候，我們通?？梢允褂貌宀蹃碜远x我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue指令之v-for的使用說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue提供了mixins、extends配置項(xiàng)，最近使用中發(fā)現(xiàn)很好用。下面小編通過本文給大家介紹下vue中 mixins和extends的巧妙用法，需要的朋友參考下吧2017-12-12
iView 是一套基于 Vue.js 的開源 UI 組件庫，主要服務(wù)于 PC 界面的中后臺(tái)產(chǎn)品。這篇文章主要介紹了在vue項(xiàng)目中引用Iview的方法,需要的朋友可以參考下2018-09-09
Nuxt pages下不同的頁面對(duì)應(yīng)layout下的頁面布局操作
這篇文章主要介紹了Nuxt pages下不同的頁面對(duì)應(yīng)layout下的頁面布局操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了教你搭建按需加載的Vue組件庫(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue3 開始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開始時(shí)間)
本文通過示例代碼介紹了vue3 開始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開始時(shí)間)的相關(guān)操作,代碼簡(jiǎn)單易懂,感興趣的朋友跟隨小編一起看看吧2024-07-07
vue3+webpack中npm發(fā)布組件的實(shí)現(xiàn)
本文主要介紹了vue3+webpack中npm發(fā)布組件的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法
這篇文章主要介紹了vue 獲取到數(shù)據(jù)但卻渲染不到頁面上的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11