本文主要是介绍引入echarts环形图及显示后端数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
实现效果：
1.下载echarts 并引用
npm install echarts --save 或 pnpm install -S echarts
项目中引用：
在项目main.ts中 import * as echarts from "echarts"; //引入echarts
3.页面中使用
<div id="main" class="chart" :option="option"></div>//定义一个有宽高的盒子
//图表
const echartInit = async () => {var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;let datas = []let numAll = ('0')
//调用后台接口const res = await getType();if (res && res.code == 200) {datas = res.data}//总计datas.forEach((item) => {let value = parseInt(item.value)numAll = numAll+ value - 0})// 指定图表的配置项和数据option = {// title: {// text: '诉求类型分布',// left: 'center',// textStyle: {// color: '#fff',// fontWeight: 'normal',// fontSize: 18// }// },graphic: [{//环形图中间添加文字type: "text", //通过不同top值可以设置上下显示left: "45%",top: "47%",style: {text: `总计\n\n${numAll}条`,textAlign: "center",fill: "#fff", //文字的颜色fontSize: 12,lineHeight: 10,},},],tooltip: {trigger: 'item'},legend: {// top: '5%',// orient: 'vertical',left: 'center',bottom: -5,icon: 'circle',textStyle: {//图例文字的样式color: '#fff',fontSize:12,}},color:['#33ff99','#6699ff','#be99FF','#FFFF66'],//修改圆形图颜色series: [{name: '诉求类型',type: 'pie',radius: ['35%', '50%'],// center:['30%', '50%'],avoidLabelOverlap: true,minAngle: 20,//最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: false,normal: {show: true,lineHeight:10,// position: 'inside',formatter: '{b}{d}%\n\n{c}条', //自定义显示格式(b:name, c:value, d:百分比)fontSize: 10 // 字体大小},// position: 'center'},labelLine: {length: 20,length2: 50,maxSurfaceAngle: 80},emphasis:{shadowBlur: 10,hadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'},emphasis: {label: {show: true,fontSize: 12,fontWeight: 'bold'}},itemStyle: {borderColor: '#fff',borderWidth: -1},data: datas}]};// 使用刚指定的配置项和数据显示图表。option && myChart.setOption(option);}可根据自己需求配置相关样式
这篇关于引入echarts环形图及显示后端数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
