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文件。