1 1 <!DOCTYPE html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8"> 5 5 <script src="./echarts.js"></script> 6 6 </head> 7 7 <body> 8 8 <div id="myChart" style="width: 800px; height: 600px;"></div> 9 9 10 10 <script type="text/javascript"> 11 11 var chart = echarts.init(document.getElementById('myChart')); 12 12 13 13 var originData = [ 14 14 {value: 335, name: '直接访问'}, 15 15 {value: 310, name: '邮件营销'}, 16 16 {value: 234, name: '联盟广告'}, 17 17 {value: 135, name: '视频广告'}, 18 18 {value: 1548, name: '搜索引擎'}, 19 19 ]; 20 20 21 21 var color = ['#4a6dbf', '#15b3bc', '#f37a18', '#83c775', ' #fcb552']; 22 22 23 23 originData.forEach(function(list, i) { 24 24 list.itemStyle = { 25 25 color: color[i], 26 26 }; 27 27 }); 28 28 29 29 var data = [].slice.call(originData) 30 30 31 31 var option = { 32 32 tooltip: { 33 33 }, 34 34 toolbox: { 35 35 feature: { 36 36 myRestore: { 37 37 show: true, 38 38 title: '还原', 39 39 icon: 'M3.8,33.4 M47,18.9h9.8V8.7 M56.3,20.1 C52.1,9,40.5,0.6,26.8,2.1C12.6,3.7,1.6,16.2,2.1,30.6 M13,41.1H3.1v10.2 M3.7,39.9c4.2,11.1,15.8,19.5,29.5,18 c14.2-1.6,25.2-14.1,24.7-28.5', 40 40 onclick: refreshChart, 41 41 }, 42 42 }, 43 43 }, 44 44 legend: { // 图例 45 45 icon: 'rect', 46 46 data: [], 47 47 itemWidth: 12, 48 48 itemHeight: 12, 49 49 bottom: 'bottom', 50 50 }, 51 51 grid: { 52 52 top: '5%', 53 53 left: '5%', 54 54 right: '5%', 55 55 bottom: '40', 56 56 containLabel: true, 57 57 }, 58 58 xAxis: { 59 59 type: 'category', 60 60 boundaryGap: true, 61 61 splitLine: { // grid上每一条竖轴线 62 62 show: true, 63 63 interval: 'auto', 64 64 lineStyle: { 65 65 color: '#e8e8e8', 66 66 }, 67 67 }, 68 68 axisLine: { // x刻度上方的横轴线 69 69 lineStyle: { 70 70 color: '#e8e8e8', 71 71 }, 72 72 }, 73 73 axisLabel: { // x轴的刻度 74 74 textStyle: { 75 75 color: '#999', 76 76 }, 77 77 }, 78 78 data: [], 79 79 }, 80 80 yAxis: { 81 81 type: 'value', 82 82 boundaryGap: false, 83 83 axisLine: { // y刻度上方的横轴线 84 84 lineStyle: { 85 85 color: '#e8e8e8', 86 86 }, 87 87 }, 88 88 splitLine: { // grid上每一条竖轴线 89 89 lineStyle: { 90 90 color: '#e8e8e8', 91 91 }, 92 92 }, 93 93 axisLabel: { // y轴的刻度 94 94 textStyle: { 95 95 color: '#999', 96 96 }, 97 97 }, 98 98 }, 99 99 series: [{ 100100 name: 'pie', 101101 type: 'pie', 102102 center: ['50%', '45%'], 103103 radius: ['0', '45%'], 104104 data: data, 105105 }, { 106106 name: '模拟一个pie容器', 107107 type: 'pie', 108108 center: ['50%', '45%'], 109109 radius: ['0', '49%'], 110110 cursor: 'default', 111111 hoverAnimation: true, 112112 hoverOffset: 2, 113113 label: { 114114 show: false, 115115 }, 116116 labelLine: { 117117 show: false, 118118 }, 119119 tooltip: { 120120 padding: 0, 121121 formatter: function() { 122122 return ''; 123123 }, 124124 }, 125125 z: 0, 126126 data: [{ 127127 value: 0, 128128 name: '容器', 129129 itemStyle: { 130130 color: '#000', 131131 opacity: '.1', 132132 }, 133133 }], 134134 }], 135135 }; 136136 137137 chart.setOption(option, true); 138138 139139 var sector = null; // 鼠标点击选中的扇形 140140 var sectorIndex; // 选中扇形在data中的index 141141 var sx; // 原型横坐标距离鼠标位置横坐标的偏移距离 142142 var sy; // 原型纵坐标距离鼠标位置纵坐标的偏移距离 143143 var zr = chart.getZr(); // 生成一个zrender实例 144144 var circleData = null; // 记录鼠标选中的小圆点的数据 145145 var circleEl = []; // 保存生成的小圆点的数据，注意目前只有push，没有将废数据清除 146146 147147 function refreshChart() { 148148 data = [].slice.call(originData) 149149 option.series = { 150150 name: 'pie', 151151 type: 'pie', 152152 center: ['50%', '45%'], 153153 radius: ['0', '45%'], 154154 data: data, 155155 }; 156156 157157 circleEl.forEach(function(list) { 158158 zr.remove(list.el); 159159 }); 160160 // zr.clear(); // clear会把整个chart画布清除 161161 sector = null; 162162 chart.setOption(option, true); 163163 } 164164 165165 // chart.on 绑定的事件只能在chart图形内部执行 166166 // 利用chart绑定的事件会比zrender绑定的事件先执行的特点来判断小圆是否进入饼图范围 167167 chart.on('mouseup', function(params) { 168168 if (params.componentSubType === 'pie') { 169169 // 圆 170170 if (circleData) { 171171 data.push(circleData.data); 172172 chart.setOption({ 173173 series: { 174174 data: data, 175175 } 176176 }); 177177 zr.remove(circleData.el); 178178 circleData = null; 179179 } 180180 181181 // 扇形 182182 if (sector) { 183183 zr.remove(sector); 184184 sector = null; 185185 } 186186 } 187187 }); 188188 189189 zr.on('mousedown', function(e) { 190190 // 如果出现：触发鼠标点击扇形事件，并且移动到echarts的DOM元素外，释放鼠标点击， 191191 // 再移动到饼图内，点击鼠标，则会再次触发一个鼠标点击和释放事件，这时候，上一个选中的扇形不会被正确的移除 192192 // 所以在mosuedown多一个对sector的判定 193193 if (e.target && sector) { 194194 zr.remove(sector); 195195 sector = null; 196196 } 197197 if (e.topTarget) { 198198 // 这个是pie容器 199199 if (e.target && e.target.seriesIndex === 1) { 200200 return; 201201 } 202202 203203 // 发现一个圆 204204 circleEl.forEach(function(list) { 205205 if (list.id === e.topTarget.id) { 206206 circleData = list; 207207 } 208208 }); 209209 210210 // 是一个扇形 211211 if (!circleData && e.target && !e.target.__title) { 212212 var target = e.target; 213213 sectorIndex = target.dataIndex; 214214 sector = new echarts.graphic.Sector({ 215215 shape: echarts.util.extend({}, target.shape), 216216 style: { 217217 fill: target.style.fill, 218218 opacity: 0.5 219219 }, 220220 silent: true, 221221 z: 1000, 222222 }); 223223 224224 sx = e.offsetX - target.shape.cx; 225225 sy = e.offsetY - target.shape.cy; 226226 227227 zr.add(sector); 228228 229229 } 230230 } 231231 }); 232232 233233 zr.on('mousemove', function (e) { 234234 if (circleData) { 235235 circleData.el.setShape({ 236236 cx: e.offsetX, 237237 cy: e.offsetY, 238238 }); 239239 } else if (sector) { 240240 sector.setShape({ 241241 cx: e.offsetX - sx, 242242 cy: e.offsetY - sy, 243243 }); 244244 245245 chart.dispatchAction({ 246246 type: 'showTip', 247247 seriesIndex: 0, 248248 dataIndex: sectorIndex, 249249 position: [e.offsetX + 24, e.offsetY + 24], // 加24是为了避免tip影响mouseup事件判定 250250 }); 251251 } 252252 }); 253253 254254 zr.on('mouseup', function(e) { 255255 if (circleData) { 256256 circleData = null; 257257 } if (sector) { 258258 var circle = new echarts.graphic.Circle({ 259259 shape: { 260260 cx: e.offsetX, 261261 cy: e.offsetY, 262262 r: 10, 263263 }, 264264 style: { 265265 text: data[sectorIndex].name + '：' + data[sectorIndex].value, 266266 textFill: sector.style.fill, 267267 fill: sector.style.fill, 268268 textOffset: [0, -20], 269269 }, 270270 silent: true, 271271 z: 1000, 272272 }); 273273 zr.add(circle); 274274 circleEl.push({ 275275 id: e.topTarget.id + 1, 276276 el: circle, 277277 data: data[sectorIndex], 278278 }); 279279 280280 data.splice(sectorIndex, 1); 281281 chart.setOption({ 282282 series: { 283283 data: data, 284284 } 285285 }); 286286 287287 zr.remove(sector); 288288 sector = null; 289289 } 290290 }); 291291 </script> 292292 </body> 293293 </html>
这个是一年前工作里用到，莫名翻了出来。