当前位置：首页 > news >正文

echarts中给饼图加圆点

news 来源：原创 2025/6/13 15:21:10

echarts中饼图加圆点由于找不到怎么设置小圆点，尝试使用scatter散点图的方式，但是定位会出现问题

下面上上面示意图的完整代码如下：

 var data = {'name': '本年冷量','value': [329.2],};var color = ['rgba(45, 82, 216, 1)', '#00B1BF', '#00F7F8']let option = {title: {text: ['{a|' + data.value[0] + '}{b|GJ}','{c|本年冷量}'].join('\n'),textStyle: {rich: {a: {fontSize: 30,color: color[0],fontWeight: 'bold'},b: {fontSize: 16,color: '#000',verticalAlign: 'bottom',padding: [0, 0, 5, 5] // 调整位置},c: {fontSize: 14,color: '#666',padding: [10, 0, 0, 0]}}},left: 'center',top: 'center',itemGap: 0},tooltip: {formatter: function (params) {return '<span style="color: #000;">占比：' + params.value + '%</span>';}},angleAxis: {max: 1000,clockwise: true, // 逆时针// 隐藏刻度线show: false,startAngle: 90,},radiusAxis: {type: 'category',show: true,axisLabel: {show: false,},axisLine: {show: false,},axisTick: {show: false},},polar: [{center: ['50%', '50%'], //中心点位置radius: '90%' //图形大小}],series: [{name: '小环',type: 'gauge',splitNumber: 12,radius: '60%',center: ['50%', '50%'],startAngle: 0,endAngle: 359.9999,axisLine: {show: false},axisTick: {show: true,lineStyle: {color: color[1],width: 3.5,shadowBlur: 1,shadowColor: color[1],},length: 0,splitNumber: 3},splitLine: {show: false},axisLabel: {show: false},detail: {show: false}}, {type: 'bar',z: 10,data: data.value,showBackground: false,coordinateSystem: 'polar',roundCap: true,barWidth: 10,itemStyle: {normal: {opacity: 1,color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{offset: 0,color: 'rgba(45, 82, 216, 1)'},{offset: 0.85,color: 'rgba(45, 82, 216, 0)'},{offset: 1,color: 'rgba(45, 82, 216, 0)'}]),shadowBlur: 5,shadowColor: '#2A95F9',}},},{type: 'pie',name: '内层细圆环',radius: ['48%', '30%'],startAngle: 90,hoverAnimation: false,clockWise: true,itemStyle: {normal: {color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [{offset: 0,color: 'rgba(45, 82, 216, 0.5)' // 12点方向深色},{offset: 1,color: 'rgba(45, 82, 216, 0.1)' // 回到12点方向完全透明}]),}},tooltip: {show: false,},label: {show: false},data: [100]},],graphic: [{ //2、中心的文字设置type: 'text',z: 100,left: 'center',top: '28%',style: {x: 0,y: 0,fill: 'rgba(45, 82, 216, 1)', // 文字颜色为黑色text: "•",  // 小圆点font: 'bolder 30px "Microsoft YaHei", sans-serif',textAlign: 'center', //3、居中显示stroke: '#fff', // 边框颜色为白色lineWidth: 2,  // 设置边框宽度为2px}}]};

graphic: [{type: 'text',z: 100,left: 'center',top: '28%',style: {x: 0,y: 0,fill: 'rgba(45, 82, 216, 1)', // 文字颜色为黑色text: "•",  // 小圆点font: 'bolder 30px "Microsoft YaHei", sans-serif',textAlign: 'center', stroke: '#fff', // 边框颜色为白色lineWidth: 2,  // 设置边框宽度为2px}}]

简单好用