快捷導(dǎo)航

vue中echarts自動輪播tooltip問題

更新時間：2022年10月20日 09:43:08 投稿：jingxian

這篇文章主要介紹了vue中echarts自動輪播tooltip問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

echarts自動輪播tooltip

vue首先需要封裝tools.js的包（函數(shù)）：

export function autoHover(myChart, option, num, time) {
?? ?var defaultData = {
?? ??? ?// 設(shè)置默認值
?? ??? ?time: 2000,
?? ??? ?num: 100
?? ?}
?? ?if (!time) {
?? ??? ?time = defaultData.time
?? ?}
?? ?if (!num) {
?? ??? ?num = defaultData.num
?? ?}
?? ?var count = 0
?? ?var timeTicket = null
?? ?timeTicket && clearInterval(timeTicket)
?? ?timeTicket = setInterval(function () {
?? ??? ?myChart.dispatchAction({
?? ??? ??? ?type: 'downplay',
?? ??? ??? ?seriesIndex: 0 // serieIndex的索引值 ? 可以觸發(fā)多個
?? ??? ?})
?? ??? ?myChart.dispatchAction({
?? ??? ??? ?type: 'highlight',
?? ??? ??? ?seriesIndex: 0,
?? ??? ??? ?dataIndex: count
?? ??? ?})
?? ??? ?myChart.dispatchAction({
?? ??? ??? ?type: 'showTip',
?? ??? ??? ?seriesIndex: 0,
?? ??? ??? ?dataIndex: count
?? ??? ?})
?? ??? ?count++
?? ??? ?if (count >= num) {
?? ??? ??? ?count = 0
?? ??? ?}
?? ?}, time)
?? ?myChart.on('mouseover', function (params) {
?? ??? ?clearInterval(timeTicket)
?? ??? ?myChart.dispatchAction({
?? ??? ??? ?type: 'downplay',
?? ??? ??? ?seriesIndex: 0
?? ??? ?})
?? ??? ?myChart.dispatchAction({
?? ??? ??? ?type: 'highlight',
?? ??? ??? ?seriesIndex: 0,
?? ??? ??? ?dataIndex: params.dataIndex
?? ??? ?})
?? ??? ?myChart.dispatchAction({
?? ??? ??? ?type: 'showTip',
?? ??? ??? ?seriesIndex: 0,
?? ??? ??? ?dataIndex: params.dataIndex
?? ??? ?})
?? ?})

?? ?myChart.on('mouseout', function () {
?? ??? ?timeTicket && clearInterval(timeTicket)
?? ??? ?timeTicket = setInterval(function () {
?? ??? ??? ?myChart.dispatchAction({
?? ??? ??? ??? ?type: 'downplay',
?? ??? ??? ??? ?seriesIndex: 0 // serieIndex的索引值 ? 可以觸發(fā)多個
?? ??? ??? ?})
?? ??? ??? ?myChart.dispatchAction({
?? ??? ??? ??? ?type: 'highlight',
?? ??? ??? ??? ?seriesIndex: 0,
?? ??? ??? ??? ?dataIndex: count
?? ??? ??? ?})
?? ??? ??? ?myChart.dispatchAction({
?? ??? ??? ??? ?type: 'showTip',
?? ??? ??? ??? ?seriesIndex: 0,
?? ??? ??? ??? ?dataIndex: count
?? ??? ??? ?})
?? ??? ??? ?count++
?? ??? ??? ?if (count >= 17) {
?? ??? ??? ??? ?count = 0
?? ??? ??? ?}
?? ??? ?}, 3000)
?? ?})
}
export default {
?? ?autoHover
}

最好把這個js文件放到utils文件夾下，其他組件可能也需要用到，作為一個公共的函數(shù)；

在vue組件中引入使用：

import { autoHover } from '@/utils/tool.js'	// 引入封裝的函數(shù)

export default {
  mounted() {
    this.initLine()
  },
  methods: {
    // 折線圖
    initLine() {
      var myChart = echarts.init(document.getElementById('manyLine'));
      let option = {
      // ......此配置省略
      }
      myChart.setOption(option, true);
      // 自動輪播
      autoHover(myChart, this.option, 4, 3000); // 參數(shù)分別為：容器，配置，輪播數(shù)量，輪播間隔時間
    }
  }
}

Echarts大屏餅圖（可自動輪播）

API：

highlight 啟動高亮
downplay 關(guān)閉高亮

設(shè)置定時器：逐個開啟餅塊的高亮（注意：在開啟下一個前將上一個高亮關(guān)閉）

import * as echarts from 'echarts';
?
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
?
option = {
? title: {
? ? text: 'Referer of a Website',
? ? subtext: 'Fake Data',
? ? left: 'center'
? },
? tooltip: {
? ? trigger: 'item'
? },
? legend: {
? ? orient: 'vertical',
? ? left: 'left'
? },
? series: [
? ? {
? ? ? name: 'Access From',
? ? ? type: 'pie',
? ? ? radius: '50%',
? ? ? data: [
? ? ? ? { value: 1048, name: 'Search Engine' },
? ? ? ? { value: 735, name: 'Direct' },
? ? ? ? { value: 580, name: 'Email' },
? ? ? ? { value: 484, name: 'Union Ads' },
? ? ? ? { value: 300, name: 'Video Ads' }
? ? ? ],
? ? ? emphasis: {
? ? ? ? itemStyle: {
? ? ? ? ? shadowBlur: 10,
? ? ? ? ? shadowOffsetX: 0,
? ? ? ? ? shadowColor: 'rgba(0, 0, 0, 0.5)'
? ? ? ? }
? ? ? }
? ? }
? ]
};
let count = 0;
setInterval(() => {
? myChart.dispatchAction({
? ? type: 'downplay',
? ? seriesIndex: 0,
? ? dataIndex: count
? });
? count++;
? if (count === 5) {
? ? count = 0;
? }
? myChart.dispatchAction({
? ? type: 'highlight',
? ? seriesIndex: 0,
? ? dataIndex: count
? });
}, 5000);
?
option && myChart.setOption(option);

