如何在vue3中使用echarts

最新推荐文章于 2024-06-18 17:59:13 发布

可爱丶妖小妖

最新推荐文章于 2024-06-18 17:59:13 发布

阅读量1.2k

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/Yao_Huang_/article/details/126470357

版权

如何在vue3中使用echarts

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

<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
import echarts from "echarts";
import "echarts/theme/shine";

export default {
  data() {
    // 直接写在return 里会不显示 tooltip
    this.chart = null;
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeUnmount() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    // 图表初始化
    initChart() {
      this.chart = echarts.init(this.$refs.echart, "shine");
      this.setOptions();
    },

    // 设置图表
    setOptions() {
      this.chart.setOption({
        title: {
          text: "图表标题",
        },
        // 提示框组件 （全局）
        tooltip: {
          // 触发类型 ： item 数据项图形触发（主要在散点图，饼图等无类目轴的图表中使用）； axis 坐标轴触发(主要在柱状图，