echarts 圆形进度条圆角

echarts 圆形进度条圆角

• • @[TOC](echarts 圆形进度条圆角)

更新一下
刚被csdn小伙伴告知，echarts即将发布5.0版本，新增圆角功能了，再也不用为了圆角掉头发了啊哈哈哈哈哈哈哈哈哈哈哈哈

最近写项目的时候UI设计了一个图(下图所示),有个地方难到我了，就是蓝色进度条圆角那里，我翻遍了百度，都没找到echarts设置圆角的属性，有找到type="bar"的解决方法，但是我的是type="pie"，然后翻了翻echarts社区里的各种各种，最后发现了如果想要圆角就得换一种思路

我是在echarts社区里找了个类似的，然后在里面对着设计图各种改，其实我是把进度条换成空心的，然后给border使劲加宽度，加到一定的宽度就会重合到一起，看起来就像是个圆角一样

下面就是具体的代码

var uploadedDataURL = "../../img/point.png";let Green = {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(217,228,232,0.5)' // 0% 处的颜色}],globalCoord: false};var dataValArray = 0.72;var datatext = ['72'];var datasubtext = ['2019年9月'];option = {backgroundColor: '#fff',title: {//圆形中间的文字text: "72%",left: "center",top: "38%",textStyle: {color: "#DC722F",fontSize: 24,align: "center",fontWeight:400}},graphic: { //图形中间文字type: "text",left: "center",top: "65%",style: {text: "2019年9月",textAlign: "center",fill: "#CFCFCF",fontSize: 10}},series: [{//渐变圆环  这是后面的灰色背景圆环name: "圆环",type: "pie",radius: [46, 68],//控制圆环大小的startAngle: 180,hoverAnimation: false,avoidLabelOverlap: true,z: 0,zlevel: 0,label: {show: false,normal: {show: false}},data: [{value: 0,name: "",itemStyle: {normal: {color: Green}}}]},{//这是个仪表盘的样式，我把它隐藏了name: "",type: "gauge",radius: "90%",startAngle: 180,clockwise: true,splitNumber: 50,hoverAnimation: true,axisTick: {show: false},splitLine: {length: 0,lineStyle: {width: 1,color: "#fff"}},axisLabel: {show: false},pointer: {show: false},axisLine: {lineStyle: {opacity: 0}},detail: {show: false},data: [{value: Math.round((dataValArray * 100)),name: ""}]},{//进度圆环  这是中间的蓝色圆环name: 'Line 1',type: 'pie',startAngle: 260,clockWise: true,radius: ['80%','85%'],//控制圆环大小的itemStyle: {normal: {label: {show: true},labelLine: {show: false},}},hoverAnimation: false,data: [{value: 75,name: 'invisible',itemStyle: {normal: {color: '#fff',borderWidth: 1,borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#459EF9'}, {offset: 1,color: '#39FAD8'}]),borderWidth: 5//就是在这里加宽度}}}, { //进度条起始地方有个圆环，是放了个图片上去的，这是调整图片的name: "",value: 0,label: {position: 'inside',backgroundColor: {image: uploadedDataURL},width: 16,height: 16,borderRadius: 20,padding: 14}}, {value: 100 - Math.round((dataValArray * 100)),name: 'invisible',itemStyle: {normal: {color: 'transparent', //未完成的圆环的颜色，我设置成了透明label: {show: false},labelLine: {show: false}}}}]}]};

看到此文章的希望能帮到你，我写项目的时候也是愁的不行，终于摸索出来了，就想着分享一下，让其他朋友能少走弯路，具体有什么不懂的可以来问一下，我也是小白，不过可以尽努力帮忙的，在此，感谢浏览~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！