一、代码
1 app.title = '已安装通讯盒电站统计'; 2 3 option = { 4 backgroundColor: '#0f0f31',//#0f0f31 5 title: { 6 show:true, 7 x:"left", 8 text: '已安装通讯盒电站统计', 9 textStyle:{ 10 fontSize:16 11 ,fontWeight:'normal' 12 ,color:'#72a1d2' 13 }, 14 left:20, 15 top:10, 16 borderColor :'#10395c', 17 borderWidth :2, 18 }, 19 tooltip: { 20 trigger: 'item', 21 formatter: "{a} <br/>{b}: {c} ({d}%)" 22 }, 23 24 graphic: [ { 25 type: 'group', 26 id: 'textGroup2', 27 left: 370, 28 top: 400, 29 position :[10, 0], 30 children: [ 31 32 { 33 type: 'text', 34 z: 100, 35 top: 'middle', 36 left: 100, 37 style: { 38 formatter: "{a} <br/>{b}: {c} ({d}%)", 39 text: [ 40 '已安装1280个', 41 '未安装320个', 42 ].join(' '), 43 font: '16px cursive', 44 textVerticalAlign :'middle', 45 fill:'#13a7d1', 46 47 48 } 49 } 50 ] 51 }], 52 series: [ 53 { 54 name:'已安装通讯盒电站统计', 55 type:'pie', 56 radius:['10%','18%'], 57 avoidLabelOverlap:false, 58 color:['#32A8FF',' #02C800','#9f47fd'], 59 formatter: '{b}: {d}', 60 slient:true, 61 markLine :{ 62 label :{ 63 show:true, 64 position :'outside' 65 }, 66 }, 67 labelLine:{ 68 normal:{ 69 show:true, 70 length:14 , 71 length2 :56, 72 } 73 }, 74 label:{ 75 normal:{ 76 show:true, 77 position:'center', 78 formatter:function(){ 79 return '80%' 80 }, 81 textStyle:{ 82 fontSize:20, 83 color:'rgba(20, 180, 213, 0.9)', 84 } 85 } 86 }, 87 emphasis:{ 88 show:true, 89 textStyle:{ 90 fontSize:30, 91 //fontWeight:'bold' 92 } 93 }, 94 95 data:[{value:1280,name:'已安装',itemStyle:{ 96 normal:{ 97 color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{ 98 //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上 99 100 offset: 0, 101 color: '#2a8af6' 102 }, { 103 offset: 1, 104 color: '#393eda' 105 }]) 106 },emphasis : { 107 label : { 108 show : true, 109 formatter : "{b} {d}%", 110 color:'white', 111 } 112 } 113 }},{value:320,name:'未安装',itemStyle:{ 114 normal:{ 115 color:'transparent', 116 } 117 }}] 118 },{ 119 name:'', 120 type:'pie', 121 radius:['8%','10%'], 122 avoidLabelOverlap:false, 123 legendHoverLink :false, 124 label:{ 125 show:false, 126 }, 127 tooltip:{//禁止鼠标悬停显示提示框 128 show:false, 129 }, 130 hoverAnimation:false ,//禁止鼠标悬停放大区域 131 color:['#bcdbfa'], 132 133 data:[{value:100}] 134 } 135 ] 136 };
二、效果图