前言

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。其使用方式颇为简单。

一、饼图

（1）【/src/views/Example/PieEchart.vue】

<template>
  <div style="padding: 100px; ">
    <div style="display: flex; flex: 1; width: 400px; height: 400px;">
      <div id="ScUcTcCoverageChart" style="width: auto; height: auto; flex: 1; border: 1px solid #dcdfe6;"></div>
    </div>
  </div>
</template>

<script setup>
import { h, onMounted, onUnmounted, getCurrentInstance, reactive } from 'vue'
import * as echarts from 'echarts'

/**
 * 英雄熟练度
 */
const heroProficiency = reactive({
  list: [],
})
/**
 * 查询【英雄熟练度】数据
 */
const queryHeroProficiency = async () => {
  const res = {
    success: true,
    msg: '请求成功',
    data: [
      { name: '赵怀真', value: 51, victoryRate: '72%' },
      { name: '云缨', value: 25, victoryRate: '68%' },
      { name: '庄周', value: 10, victoryRate: '85%' },
      { name: '后羿', value: 15, victoryRate: '51%' },
    ]
  }
  if (res.success) {
    heroProficiency.list = res.data
  } else {
    proxy.$message({ message: res.msg, type: 'error', duration: 3000 })
  }

  handleInitHeroProficiencyChart()
}
/**
 * 实例化【英雄熟练度】饼图
 * 详情见：https://echarts.apache.org/examples/zh/index.html#chart-type-bar
 */
const handleInitHeroProficiencyChart = async () => {
  const chartDom = await document.getElementById('ScUcTcCoverageChart')
   
  // 销毁
  echarts.dispose(chartDom)
  // 实例化
  const myChart = echarts.init(chartDom)
  const option = {
    title: {
      text: '英雄熟练度',
      left: 'center',
      top: 5, // 修改标题高度
      textStyle: {
        color: '#999',
        fontWeight: 'normal',
        fontSize: 13
      }
    },
    tooltip: {
      trigger: 'item', // 可选值为'item'和'axis'，默认为'item'，表示鼠标悬浮在数据项上时触发tooltip，'axis'表示鼠标悬浮在坐标轴上时触发tooltip
      show: true, // 控制鼠标悬浮是否显示数据
      textStyle: {
        fontSize: 12,
        fontWeight: 'normal'
      }
    },
    legend: {
      orient: 'vertical', // 可选值为'horizontal'（水平布局）和'vertical'（垂直布局）
      top: 30, // 调整位置
      left: '0%', // 距离右侧位置
      icon: 'circle', // 修改小图标为圆形
      itemHeight: 12, // 修改圆形小图标的大小
      textStyle: {
        fontSize: 12, // 可控制每个legend项的间距
        color: "#828282",
        rich: {
          tag_one: {
            width: 60,
            color: '#000',
            fontSize: 12,
          },
          tag_two: {
            width: 40,
            color: '#333',
            fontSize: 12,
          },
          tag_three: {
            color: '#686868',
            fontSize: 12,
          },
        },
      },
      formatter: (name) => {
        let target
        for (let i = 0; i < heroProficiency.list.length; i++) {
          if (heroProficiency.list[i].name == name) {
            target = heroProficiency.list[i]
          }
        }
        return `{tag_one|${target.name}} {tag_two|${target.value}个} {tag_three|${target.victoryRate}}`
      },
    },
    color: ['#5470c6', '#91cc75', '#73c0de'], // 控制圆环图的颜色
    series: [
      {
        type: 'pie',
        radius: ['15%', '25%'], // 圆环分为内径和外径，就是两个半径不一样的饼图可组成一个圆环图，radius数组中的两项分别为内径和外径（相对画布的百分比），或者直接一个圆'30%'
        center: ['50%', '55%'], // 调整圆环图位置
        labelLine: {
          length: 20, // 牵引线高度
        },
        label: {
          alignTo: 'edge',
          formatter: (item) => {
            const str = `{a|${item.data.name}}\n{hr|}\n  {b|${item.data.value}场} 丨 {per|${item.data.victoryRate}}  `
            return str
          },
          minMargin: 20, // 最小外边距
          edgeDistance: 10, // 贴边距离
          backgroundColor: '#fff',
          borderColor: '#dcdfe6',
          borderWidth: 1,
          borderRadius: 4,
          rich: {
            a: {
              padding: [5, 20],
              color: '#000',
              align: 'center'
            },
            hr: {
              width: '100%',
              height: 1,
              backgroundColor: '#dcdfe6',
            },
            b: {
              color: '#000',
              fontSize: 12,
              lineHeight: 25,
              align: 'center'
            },
            per: {
              color: '#fff',
              backgroundColor: '#4C5058',
              padding: [4, 4, 3, 4],
              borderRadius: 4,
              lineHeight: 25,
              align: 'center'
            }
          }
        },
        data: heroProficiency.list,
        avoidLabelOverlap: true, // 防止牵引线堆叠挤在一块
        itemStyle: {
          emphasis: {
            opacity: 0.9
          }
        }
      }
    ]
  }

  // 点击事件
  myChart.on('click', function (params) {
    console.log(params);
  })
  option && myChart.setOption(option)
}

onMounted(() => {
  queryHeroProficiency()
})

onUnmounted(() => {
  // ...
})
</script>

<style lang="less" scoped>

</style>

（2）运行效果