当前位置：首页 > article >正文

Echarts 封装通用组件

article 2025/2/3 10:32:42

目录结构

相关文件可以去我的 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>

在这里插入图片描述