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>
这个是一年前工作里用到，莫名翻了出来。
