项目-03-封装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的变化，重新渲染图表