echarts 環形圖（圓角）
阿新 • • 發佈：2022-05-17
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.js"></script> 10 </head> 11 12 13 <body> 14 <div class="" id="baseSy" style="width: 300px; height: 300px;"></div> 15 <script> 16 17 function initEchartsBar1() {18 var chartDom = document.getElementById('baseSy'); 19 var myChart = echarts.init(chartDom); 20 var option; 21 22 23 option = { 24 title: { 25 text: '75', 26 textStyle: { 27 color:'#01c4a3', 28 fontSize: 40 29 }, 30 subtext: '總分：100分', 31 subtextStyle: { 32 color: '#909090', 33 }, 34 itemGap: -10, // 主副標題距離 35 left: 'center', 36 top: 'center' 37 }, 38 angleAxis: { 39 max: 100, // 滿分 40 clockwise: false, // 逆時針 41 // 隱藏刻度線 42 axisLine: { 43 show: false 44 }, 45 axisTick: { 46 show: false 47 }, 48 axisLabel: { 49 show: false 50 }, 51 splitLine: { 52 show: false 53 } 54 }, 55 radiusAxis: { 56 type: 'category', 57 // 隱藏刻度線 58 axisLine: { 59 show: false 60 }, 61 axisTick: { 62 show: false 63 }, 64 axisLabel: { 65 show: false 66 }, 67 splitLine: { 68 show: false 69 } 70 }, 71 polar: { 72 center: ['50%', '50%'], 73 radius: '140%' //圖形大小 74 }, 75 series: [{ 76 type: 'bar', 77 data: [{ 78 name: '作文得分', 79 value: 75, 80 itemStyle: { 81 normal: { 82 color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ 83 offset: 0, 84 color: '#aaf14f' 85 }, { 86 offset: 1, 87 color: '#0acfa1' 88 }]) 89 } 90 }, 91 }], 92 coordinateSystem: 'polar', 93 roundCap: true, 94 barWidth: 25, 95 barGap: '-100%', // 兩環重疊 96 z: 2, 97 },{ // 灰色環 98 type: 'bar', 99 data: [{ 100 value: 100, 101 itemStyle: { 102 color: '#e2e2e2', 103 shadowColor: 'rgba(0, 0, 0, 0.2)', 104 shadowBlur: 5, 105 shadowOffsetY: 2 106 } 107 }], 108 coordinateSystem: 'polar', 109 roundCap: true, 110 barWidth: 25, 111 barGap: '-100%', // 兩環重疊 112 z: 1 113 }] 114 115 }; 116 option && myChart.setOption(option); 117 } 118 initEchartsBar1(); 119 </script> 120 121 122 </body> 123 124 125 </html>
搜尋
複製