Echarts 封装通用组件

server/2025/2/3 8:11:27/

目录结构

相关文件可以去我的 gitee 下载：https://gitee.com/hao-xiugong/management-vue-ts

在这里插入图片描述

index.ts

import BaseEcharts from "@/components/page-echarts/src/base-echarts.vue";
import LineEcharts from "@/components/page-echarts/src/line-echarts.vue";
import RoseEcharts from "@/components/page-echarts/src/rose-echarts.vue";
import BarEcharts from "@/components/page-echarts/src/bar-echarts.vue";
import MapEcharts from "@/components/page-echarts/src/map-echarts.vue";
import PieEcharts from "@/components/page-echarts/src/pie-echarts.vue";export default BaseEcharts;
export { PieEcharts, LineEcharts, RoseEcharts, BarEcharts, MapEcharts };

组件封装

base-echarts.vue

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, useTemplateRef, watchEffect } from "vue";
import type { EChartsOption } from "echarts";interface IProps {option: EChartsOption;
}// 注册map
import chinaJSON from "../data/china.json";echarts.registerMap("china", chinaJSON as any);const echartsRef = useTemplateRef<HTMLElement>("echartsRef");const props = defineProps<IProps>();onMounted(() => {const echartsInstance = echarts.init(echartsRef.value!, "light", {renderer: "canvas"});// 第一次进入setOption 监听option变化watchEffect(() => echartsInstance.setOption(props.option));// 监听window的缩放window.addEventListener("resize", () => {echartsInstance.resize();});
});
</script><template><div class="base-echarts"><div class="echarts" ref="echartsRef"></div></div>
</template><style scoped>
.base-echarts {.echarts {height: 300px;}
}
</style>

然后二次封装，以 map-echarts.vue 为例：

<script setup lang="ts">
import { computed } from 'vue'
import type { EChartsOption } from 'echarts'
import type { IEchartsValueType } from '../types'
import { convertData } from '../utils/convert-data'interface IMapProps {showCitiesGoodsCount: IEchartsValueType[]
}
const props = defineProps<IMapProps>()
const option = computed<EChartsOption>((): any => {return {title: {},tooltip: {trigger: 'item',formatter: function (params: any) {return params.name + ':' + params.value[2]}},legend: {},visualMap: {min: 0,max: 60000,left: 20,bottom: 20,calculabel: true,text: ['高', '低'],inRange: {color: ['rgb(70,240,252)', 'rgb(255,220,46)', 'rgb(245,38,186)']},textStyle: {color: '#fff'}},geo: {map: 'china',roam: 'scale',emphasis: {areaColor: '#f4cccc',borderColor: 'rgb(9,54,95)',itemStyle: {areaColor: 'f4cccc'}}},series: [{name: '',type: 'scatter',coordinateSystem: 'geo',map: 'china',data: convertData(props.showCitiesGoodsCount),symbolSize: 12,emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}
})
</script>
<template><div class="map-echarts"><base-echarts :option="option"></base-echarts></div>
</template>
<style scoped lang="less"></style>

在这里插入图片描述