echarts的tooltip默认显示最后一条数据

最新推荐文章于 2024-09-27 15:51:23 发布

DRAGONZLL111

最新推荐文章于 2024-09-27 15:51:23 发布

阅读量256

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/DRAGONZLL111/article/details/140878341

版权

<template>
  <div ref="chartContainer" class="chartBox"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

const data = ['2023/1/1', '2023/1/2', '2023/1/3', '2023/1/4', '2023/1/5', '2023/1/6']
const data1 = [220, 182, 191, 230, 160, 200]
const data2 = [120, 132, 101, 56, 130, 102]
const chartContainer = ref(null);
let myChart = null;
onMounted(() => {
  if (chartContainer.value) {
    myChart = echarts.init(chartContainer.value);
    myChart.setOption({

      title: {
        text: '车流量趋势分析',
        textStyle: {
          fontSize: 16,  // 标题字体大小
          fontWeight: 600,  // 标题字体加粗
          color: '#3D3D3D'  // 标题字体颜色
        }
      },
      tooltip: {
        trigger: 'axis',
        alwaysShowContent: true,//是否永远显示提示框内容 
      },
      legend: {
        data: ['本地车', '外地车'],
        right: '10%',
        top: '0%',
        icon: 'circle'
      },
      grid: {
        left: '5%',
        right: '5%',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: data,
        axisLabel: {
          // rotate: 45,
        },
        axisTick: {
          show: false,
          alignWithLabel: false
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [

        {
          name: '本地车',
          type: 'line',
          smooth: true,
          data: data1,
        },
        {
          name: '外地车',
          type: 'line',
          smooth: true,
          data: data2,
        },
      ],
    });
    setTimeout(function () {//tooltip默认显示最后一条数据
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,  // 显示第几个series
        dataIndex: data.length - 1 // 显示第几个数据
      });
    })
  }

});

// 在组件销毁前，确保销毁ECharts实例以避免内存泄漏  
onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose();
  }
});
</script>

<style scoped>
.chartBox {
  width: 100%;
  height: 363px;
}

</style>