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

本文以Vue3代码演示 Vue2同理

前提

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

npm安装Echarts

npm install echarts
or
pnpm install echarts
or
yarn add echarts

直奔主题

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

   <template>
     <div :id="id" :style="{ height, width }" />
   </template>
   <script setup>
   import * as echarts from "echarts";
   
   let myChart = ref(null);
   
   const props = defineProps({
     // 区分chart
     id: {
       type: String,
       default: 'e-chart',
       required: true
     },
     // echarts 画布宽高
     width: {
       type: String,
       default: '100%',
     },
     height: {
       type: String,
       default: '300px',
     },
     // echarts loading
     loading: {
       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 形式，预防页面缩放而出现模糊问题；图表过于复杂时建议使用 Canvas
     myChart.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>
   

2. 添加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})+$)/g
   	      return 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
   	},
   
   }
   

3. 在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 = false
     echartsOptions.options = chartOptions.setDemoOption();
   },500)
   

到这里就结束了，后续还会更新 前端 系列相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！

相关文章👇
图表集
在Vue2项目中使用echarts