写在前面

项目中碰到一个小优化项，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>

写在最后 

        生活不易，愿疫情早日结束!!!🙏🙏🙏