Echarts：实现拖拽效果
Posted youyouluo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echarts：实现拖拽效果相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="./echarts.js"></script> 6 </head> 7 <body> 8 <div id="myChart" style="width: 800px; height: 600px;"></div> 9 10 <script type="text/javascript"> 11 var chart = echarts.init(document.getElementById(‘myChart‘)); 12 13 var originData = [ 14 value: 335, name: ‘直接访问‘, 15 value: 310, name: ‘邮件营销‘, 16 value: 234, name: ‘联盟广告‘, 17 value: 135, name: ‘视频广告‘, 18 value: 1548, name: ‘搜索引擎‘, 19 ]; 20 21 var color = [‘#4a6dbf‘, ‘#15b3bc‘, ‘#f37a18‘, ‘#83c775‘, ‘ #fcb552‘]; 22 23 originData.forEach(function(list, i) 24 list.itemStyle = 25 color: color[i], 26 ; 27 ); 28 29 var data = [].slice.call(originData) 30 31 var option = 32 tooltip: 33 , 34 toolbox: 35 feature: 36 myRestore: 37 show: true, 38 title: ‘还原‘, 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 onclick: refreshChart, 41 , 42 , 43 , 44 legend: // 图例 45 icon: ‘rect‘, 46 data: [], 47 itemWidth: 12, 48 itemHeight: 12, 49 bottom: ‘bottom‘, 50 , 51 grid: 52 top: ‘5%‘, 53 left: ‘5%‘, 54 right: ‘5%‘, 55 bottom: ‘40‘, 56 containLabel: true, 57 , 58 xAxis: 59 type: ‘category‘, 60 boundaryGap: true, 61 splitLine: // grid上每一条竖轴线 62 show: true, 63 interval: ‘auto‘, 64 lineStyle: 65 color: ‘#e8e8e8‘, 66 , 67 , 68 axisLine: // x刻度上方的横轴线 69 lineStyle: 70 color: ‘#e8e8e8‘, 71 , 72 , 73 axisLabel: // x轴的刻度 74 textStyle: 75 color: ‘#999‘, 76 , 77 , 78 data: [], 79 , 80 yAxis: 81 type: ‘value‘, 82 boundaryGap: false, 83 axisLine: // y刻度上方的横轴线 84 lineStyle: 85 color: ‘#e8e8e8‘, 86 , 87 , 88 splitLine: // grid上每一条竖轴线 89 lineStyle: 90 color: ‘#e8e8e8‘, 91 , 92 , 93 axisLabel: // y轴的刻度 94 textStyle: 95 color: ‘#999‘, 96 , 97 , 98 , 99 series: [ 100 name: ‘pie‘, 101 type: ‘pie‘, 102 center: [‘50%‘, ‘45%‘], 103 radius: [‘0‘, ‘45%‘], 104 data: data, 105 , 106 name: ‘模拟一个pie容器‘, 107 type: ‘pie‘, 108 center: [‘50%‘, ‘45%‘], 109 radius: [‘0‘, ‘49%‘], 110 cursor: ‘default‘, 111 hoverAnimation: true, 112 hoverOffset: 2, 113 label: 114 show: false, 115 , 116 labelLine: 117 show: false, 118 , 119 tooltip: 120 padding: 0, 121 formatter: function() 122 return ‘‘; 123 , 124 , 125 z: 0, 126 data: [ 127 value: 0, 128 name: ‘容器‘, 129 itemStyle: 130 color: ‘#000‘, 131 opacity: ‘.1‘, 132 , 133 ], 134 ], 135 ; 136 137 chart.setOption(option, true); 138 139 var sector = null; // 鼠标点击选中的扇形 140 var sectorIndex; // 选中扇形在data中的index 141 var sx; // 原型横坐标距离鼠标位置横坐标的偏移距离 142 var sy; // 原型纵坐标距离鼠标位置纵坐标的偏移距离 143 var zr = chart.getZr(); // 生成一个zrender实例 144 var circleData = null; // 记录鼠标选中的小圆点的数据 145 var circleEl = []; // 保存生成的小圆点的数据，注意目前只有push，没有将废数据清除 146 147 function refreshChart() 148 data = [].slice.call(originData) 149 option.series = 150 name: ‘pie‘, 151 type: ‘pie‘, 152 center: [‘50%‘, ‘45%‘], 153 radius: [‘0‘, ‘45%‘], 154 data: data, 155 ; 156 157 circleEl.forEach(function(list) 158 zr.remove(list.el); 159 ); 160 // zr.clear(); // clear会把整个chart画布清除 161 sector = null; 162 chart.setOption(option, true); 163 164 165 // chart.on 绑定的事件只能在chart图形内部执行 166 // 利用chart绑定的事件会比zrender绑定的事件先执行的特点来判断小圆是否进入饼图范围 167 chart.on(‘mouseup‘, function(params) 168 if (params.componentSubType === ‘pie‘) 169 // 圆 170 if (circleData) 171 data.push(circleData.data); 172 chart.setOption( 173 series: 174 data: data, 175 176 ); 177 zr.remove(circleData.el); 178 circleData = null; 179 180 181 // 扇形 182 if (sector) 183 zr.remove(sector); 184 sector = null; 185 186 187 ); 188 189 zr.on(‘mousedown‘, function(e) 190 // 如果出现：触发鼠标点击扇形事件，并且移动到echarts的DOM元素外，释放鼠标点击， 191 // 再移动到饼图内，点击鼠标，则会再次触发一个鼠标点击和释放事件，这时候，上一个选中的扇形不会被正确的移除 192 // 所以在mosuedown多一个对sector的判定 193 if (e.target && sector) 194 zr.remove(sector); 195 sector = null; 196 197 if (e.topTarget) 198 // 这个是pie容器 199 if (e.target && e.target.seriesIndex === 1) 200 return; 201 202 203 // 发现一个圆 204 circleEl.forEach(function(list) 205 if (list.id === e.topTarget.id) 206 circleData = list; 207 208 ); 209 210 // 是一个扇形 211 if (!circleData && e.target && !e.target.__title) 212 var target = e.target; 213 sectorIndex = target.dataIndex; 214 sector = new echarts.graphic.Sector( 215 shape: echarts.util.extend(, target.shape), 216 style: 217 fill: target.style.fill, 218 opacity: 0.5 219 , 220 silent: true, 221 z: 1000, 222 ); 223 224 sx = e.offsetX - target.shape.cx; 225 sy = e.offsetY - target.shape.cy; 226 227 zr.add(sector); 228 229 230 231 ); 232 233 zr.on(‘mousemove‘, function (e) 234 if (circleData) 235 circleData.el.setShape( 236 cx: e.offsetX, 237 cy: e.offsetY, 238 ); 239 else if (sector) 240 sector.setShape( 241 cx: e.offsetX - sx, 242 cy: e.offsetY - sy, 243 ); 244 245 chart.dispatchAction( 246 type: ‘showTip‘, 247 seriesIndex: 0, 248 dataIndex: sectorIndex, 249 position: [e.offsetX + 24, e.offsetY + 24], // 加24是为了避免tip影响mouseup事件判定 250 ); 251 252 ); 253 254 zr.on(‘mouseup‘, function(e) 255 if (circleData) 256 circleData = null; 257 if (sector) 258 var circle = new echarts.graphic.Circle( 259 shape: 260 cx: e.offsetX, 261 cy: e.offsetY, 262 r: 10, 263 , 264 style: 265 text: data[sectorIndex].name + ‘：‘ + data[sectorIndex].value, 266 textFill: sector.style.fill, 267 fill: sector.style.fill, 268 textOffset: [0, -20], 269 , 270 silent: true, 271 z: 1000, 272 ); 273 zr.add(circle); 274 circleEl.push( 275 id: e.topTarget.id + 1, 276 el: circle, 277 data: data[sectorIndex], 278 ); 279 280 data.splice(sectorIndex, 1); 281 chart.setOption( 282 series: 283 data: data, 284 285 ); 286 287 zr.remove(sector); 288 sector = null; 289 290 ); 291 </script> 292 </body> 293 </html>
这个是一年前工作里用到，莫名翻了出来。
以上是关于Echarts：实现拖拽效果的主要内容，如果未能解决你的问题，请参考以下文章
使用react-grid-layout和echarts-for-react实现一个支持拖拽的自定义响应式dashboard页面
使用react-grid-layout和echarts-for-react实现一个支持拖拽的自定义响应式dashboard页面