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

news2024/9/21 23:39:37

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({
  // 区分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>

添加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
	},

}

在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)