vue3基本使用Echarts

一。在Vue3项目中安装Echarts

npm install echarts --save

二。创建可视化组件

通常会把数据可视化功能单独放在一个组件。（单独获取数据，单独展示数据，从父组件获取字段）

barcharts组件（记得在组件销毁时销毁Echarts实例，以释放资源）

<template>
  <div class="echarts_box">
    <div id="myEcharts" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
//引入echarts
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";
export default {
  name: "barCharts",
  props: ["width", "height"],
  setup() {
    let myEcharts = echarts;
    onMounted(() => {
      initCharts();
    });
    onUnmounted(() => {
       if (myEcharts) {
        myEcharts.dispose();
      }
    });
    function initCharts() {
      // 基于准备好的dom，初始化echarts实例
      // 获取DOM元素
      let myChart = myEcharts.init(document.getElementById("myEcharts"));
      // 绘制图表
      // 配置Echarts选项
      // 渲染图表
      myChart.setOption({
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "毛毯", "帽子", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      //在窗口大小改变时重新调整图表的大小。myChart.resize() 方法来重新计算和绘制图表，以适应新的窗口大小。
      //达到自适应效果
      window.onresize = function () {
        myChart.resize();
      };
    }

    return {
      initCharts,
    };
  },
};
</script>

<style lang="less" scoped>
</style>

index组件

<template>
  <div>
    <bar-charts-vue :width="'600px'" :height="'600px'" />
  </div>
</template>

<script>
import barChartsVue from "./barCharts.vue";
export default {
  components: {
    barChartsVue,
  },
  setup(props) {},
};
</script>

<style lang="less" scoped>
</style>

注意：

1. 当结合element的el-tab-pane标签使用多个组件存在一个错误信息：echarts.js?v=a083a7e2:7946 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getAttribute') at barcharts.vue:21:27
2. 某些情况下遇到 undefined 错误或图表无法正常渲染的问题。这个问题通常发生在 Vue 的生命周期中，尤其是当图表 DOM 元素还未完全渲染时就尝试初始化 ECharts 实例。为了确保 ECharts 正常工作并解决潜在问题，我们可以进行一些改进。

【id="myEcharts"】ID注意设置唯一，多组件不使用同一个ID，避免渲染问题！！！

<template>
    <div class="echarts_box">
        <div id="myEcharts" :style="{ width: width, height: height }"></div>
    </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
import { onMounted, onUnmounted, nextTick, watch } from "vue";

export default {
    name: "barCharts",
    props: {
        width: {
            type: String,
            default: "600px",
        },
        height: {
            type: String,
            default: "400px",
        },
    },
    setup(props) {
        let myChart = null;

        // 初始化图表
        const initCharts = () => {
            const chartDom = document.getElementById("myEcharts");
            if (chartDom) {
                myChart = echarts.init(chartDom);
                myChart.setOption({
                    title: {
                        text: "ECharts 入门示例",
                    },
                    tooltip: {},
                    xAxis: {
                        data: ["衬衫", "毛毯", "帽子", "裤子", "高跟鞋", "袜子"],
                    },
                    yAxis: {},
                    series: [
                        {
                            name: "销量",
                            type: "bar",
                            data: [5, 20, 36, 10, 10, 20],
                        },
                    ],
                });
            }
        };

        // 窗口大小变化时重新调整图表
        const handleResize = () => {
            if (myChart) {
                myChart.resize();
            }
        };

        onMounted(() => {
            nextTick(() => {
                initCharts(); // 在 DOM 渲染完成后初始化图表
            });

            // 监听窗口大小变化
            window.addEventListener("resize", handleResize);
        });

        onUnmounted(() => {
            if (myChart) {
                myChart.dispose(); // 销毁 ECharts 实例
            }
            window.removeEventListener("resize", handleResize); // 移除事件监听器
        });

        // 监听 props 变化时，重新初始化图表
        watch(
            () => [props.width, props.height],
            () => {
                if (myChart) {
                    myChart.resize(); // 在 props 改变时，重新调整图表大小
                }
            }
        );

        return {
            initCharts,
        };
    },
};
</script>

<style lang="less" scoped>
.echarts_box {
    width: 100%;
    height: 100%;
}
</style>