效果图：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>饼图</title> 6 <script src="js/jquery-2.2.3.min.js"></script> 7 <script src="./js/echarts.min.js"></script> 8 <style> 9 #demo { 10 width: 450px; 11 height: 300px; 12 } 13 14 #fullScreenMask { 15 position: fixed; 16 top: 0; 17 left: 0; 18 width: 100%; 19 height: 100%; 20 display: none; 21 background-color: #ffffff; 22 } 23 24 #fullScreen { 25 width: 100%; 26 height: 100%; 27 } 28 </style> 29 </head> 30 <body> 31 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> 32 <div id="demo"></div> 33 34 <!--全屏显示的容器--> 35 <div id="fullScreenMask"> 36 <div id="fullScreen"></div> 37 </div> 38 39 </body> 40 <script> 41 /* 42 * 知识点： 43 * 1、自定义工具按钮 全屏显示（在图表右上角） 44 * 2、图例名称过长拼接省略号 45 * 3、生成随机颜色 46 * 47 * 存在问题： 48 * 视觉引导线及标签名称过长 超出视图范围 如部门名称很长的这个情况 49 * 解决办法： 50 * 增加全屏显示功能 且小图表只开启前五项 51 * */ 52 53 54 //初始化一个 echarts 实例 55 var chart = echarts.init(document.getElementById('demo')); 56 //声明一个 全屏显示的echarts图表 57 var chartScreen = null; 58 //指定图表的配置项和数据 59 var option = { 60 backgroundColor: 'rgba(70, 131, 254, .3)', 61 tooltip: { 62 trigger: 'item', 63 formatter: "{a} <br/>{b}: {c}"+ '人' +" ({d}%)" //饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比） 64 }, 65 legend: { 66 icon: 'rect', 67 itemWidth: 12, 68 itemHeight: 12, 69 type: 'scroll', 70 textStyle:{ 71 color:'#ffffff', 72 fontSize:12 73 }, 74 orient: 'vertical', 75 data:[], 76 selected:{}, 77 78 right: 10, 79 top: 30, 80 bottom: 20, 81 82 formatter: function (name) { 83 return echarts.format.truncateText(name, 90, '14px Microsoft Yahei', '…');//图例名称过长拼接省略号 84 }, 85 tooltip: { 86 show: true 87 } 88 }, 89 toolbox: {// 工具栏 90 itemSize:16, 91 showTitle:false, 92 right:24, 93 feature: { 94 myTool: {//自定义工具 myTool 95 show: true, 96 title: '全屏显示', 97 icon: "image://" + "./css/icon/full-screen-default.png",//此处 图片路径前面必须加字符串 "image://" 98 onclick: function (){ 99 //生成全屏显示的图表 100 if (setFullScreenToolBox(option)) { 101 getChartData(chartScreen,false); 102 } 103 } 104 } 105 } 106 }, 107 series: [ 108 { 109 name:'人员部署', 110 type:'pie', 111 barWidth: '30%', 112 radius: ['50%', '70%'], 113 center:['40%', '50%'], 114 label: { 115 emphasis: { 116 show: true, 117 textStyle: { 118 fontSize: '14', 119 fontWeight: 'bold' 120 } 121 } 122 }, 123 labelLine: { 124 normal: { 125 show: true 126 }, 127 emphasis: { 128 show: true, 129 fontWeight: 'bold' 130 } 131 }, 132 itemStyle:{ 133 normal:{ 134 color:function(params) {//生成随机颜色 135 var colorList = ['#E09C19','#E63234','#6AC3F1','#DD6B25','#D4E019','#009944','#6A8DF1','#C535A8','#6D54E9','#67E682','#E954CF','#CAF161']; 136 return params.dataIndex >= colorList.length-1 ? "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16):colorList[params.dataIndex]; 137 138 }, 139 } 140 }, 141 data:[] 142 } 143 ] 144 }; 145 146 //使用刚指定的配置项和数据显示图表。 147 chart.setOption(option); 148 //插入图表数据 149 getChartData(chart,true) ; 150 151 152 /* 153 * 获取图表数据并插入 154 * @param chart 需要插入数据的图表 155 * @param bool 是否只显示前五项 156 * */ 157 function getChartData(chart,bool) { 158 // $.ajax({ 159 // url: '/api/...', 160 // data: {}, 161 // type: "POST", 162 // dataType: 'json', 163 // success: function(result){ 164 var result = { 165 data:[ 166 { 167 count: 5, 168 name: "部门一", 169 }, 170 { 171 count: 15, 172 name: "很长名字的部门很长名字的部门很长名字的部门", 173 }, 174 { 175 count: 5, 176 name: "部门二", 177 }, 178 { 179 count: 5, 180 name: "部门三", 181 }, 182 { 183 count: 55, 184 name: "很长很长名字的部门", 185 }, 186 { 187 count: 5, 188 name: "财务部", 189 }, 190 { 191 count: 5, 192 name: "行政部", 193 }, 194 { 195 count: 5, 196 name: "很长名字的部门", 197 }, 198 { 199 count: 588, 200 name: "人力部", 201 }, 202 { 203 count: 5, 204 name: "销售部", 205 }, 206 { 207 count: 5, 208 name: "运营部", 209 }, 210 { 211 count: 5, 212 name: "很长名字的部门很长名字的部门", 213 }, 214 { 215 count: 25, 216 name: "部门五", 217 }, 218 { 219 count: 85, 220 name: "部门6", 221 }, 222 { 223 count: 55, 224 name: "部门7", 225 }, 226 { 227 count: 55, 228 name: "部门8", 229 }, 230 { 231 count: 555, 232 name: "部门9", 233 }, 234 ] 235 } 236 var _count = [], _name = [] ,_selected = {}; 237 if (result.data.length > 0) { 238 $.each(result.data,function (i,v) { 239 240 var proname = v.name; 241 _count.push({value:v.count, name:proname}); 242 _name.push(proname); 243 //小图表 只显示前五项 大图表默认全部显示 244 bool && (i < 5 ?_selected[proname] = true : _selected[proname] = false); 245 246 }); 247 248 chart.setOption({ 249 legend: { 250 data:_name, 251 selected:_selected 252 }, 253 series: [ 254 { 255 data:_count 256 } 257 ] 258 }); 259 260 261 } 262 // } 263 // }); 264 } 265 266 267 //全屏显示 toolbox回调 268 //@param option echarts的配置项 269 function setFullScreenToolBox(option) { 270 if ($('#fullScreenMask').css('display') === 'block') { 271 $('#fullScreenMask').hide(); 272 ChartScreen = null; 273 return false; 274 } 275 276 $('#fullScreenMask').show(); 277 chartScreen = echarts.init(document.getElementById('fullScreen')); 278 chartScreen.setOption(option); 279 chartScreen.setOption({ 280 toolbox: { 281 feature: { 282 myTool: { 283 title: '退出全屏', 284 icon: "image://" + "./css/icon/exit-full-screen-default.png", 285 } 286 } 287 } 288 }); 289 return true; 290 } 291 292 window.onresize = function () { 293 chartScreen.resize() 294 } 295 296 </script> 297 </html>