vue3封装echarts组件---通俗易懂

1、封装的原因

如果在vue项目中有多个组件或者同个组件多出地方需要不同的图表，因此自己封装一个方便多次复用的Mycharts图表组件。

2、具体步骤：

2.1 安装echarts

pnpm i echarts --save

2.2 新建MyCharts组件 :

~components/echarts/MyCharts.vue:

这里需要引入echarts:

import * as echarts from 'echarts';

<template><div><!-- 准备一个有宽高的dom ———— 其他内容从父组件传过来 --><div :id="uid" :style="style"></div></div>
</template>
<script setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';
const props =  defineProps({dataSource: {type: Object,default: null,required: true},canvasWidth: {type: String,default: '',required: true},canvasHeight: {type: String,default: '',required: true}
})
const uid = ref('')
const myChart = ref(null)
// 时间戳+随机字符
uid.value = new Date().getTime() + Math.random().toString(32).slice(2, 10)
console.log('uid:', uid.value);let style = computed(() => ({width: props.canvasWidth,height: props.canvasHeight
}))
console.log('style:', style.value);const init = () => {// 基于准备好的dom，初始化echarts实例myChart.value = echarts.init(document.getElementById(uid.value))// 绘制图表myChart.value.setOption(props.dataSource)
}
onMounted(() => {// nextTick(() => {//     init()// })init()
})</script>
<style scoped></style>

2.3 需要调用MyCharts组件的父组件：

<template><div :style="{ transform: `scale(${scale})` }"><div class="title">封装echarts图表</div><!-- 调用图表组件 --><MyCharts :dataSource="dataSource" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight"></MyCharts><MyCharts :dataSource="dataSource2" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight"></MyCharts></div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import MyCharts from '../../components/echarts/MyCharts.vue'    // 引入封装的图表组件
import { useSelfAdaption } from '../../hooks/useSelfAdaption'const dataSource = reactive({title: {text: '周销售总额'},tooltip: {},xAxis: {data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: {},series: [{name: '小米',type: 'bar',data: [60, 45, 52, 38, 49, 55, 66]}]
})
const dataSource2 = reactive({title: {text: '数据都想躺平'},tooltip: {},xAxis: {data: ['梦想', '咸鱼', '躺平', '鸡汤', '努力', '暴富']},yAxis: {},series: [{name: 'vivo',type: 'line',data: [50, 80, 66, 70, 69, 71]}]
})
const canvasWidth = ref('400px')
const canvasHeight = ref('200px')// 自适应 - 缩放
const { scale } = useSelfAdaption()</script>
<style lang="less" scoped>
.title{text-align: center;
}
</style>

3、效果：

4、这里我还引入了前面封装好的自适应大屏的useSelfAdaption的hooks方法 ：

import { useSelfAdaption } from '../../hooks/useSelfAdaption'// 自适应 - 缩放
const { scale } = useSelfAdaption()

使用： :style="{ transform: `scale(${scale})` }"

<template><div :style="{ transform: `scale(${scale})` }"><div class="title">封装echarts图表</div>

这样你就成功封装好了一个echarts图表组件并成功使用啦！

扩展：

        性能优化：

在数据可视化大屏中，图表的性能尤为重要。我们可以通过以下方式进行优化：

合理使用debounce来减少窗口大小变化时的resize事件触发频率。
使用canvas渲染模式，相比于svg，canvas在大数据量下有更好的性能表现。
利用ECharts的showLoading和hideLoading方法，在数据加载时显示加载动画，避免用户看到空白的图表。

        交互优化：

为了提升用户体验，我们可以增加一些交互功能：

提供缩放控制，允许用户通过鼠标滚轮或者按钮来缩放图表。
实现图表的导出功能，允许用户将当前的图表保存为图片或者PDF文件。