echars图表一进来默认显示tooltip

最新推荐文章于 2024-08-02 19:15:08 发布

青青子衿-悠悠我心VIP

最新推荐文章于 2024-08-02 19:15:08 发布

阅读量6.4k

点赞数 4

分类专栏：有关Echarts的一些使用技巧文章标签： echarts

本文链接：https://blog.csdn.net/qq_2411868438/article/details/124453398

版权

有关Echarts的一些使用技巧专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在Echarts项目中实现图表加载时默认展示指定标记点的Tooltip信息窗。通过利用chart实例的dispatchAction方法，设置type为'showTip'，并指定seriesIndex和dataIndex，可以实现在图表渲染完成后立即显示Tooltip。在示例代码中，延迟1秒展示最后一个数据点的Tooltip，以匹配图表的渲染动画效果。

摘要由CSDN通过智能技术生成

写在前面

项目中碰到一个小优化项，echarts图表渲染一进来默认显示指定标记点信息窗即tooltip，效果类似：

动手实现

核心是利用chart实例的dispatchAction方法

部分代码示例：*注:vue环境

<template>
    <div :style="{width:width, height:height}"></div>
<template>

<script>
export default {
    props: {
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '100%'
        },
        chartsData: {
            type: Object
        }
    },
    data() {
        chart: null,
        option: {
            grid: {...},
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {...},
            yAxis: {...},
            series: [{...}]
        }
    },
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            let chart = this.$echarts.init(this.$el) // $el为简便写法,指代template下根元素,也可以使用元素选择器
            chart.setOption(this.option);

            setTimeout(()=>{
                chart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0, // 针对series下第几个数据
                    dataIndex: this.option.series[0].data.length - 1 // 第几个数据
                })
            },1000) // 这里跟图例一样显示最后一条数据的tooltip，chart有一个默认1s时长的渲染动画，执行到末端正好1s，所以设置定时器延时1s

            this.chart = chart;
        }
    },
    beforeDestory() {
        if(!this.chart) return; //页面销毁钩子销毁chart释放资源
        this.chart.dispose();
        this.chart = null
    }
}
</script>

<style></style>