seo站长教程,云南鼎润房地产开发有限公司网页设计,frontpage2003制作网页教程,京东商城网站设计echarts中饼图加圆点 由于找不到怎么设置小圆点#xff0c;尝试使用scatter散点图的方式#xff0c;但是定位会出现问题 下面上上面示意图的完整代码如下#xff1a; var data {name: 本年冷量,value: [329.2],};var color [rgba(45, 82, 216, 1), #00B1BF, #00F7F8]let o…
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 stylecolor: #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}}] 简单好用
