封装Echarts组件并使用component动态加载组件

需求

• 由于需要多次用到echarts，需要封装一个echarts组件
• 动态加载echarts组件

场景+代码

场景：

• 在 test.vue 里调用 echarts 组件，test.vue 会将 echarts 需要的数据传给它
• echarts 封装目录如下：其中 app-Echarts 中的 index.vue 将会被注册为【全局组件】，名字为AppEcharts
  

test.vue

<template>
	<div v-for="(item, index) in statisticsType" :key="index">
		<AppEcharts :option="item.option" type="line" :id="item.id"></AppEcharts>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
const statisticsType = computed(() => {
  {
    id: 'id1',
    name: '用户总数',
    icon: 'app-user',
    background: '#EBF1FF',
    color: '#3370FF',
    sum: [100, 200],
    option: {  // options里就是echarts图表需要的数据，大家可以自己准备
      title: '用户总数',
      xDatas: ['2025-1-1', '2025-1-12'],
      yDatas: [
        {
          name: '用户总数',
          type: 'line',
          area: true,
          data: [...]
        },
        {
          name: '用户新增数',
          type: 'line',
          area: true,
          data: [...]
        }
      ]
    }
  },
})
</script>

/src/components/app-Echarts/index.vue

<template>
  <component 
    :is="typeComponentMap[props.type]" 
    :option="option"
    :id="props.id"
  />
</template>

<script setup lang="ts">
import line from './components/LineEcharts.vue'
defineOptions({ name: 'AppEcharts'})
const props = defineProps({
  option: {
    type: Object,
    required: true
  },
  type: {
    type: String,
    default: 'line'
  },
  id: {
    type: String,
    required: true
  }
})
const typeComponentMap = { line } as any // 将typeComponentMap断言为any
</script>

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

/src/components/app-Echarts/components/LineEcharts.vue

<template>
  <div ref="PieChartRef" :id="props.id" :style="{ height: props.heigth, width: props.width}"></div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, watch } from 'vue';
import * as echarts from 'echarts'
const props = defineProps({
  option: {
    type: Object,
    required: true
  },
  id: {
    type: String,
    required: true
  },
  width: {
    type: String,
    default: '100%'
  },
  heigth: {
    type: String,
    default: '200px'
  }
})

const color = ['rgba(82, 133, 255, 1)', 'rgba(255, 207, 47, 1)']

const areaColor = ['rgba(82, 133, 255, 0.2)', 'rgba(255, 207, 47, 0.2)']

function initChart() {
  // 获取dom实例
  let myChart = echarts?.getInstanceByDom(document.getElementById(props.id)!)
  if(myChart === null || myChart === undefined) {
    myChart = echarts.init(document.getElementById(props.id))
  }

  const series: any = []
  ... // 这里处理了一个options，把里面的部分数据处理成series需要的样子
       
  const option = {
    title: {
      text: props.option.title, // 标题内容
      textStyle: { // 标题样式
        fontSize: '16px' 
      }
    },
    tooltip: { // 用于设置鼠标悬浮时显示的提示框
      trigger: 'axis', // 提示框的触发方式是轴触发
      axisPointer: { // 配置坐标指示器
        type: 'cross', // 用来设置坐标轴指示器的样式类型
        label: { // 用于设置坐标轴指示器的标签样式
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: { // 用于设置图例项的名称
      right: 0,
      itemWidth: 8,
      textStyle: {
        color: '#646A73'
      },
      icon: 'circle'
    },
    grid: { // 用于配置图表的网格区域
      left: '1%',
      right: '1%',
      bottom: '0',
      top: '18%',
      containLabel: true // 坐标轴和图例都被包含在网格区域内
    },
    xAxis: { // 设置x轴相关属性
      type: 'category', // 设置x轴为类目轴，意味着x轴上的数据是类别数据（而不是数值轴）
      data: props.option.xDatas // x轴刻度数据
    },
    yAxis: { // 设置y轴相关属性
      type: 'value', // 设置y轴为数值轴，这意味着y轴的值是数字，可以进行数值范围的展示
      splitLine: { // 设置y轴的分割线
        lineStyle: {
          color: '#EFF0F1'
        }
      }
    },
    series: series
    // series常见属性
    // type：图表类型
    // name：图表名称
    // data：图表数据
    // areaStyle：用于设置折线图下方的填充区域样式
    // itemStyle：用于设置单个数据项的样式，例如折线图的每个点、柱状图的每根柱子等，有color（颜色）等等
  }
  myChart.setOption(option, true)
}

function changeChartSize() {
  // 调用了图表实例的 resize() 方法，动态调整图表的尺寸以匹配其容器大小。
  echarts.getInstanceByDom(document.getElementById(props.id)!)?.resize()
}

watch(
  () => props.option,
  (val) => {
    if (val) {
      nextTick(() => {
        initChart()
      })
    }
  }
)

onMounted(() => {
  nextTick(() => {
    initChart()
    window.addEventListener('resize', changeChartSize)
  })
})

</script>
<style lang="scss" scoped></style>

补充说明

1. typeComponentMap 讲解

问题： 为什么要单独再写 typeComponentMap ？

• 因为这样封装的组件可以通过 type 指定需要的图表种类
• 我可能会封装多种样式的 echarts 图表（在上述截图中我只封装了折线图），例如如果我在 /src/components/app-Echarts/components/ 封装了 LineEcharts.vue 和 Column.vue，那么我可以在script里引入这两个组件，然后都加到typeComponentMap中，这样可以通过传递type参数指定需要的echarts图表类型

2. 为什么要给Echarts实例DOM添加id

• ECharts 的 getInstanceByDom 和 init 方法都依赖唯一的 DOM 节点。如果每个图表容器都有唯一的 id，就可以轻松获取并管理特定的图表实例
• 举例：在一个vue页面多次调用Echarts组件，动态传id后每个echarts都有自己的id
  

3. 为什么要在 onMounted 里添加 nextTick

• onMounted 的执行时间虽然是在 DOM 挂载后，但如果依赖的 DOM 尚未完全渲染（如 props.id
  对应的容器），直接操作可能失败。
• 比如，ECharts 初始化时需要容器的实际尺寸信息，如果直接在 onMounted
  操作，而此时尺寸信息尚未准备好，图表可能无法正确绘制。

不加的后果： echarts 图表无法正常渲染

4. 为什么要监听props.option

• props.option 是父组件传递的配置对象： 在 Vue 中，props 的值由父组件控制。如果父组件改变了传递给子组件的
  option 数据，子组件需要根据新的数据重新渲染图表。
• 动态更新图表内容： 图表的内容和样式依赖于props.option，如果不监听这个属性，图表内容不会随着数据变化而更新，导致显示结果与实际数据不符。
• 举例：点击“7日内”，会将相应数据传给echarts组件，渲染echarts图表，再次点击“30日内”，会将30日相应数据传给echarts组件，组件检测到props.option的变化，重新渲染图表