提示：若在vue組件中復(fù)用組件引入option配置時，注意將與相關(guān)的echarts實例傳給父組件，使用對應(yīng)的實例myChart進行操作,如下案例：

chart.vue 可復(fù)用組件：掛載完成后將Echarts實例chart傳給父組件

<script>
import * as echarts from 'echarts'
import 'zrender/lib/svg/svg'
import { debounce } from 'throttle-debounce'
export default {
? name: '',
? props: ['option', 'renderer', 'notMerge', 'lazyUpdate'],
? data () {
? ? return {
? ? ? width: '100%',
? ? ? height: '100%',
? ? }
? },
? watch: {
? ? option (val) {
? ? ? this.setOption(val)
? ? },
? },
? created () {
? ? this.chart = null
? },
? async mounted () {
? ? // 初始化圖表
? ? await this.initChart(this.$el)
? ? // 向父組件傳遞chart實例
? ? this.$emit('send', this.chart)
? ? // 將傳入的配置(包含數(shù)據(jù))注入
? ? this.setOption(this.option)
? ? // 監(jiān)聽屏幕縮放，重新繪制 echart 圖表
? ? window.addEventListener('resize', debounce(100, this.resize))
? },
? updated () {
? ? // 每次更新組件都重置
? ? this.setOption(this.option)
? },
? beforeDestroy () {
? ? // 組件卸載前卸載圖表
? ? this.dispose()
? },
? methods: {
? ? initChart (el) {
? ? ? // renderer 用于配置渲染方式 可以是 svg 或者 canvas
? ? ? const renderer = this.renderer || 'canvas'
? ? ? return new Promise(resolve => {
? ? ? ? setTimeout(() => {
? ? ? ? ? this.chart = echarts.init(el, null, {
? ? ? ? ? ? renderer,
? ? ? ? ? ? width: 'auto',
? ? ? ? ? ? height: 'auto',
? ? ? ? ? })
? ? ? ? ? resolve()
? ? ? ? }, 0)
? ? ? })
? ? },
? ? setOption (option) {
? ? ? if (!this.chart) {
? ? ? ? return
? ? ? }
?
? ? ? const notMerge = this.notMerge
? ? ? const lazyUpdate = this.lazyUpdate
?
? ? ? this.chart.setOption(option, notMerge, lazyUpdate)
? ? },
? ? dispose () {
? ? ? if (!this.chart) {
? ? ? ? return
? ? ? }
?
? ? ? this.chart.dispose()
? ? ? this.chart = null
? ? },
? ? resize () {
? ? ? this.chart && this.chart.resize()
? ? },
? ? getInstance () {
? ? ? return this.chart
? ? },
? },
? render () {
? ? const { width, height } = this
? ? return (
? ? ? <div
? ? ? ? class='default-chart'
? ? ? ? style={{ width, height }}
? ? ? />
? ? )
? },
}
</script>

餅狀圖組件：on-send監(jiān)聽子組件觸發(fā)的send方法，并執(zhí)行相應(yīng)的方法

<script>
import SubTitle from './SubTitle'
import Chart from '../Chart'
export default {
? name: '',
? data () {
? ? return {
? ? ? myChart: null,
? ? ? option: 省略...(與上文option設(shè)置相同 可復(fù)制于此)
? ? }
? },
? mounted () {
? ? this.$nextTick(() => {
? ? ? this.pieActive()
? ? })
? },
? methods: {
? ? // 餅狀圖輪播
? ? pieActive () {
? ? ? let count = 0
? ? ? let length = this.option.series[0].data.length
? ? ? setInterval(() => {
? ? ? ? this.myChart.dispatchAction({
? ? ? ? ? type: 'downplay',
? ? ? ? ? seriesIndex: 0,
? ? ? ? ? dataIndex: count,
? ? ? ? })
? ? ? ? count++
? ? ? ? if (count === length) {
? ? ? ? ? count = 0
? ? ? ? }
? ? ? ? this.myChart.dispatchAction({
? ? ? ? ? type: 'highlight',
? ? ? ? ? seriesIndex: 0,
? ? ? ? ? dataIndex: count,
? ? ? ? })
? ? ? }, 5000)
? ? },
? ? getChart (chart) {
? ? ? this.myChart = chart
? ? },
? },
? render () {
? ? return (
? ? ? <div style="height:250px;width:480px;position:absolute;left:1402px;top:772px;display:flex;flex-direction: column;">
? ? ? ? <SubTitle title="省份銷售占比圖"/>
? ? ? ? <div style="flex: 1; position: relative;">
? ? ? ? ? <Chart option={this.option} on-send={this.getChart} style="position: absolute;top: 10px;"/>
? ? ? ? </div>
? ? ? </div>
? ? )
? },
}
</script>
?
<style lang="scss" scoped></style>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: