Echarts饼图自定义
echarts默认的样式比较单一，想要改变效果就要自己定义一些样式，下面是我想要展示的饼图样式：
悬浮样式代码：
tooltip: { trigger: 'item', formatter: '{a}
{b}:{c}({d}%)' },
图例样式代码：
1 legend: { 2 left: 'left', 3 top: 'bottom', 4 // bottom: 10, 5 data: ['非甲烷总烃', 'PM2.5', 'PM10', '颗粒物', '油烟浓度'], 6 itemWidth: 24, // 设置宽度 7 itemHeight: 14, // 设置高度 8 itemGap: 5, // 设置间距 9 textStyle: { 10 // 文字颜色 11 color: '#fff', 12 // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400... 13 fontWeight: '400', 14 // 字体系列 15 fontFamily: 'Source Han Sans CN', 16 // 字体大小 17 fontSize: 12 18 } 19 },
线上文字样式代码：
1 series: [ 2 { 3 name: '占比：', 4 type: 'pie', 5 radius: [15, 75], // 饼图的大小 6 labelLine: {// 图形外文字线 7 normal: { 8 length: 5, 9 length2: 80, 10 lineStyle: { 11 color: '#28B1C7' 12 } 13 } 14 }, 15 center: ['50%', '50%'], 16 roseType: 'area', // 饼图的样式 17 label: { // 线上文字的样式 18 normal: { 19 formatter: '{b|{b}}{c|{c}}\n\n', // 线上文字 20 borderWidth: 20, 21 borderRadius: 4, 22 // shadowBlur:3, 23 // shadowOffsetX: 2, 24 // shadowOffsetY: 2, 25 // shadowColor: '#999', 26 padding: [0, -80], 27 rich: { 28 a: { 29 color: '#fff', 30 fontSize: 12, 31 lineHeight: 20 32 }, 33 b: { 34 color: '#fff', 35 fontSize: 12, 36 lineHeight: 20 37 }, 38 c: { 39 color: '#fff', 40 fontSize: 12, 41 lineHeight: 20 42 }, 43 d: { 44 color: '#fff', 45 fontSize: 12, 46 lineHeight: 20 47 } 48 // abg: { 49 // backgroundColor: '#333', 50 // width: '100%', 51 // align: 'right', 52 // height: 22, 53 // borderRadius: [4, 4, 0, 0] 54 // }, 55 /* hr: { 56 borderColor: '#333', 57 width: '100%', 58 borderWidth: 0.5, 59 height: 0 60 }, */ 61 // per: { 62 // color: '#333', 63 // padding: [2, 4], 64 // borderRadius: 2 65 // } 66 } 67 } 68 }, 69 data: [ 70 { 71 value: 10, 72 name: '非甲烷总烃', 73 itemStyle: { 74 normal: { 75 color: '#FDD100' 76 } 77 } 78 }, 79 { 80 value: 5, 81 name: 'PM2.5', 82 itemStyle: { 83 normal: { 84 color: '#08CED0' 85 } 86 } 87 }, 88 { 89 value: 15, 90 name: 'PM10', 91 itemStyle: { 92 normal: { 93 color: '#7351E3' 94 } 95 } 96 }, 97 { 98 value: 25, 99 name: '颗粒物', 100 itemStyle: { 101 normal: { 102 color: '#FF4873' 103 } 104 } 105 }, 106 { 107 value: 20, 108 name: '油烟浓度', 109 itemStyle: { 110 normal: { 111 color: '#01BE6E' 112 } 113 } 114 } 115 ], 116 itemStyle: { 117 // normal: { 118 // // 设置饼图的颜色 119 // color: function() { 120 // return colors[i++] 121 // } 122 // }, 123 emphasis: { 124 shadowBlur: 10, 125 shadowOffsetX: 0, 126 shadowColor: 'rgba(0, 0, 0, 0.5)' 127 } 128 } 129 } 130 ]
饼图自适应：
setTimeout(function() { window.addEventListener('resize', function() { echertID.resize() }) }, 50)
全部代码：
1 echartFun() { 2 // var colors = ['#FDD100', '#08CED0', '#7351E3', '#FF4873', '#01BE6E'] 3 // 颜色下标，每次渲染饼图一个扇区加一操作 4 // var i = 0 5 var echertID = echarts.init(document.getElementById('echertID')) 6 echertID.setOption({ 7 title: { 8 text: '废气因子占比', 9 left: 'left', 10 textStyle: { 11 'fontSize': 20, 12 'fontWeight': '500', 13 'color': '#fff' 14 } 15 }, 16 tooltip: { 17 trigger: 'item', 18 formatter: '{a}
{b}:{c}({d}%)' 19 }, 20 legend: { 21 left: 'left', 22 top: 'bottom', 23 // bottom: 10, 24 data: ['非甲烷总烃', 'PM2.5', 'PM10', '颗粒物', '油烟浓度'], 25 itemWidth: 24, // 设置宽度 26 itemHeight: 14, // 设置高度 27 itemGap: 5, // 设置间距 28 textStyle: { 29 // 文字颜色 30 color: '#fff', 31 // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400... 32 fontWeight: '400', 33 // 字体系列 34 fontFamily: 'Source Han Sans CN', 35 // 字体大小 36 fontSize: 12 37 } 38 }, 39 series: [ 40 { 41 name: '占比：', 42 type: 'pie', 43 radius: [15, 75], // 饼图的大小 44 labelLine: {// 图形外文字线 45 normal: { 46 length: 5, 47 length2: 80, 48 lineStyle: { 49 color: '#28B1C7' 50 } 51 } 52 }, 53 center: ['50%', '50%'], 54 roseType: 'area', // 饼图的样式 55 label: { // 线上文字的样式 56 normal: { 57 formatter: '{b|{b}}{c|{c}}\n\n', // 线上文字 58 borderWidth: 20, 59 borderRadius: 4, 60 // shadowBlur:3, 61 // shadowOffsetX: 2, 62 // shadowOffsetY: 2, 63 // shadowColor: '#999', 64 padding: [0, -80], 65 rich: { 66 a: { 67 color: '#fff', 68 fontSize: 12, 69 lineHeight: 20 70 }, 71 b: { 72 color: '#fff', 73 fontSize: 12, 74 lineHeight: 20 75 }, 76 c: { 77 color: '#fff', 78 fontSize: 12, 79 lineHeight: 20 80 }, 81 d: { 82 color: '#fff', 83 fontSize: 12, 84 lineHeight: 20 85 } 86 // abg: { 87 // backgroundColor: '#333', 88 // width: '100%', 89 // align: 'right', 90 // height: 22, 91 // borderRadius: [4, 4, 0, 0] 92 // }, 93 /* hr: { 94 borderColor: '#333', 95 width: '100%', 96 borderWidth: 0.5, 97 height: 0 98 }, */ 99 // per: { 100 // color: '#333', 101 // padding: [2, 4], 102 // borderRadius: 2 103 // } 104 } 105 } 106 }, 107 data: [ 108 { 109 value: 10, 110 name: '非甲烷总烃', 111 itemStyle: { 112 normal: { 113 color: '#FDD100' 114 } 115 } 116 }, 117 { 118 value: 5, 119 name: 'PM2.5', 120 itemStyle: { 121 normal: { 122 color: '#08CED0' 123 } 124 } 125 }, 126 { 127 value: 15, 128 name: 'PM10', 129 itemStyle: { 130 normal: { 131 color: '#7351E3' 132 } 133 } 134 }, 135 { 136 value: 25, 137 name: '颗粒物', 138 itemStyle: { 139 normal: { 140 color: '#FF4873' 141 } 142 } 143 }, 144 { 145 value: 20, 146 name: '油烟浓度', 147 itemStyle: { 148 normal: { 149 color: '#01BE6E' 150 } 151 } 152 } 153 ], 154 itemStyle: { 155 // normal: { 156 // // 设置饼图的颜色 157 // color: function() { 158 // return colors[i++] 159 // } 160 // }, 161 emphasis: { 162 shadowBlur: 10, 163 shadowOffsetX: 0, 164 shadowColor: 'rgba(0, 0, 0, 0.5)' 165 } 166 } 167 } 168 ] 169 }) 170 setTimeout(function() { 171 window.addEventListener('resize', function() { 172 echertID.resize() 173 }) 174 }, 50) 175 },