- 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>
经验首页