vue3+ts echarts的使用

1、安装echarts

npm install echarts --save

2、在utils文件夹下创建一个echarts.js文件

//引入echarts
import * as echarts from 'echarts/core'
//引入雷达图、柱状图
import { RadarChart, BarChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TooltipComponent,
  TitleComponent,
  GridComponent,
  // 数据集组件
  DatasetComponent,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent,
} from 'echarts/components'
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use([
  TooltipComponent,
  TitleComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  RadarChart,
  BarChart,
])
export default echarts

3、在main.js中进行挂载（按需引入可忽略这步）

import echarts from '@common/utils/echarts'

const pinia = createPinia()

pinia.use(
  createPersistedState({
    storage: sessionStorage,
  }),
)

// 创建并挂载根实例
const app = createApp(App)

app.config.globalProperties.$echarts = echarts;
app.use(router).use(pinia).mount('#app')

4.上代码（这里是按需引入的步骤）

在需要使用的页面里先定义一个容器，然后将图表放入这个容器就行

<template>
  <div ref="radarChartRef" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script setup lang="ts">
  import echarts from '@common/utils/echarts'
  import { ref, onMounted, watch } from 'vue'
  import { commonStore } from '@/store/common'

  import { IProfitModelRadar } from '../../modal'

  const props = withDefaults(
    defineProps<{
      radarData: IProfitModelRadar[]
    }>(),
    {},
  )

  const myChart = ref<any | null>(null)
  const radarChartRef = ref()

  onMounted(() => {
    myChart.value = echarts.init(radarChartRef.value) // 初始化eCharts实例

    if (props.radarData.length) {
      setOption()
    }
  })

  const setOption = () => {
    const scoreData = props.radarData.map(v => v.score)
    myChart?.value.setOption({
      radar: [
        {
          indicator: props.radarData,
          splitNumber: 10,
          axisName: {
            // 自定义文字颜色 使用字符串模板，模板变量为指示器名称 {value}
            formatter: function (value: string, indicator: any) {
              return `{a|${value}} {b|${indicator.score}分}`
            },
            // 自定义标签
            rich: {
              a: {
                color: '#ffffff',
                fontSize: '1rem',
              },
              b: {
                color: '#ABA6EA',
                fontSize: '1rem',
              },
            },
          },
          splitLine: {
            // 分隔线颜色
            lineStyle: { color: '#453A80' },
          },
          axisLine: {
            // 坐标轴线线的颜色
            lineStyle: { color: '#453A80' },
          },
          splitArea: {
            // 分隔区域颜色
            areaStyle: { color: ['#302663', '#2A1E5C'] },
          },
        },
      ],
      series: [
        {
          type: 'radar',
          areaStyle: {
            color: 'rgba(161,233,229,0.3)',
            shadowColor: 'rgb(10,216,237)',
            shadowBlur: 60,
          },
          lineStyle: { color: '#0AD8ED' },
          data: [
            {
              value: scoreData,
              name: '城市代理商综合能力图',
            },
          ],
          // 拐点颜色
          itemStyle: { color: '#fff' },
        },
      ],
    })
  }

  watch(
    () => props.radarData,
    () => {
      setOption()
    },
  )

  // 设置实例参数
  watch(
    () => commonStore().clientWidth,
    () => {
      myChart.value?.resize()
    },
  )
</script>

<style scoped lang="less"></style>