echarts 饼图引导线和圆点 ts vue3.0

本文主要是介绍echarts 饼图引导线和圆点 ts vue3.0，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述
代码如下

在这里插入代码片
<template>
<div id="chart" style="width: 100%; height: 200px"></div>
</template>
<script setup lang="ts">
const chartEle: HTMLElement = document.getElementById("chart") as HTMLElement;
const chart = init(chartEle);const pieData = [{name: "已校验",value: 0,label: {color: "#5470DE",},},{name: "未校验",value:0,label: {color: "#51cf66",},},];const colorList = ["#5470DE", "#51cf66"];const options: any = {// 颜色tooltip: {trigger: "item",},series: [{type: "pie",radius: ["30", "70"],// radius:["100"],center: ["50%", "50%"],data: pieData.map((item: any, index) => {item.label = {color: colorList[index],};return item;}),label: {formatter: " {b}  \n  {c}  ",},itemStyle: {color: function (colors: any) {var colorList = ["#5470DE", "#51cf66"];return colorList[colors.dataIndex];},},labelLine: {length: 10, // 第一段指导线 长度length2: 60, // 第二段指导线 长度},},//--------------用来展示圆点的---------------{type: "pie",radius: ["30", "70"],// radius:["100"],center: ["50%", "50%"],data: pieData.map((item: any, index) => {item.label = {color: colorList[index],};return item;}),tooltip: { show: true },itemStyle: {},label: {backgroundColor: "auto", //圆点颜色，auto：映射的系列色height: 0,width: 0,lineHeight: 0,borderRadius: 2.5,padding: [-2.5, -2.5, -2.5, -2.5],},labelLine: {length: 10, // 第一段线 长度length2: 60, // 第二段线 长度show: false,},},],};// 使用刚指定的配置项和数据显示图表。options && chart.setOption(options, true);</script>