1. 程式人生 > 其它 >echarts 通過echarts實現圓環進度條

echarts 通過echarts實現圓環進度條

 var e = 60;
option = {
        title: {
          show: true,
          text: e + "%",
          x: "center",
          y: "center",// 通過x,y將標題(進度)定位在圓環中心
          textStyle: {
            fontSize: "25",
            color: "white",
            fontWeight: "400",
            fontFamily: "DINPro, DINPro-Regular
", }, }, tooltip: { trigger: "item", formatter: "{d}%", show: false, }, legend: { orient: "vertical", x: "left", show: false, }, series: { name: "", type: "pie", radius: [
"65%", "85%"], avoidLabelOverlap: true, hoverAnimation: false, label: { normal: { show: false, position: "center", }, emphasis: { show: false, }, }, labelLine: { normal: { show:
false, }, }, data: [ { value: e, name: "", itemStyle: { color: "#2AB296", }, }, { value: 100 - e, name: "", itemStyle: { color: "transparent",//透明色,也可以設定把其他顏色 }, }, ], }, }