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

使用示例

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

//使用

//变量
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