echart极坐标系下绘制扇形、圆环详解

---

前言

基于vue3的框架使用echart库绘制扇形、圆环时，发现官方文档示例不太清晰，通过对官方示例的更改，实现扇形、圆环的简单绘制。

一、echart绘制扇形

1.引入库

代码如下（示例）：

import * as echarts from 'echarts'

2.初始化dom节点

代码如下（示例）：

<template>
  <div ref="chartDom" style="width: 100%; height: 400px"></div>
</template>

<script setup>
const chartDom = ref(null)
const myChart = ref(null)
myChart.value = echarts.init(chartDom.value)
</script>

---

3.配置项设置

echart配置项示例代码如下：

<script setup>
  const data = [[60, 30, 90]]
  let option = {
   
    polar: {
   },
    angleAxis: {
   
      type: 'value',
      splitNumber: 4,
      min: 0,
      max: 360,
      axisLine: {
   
        show: false
    }
    },
    radiusAxis: {
   
      type: 'value',
      splitNumber: 5,
      min: 0,
      max: 100,
      z: 100
    },
    series: [
      {
   
        type: 'custom',
        coordinateSystem: 'polar',
        itemStyle: {
   
          color: '#d14a61'
        },
        renderItem: function (params, api) {
   
          // api.size 表示得到坐标系上一段数值范围对应的长度。
          // api.coord 意思是进行坐标转换计算。例如 var point = api.coord([api.value(0), api.value(1)]) 表示data中的数值转换成坐标系上的点。
          // data[[半径,角度]]
          // 极坐标系为顺时针绘制，且0度在y轴