Vue3+vite+ts+echarts 图表示例

说明

代码都从网上拼凑过来，整理出来，的因为本人在做这个的时候，发现要找许多资料，就统一整理一下

安装

npm install echarts --save

1.下载china.json 由于内容太多

各位可以到网上下载最新的china.json

新建 useEcharts.ts

import * as echarts from 'echarts'

import chinaMapData  from './china.json'
echarts.registerMap('china', chinaMapData)

export default function (el: HTMLElement,mode: string) {
  const echartInstance = echarts.init(el,mode)
  const setOptions = (options: echarts.EChartsOption) => {
    echartInstance.setOption(options)
  }
  const updateSize = () => {
    echartInstance.resize()
  }

  window.addEventListener('resize', () => {
    echartInstance.resize()
  }) 
 
  return {
    echartInstance,
    setOptions,
    updateSize, 
  }
}

封装控件 BaseEchart.vue

<template>
  <div class="base-echart-box" :style="{ width: width, height: height }">
    <div ref="echartDivRef" class="base-echart"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps, withDefaults, watchEffect, defineEmits, computed } from 'vue';
import { EChartsOption } from 'echarts';
import useEchart from './useEcharts';

// 定义props
const props = withDefaults(
  defineProps<{
    options: EChartsOption;
    width?: string;
    height?: string;
    mode?: string;
  }>(),
  {
    width: '100%',
    height: '100%',
    mode: 'vintage'
  }
);

const emits = defineEmits(['echartClick']);

const echartDivRef = ref();

onMounted(() => {
  const { setOptions, echartInstance } = useEchart(
    echartDivRef.value,
    props.mode
  );

  watchEffect(() => {
    setOptions(props.options);
  });
  //图表项点击
  echartInstance.on('click',  (param)=> { 
    param.title = props.options.title.text
    emits('echartClick', param)
  });

});
</script>
<style lang="less">
.base-echart-box {
  padding: 14px 24px;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
  min-height: 200px;
  .base-echart {
    width: 100%;
    height: 100%;
  }
}
</style>

使用示例

//引用
import BaseEchart from "@/components/Base/chart/BaseCharts.vue";

//使用
<BaseEchart title="测试图表" :options="options"></BaseEchart>
//变量
const rankingData = [
 { name: "赵四", value: 700 },
 { name: "关二", value: 130 },
 { name: "刘大", value: 100 },
 { name: "诸五", value: 80 },
 { name: "张三", value: 30 },
];
const options = ref(
 computed(() => {
   return {
     dataset: {
       source: rankingData.map((item) => {
         return [item.value, item.name];
       }),
     },
     grid: { containLabel: true },
     xAxis: {
       name: "",
       splitLine: {
         show: false,
       },
     },
     yAxis: {
       type: "category",
       splitLine: {
         show: false,
       },
     },
     series: [
       {
         type: "bar",
         encode: {},
         label: {
           normal: {
             position: "right",
             show: true,
           },
         },
         labelLine: {
           normal: {
             show: false,
           },
         },
       },
     ],
   };
 })
);

效果图

1645666897(1).png