Vue中使用Echarts封装为公用组件（简单复制粘贴）

Vue中封装Echarts组件

前提
直奔主题

本文以Vue3代码演示 Vue2同理

前提

中文官网： https://echarts.apache.org/zh/index.html

npm安装Echarts

npm install echarts
or
pnpm install echarts
or
yarn add echarts

直奔主题

创建Echarts.vue文件，代码如下👇

<template><div :id="id" :style="{ height, width }" />
</template>
<script setup>
import * as echarts from "echarts";let myChart = ref(null);const props = defineProps({// 区分chartid: {type: String,default: 'e-chart',required: true},// echarts 画布宽高width: {type: String,default: '100%',},height: {type: String,default: '300px',},// echarts loadingloading: {type: Boolean,default: true,},// echarts需要得 options以及其他配置fullOptions: {type: Object,default: () => ({}),required: true},})//重绘图表函数
const resizeHandler = () => {myChart.value.resize();
}
//设置防抖，保证无论拖动窗口大小，只执行一次获取浏览器宽高的方法
const debounce = (fun, delay) => {let timer;return function () {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {fun();}, delay);}
};
const cancalDebounce = debounce(resizeHandler, 50);//监听图表数据时候变化，重新渲染图表
watch(() => [props.fullOptions.options, props.loading], () => {if (!props.loading) {myChart.value.hideLoading();myChart.value.setOption(props.fullOptions.options, true);nextTick(() => {cancalDebounce()})}
}, { deep: true })//页面成功渲染，开始绘制图表
onMounted(() => {//配置为 svg 形式，预防页面缩放而出现模糊问题；图表过于复杂时建议使用 CanvasmyChart.value = echarts.init(document.getElementById(props.id), { renderer: 'svg' })//加载图标myChart.value.showLoading({text: '',color: '#409eff',textColor: '#000',maskColor: 'rgba(255, 255, 255, .95)',zlevel: 0,lineWidth: 2,});if (!props.loading) {myChart.value.hideLoading();myChart.value.setOption(props.fullOptions.options, true);}//自适应不同屏幕时改变图表尺寸window.addEventListener('resize', cancalDebounce);
})
//页面销毁前，销毁事件和实例
onBeforeUnmount(() => {window.removeEventListener('resize', cancalDebounce)myChart.value.dispose()
})</script>

添加echarts得options配置文件optionsConfig.js，代码如下👇

export const chartOptions = {// 推荐以setXXXOption方式命名setDemoOption(data) {let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']let echartData = [{name: '安全帽佩戴报警',value: '13'},{name: '非法闯入报警',value: '33'},{name: 'C类',value: '13'},{name: 'D类',value: '13'}]let formatNumber = function (num) {let reg = /(?=(\B)(\d{3})+$)/greturn num.toString().replace(reg, ',')}const option = {color: color,// tooltip: {//     trigger: 'item'// },legend: {orient: 'vertical',icon: 'rect',x: '5%',y: 'center',itemWidth: 12,itemHeight: 12,align: 'left',textStyle: {rich: {name: {fontSize: 12,color: 'rgba(255, 255, 255, 0.7)'},value: {fontSize: 16,padding: [0, 5, 0, 5],color: 'rgba(255, 255, 255, 0.7)'},unit: {fontSize: 12}}},formatter: function (name) {let res = echartData.filter((v) => v.name === name)res = res[0] || {}let unit = res.unit || ''// return '{name|' + name + '}  {value|' + res.value + '}{unit|' + unit + '}'return '{name|' + name + '} '},data: echartData},series: [{type: 'pie',radius: ['20%', '40%'],center: ['65%', '60%'],color,data: echartData.map((item, index) => {return {label: {color: color[index]},...item}}),hoverAnimation: false,itemStyle: {borderWidth: 2},labelLine: {show: true,length: 30,length2: 60,lineStyle: {color: '#0080ff'}},label: {show: true,formatter: (params) => {return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}'},padding: [0, -80, 25, -100],rich: {icon: {fontSize: 16},name: {fontSize: 12,padding: [0, 10, 0, 4]},value: {fontSize: 12,fontWeight: 'bold'}}}}]}return option},}

在Vue视图中引入Echarts组件使用，代码示例如下👇

<ECharts id="demoEcharts" width="500px" height="500px" :full-options="echartsOptions" :loading="loading"></ECharts>

//引入echarts的options配置文件optionsConfig.js
import { chartOptions } from '@/components/ECharts/optionsConfig.js'//定义loading、echarts配置项
const loading = ref(true)
const echartsOptions = reactive({options:{}
})// 模拟异步
setTimeout(() => {loading.value = falseechartsOptions.options = chartOptions.setDemoOption();
},500)