1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
6 <script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
7 <script type="text/javascript" src="./js/bootstrap.min.js"></script>
8 <script type="text/javascript" src="./js/echarts.js"></script>
9 </head>
10 <body>
11 <div class="col-xs-4">
12 <h3>条形图</h3>
13 <div id="main" style="width: 500px;height: 400px;"></div>
14 <script type="text/javascript">
15 var myChart = echarts.init(document.getElementById("main"));
16 var option = {
17 title:{
18 text:"第一个图标演示示例"
19 },
20 tooltip:{
21 text:"this is tool tip"
22 },
23 legend:{
24 data:['销量']
25 },
26 xAxis:{
27 data:["寸衫","羊毛衫","裤子","袜子","皮鞋","帽子"]
28 },
29 yAxis:{},
30 series:[{
31 name:["销量"],
32 type:"bar",
33 data:[5,20,36,6,43,67]
34 }]
35 };
36
37 // myChart.setOption(option);
38
39 myChart.setOption({
40 title:{
41 text:"第一个图标演示示例"
42 },
43 tooltip:{
44 text:"this is tool tip"
45 },
46 legend:{
47 data:['销量']
48 },
49 xAxis:{
50 data:["寸衫","羊毛衫","裤子","袜子","皮鞋","帽子"]
51 },
52 yAxis:{},
53 series:[{
54 name:["销量"],
55 type:"bar",
56 data:[5,20,36,6,43,67]
57 }]
58 });
59
60 </script>
61 </div>
62 <div class="col-xs-4">
63 <h3>饼状图</h3>
64 <div id="tbSecond" style="width: 500px;height: 400px;"></div>
65 <script type="text/javascript">
66 var tbSecond = echarts.init(document.getElementById("tbSecond"));
67 // alert(tbSecond);
68 var pieOption = {
69 title:{
70 text:"饼状图"
71 },
72 series : [
73 {
74 name: '访问来源',
75 type: 'pie',
76 radius: '55%',
77 data:[
78 {value:235, name:'视频广告'},
79 {value:274, name:'联盟广告'},
80 {value:310, name:'邮件营销'},
81 {value:335, name:'直接访问'},
82 {value:400, name:'搜索引擎'}
83 ]
84 }
85 ]
86 };
87 // alert(pieOption);
88 tbSecond.setOption(pieOption);
89
90 </script>
91 </div>
92 <div class="col-xs-4">
93 <h3>饼状图加阴影</h3>
94 <div id="bzt2" style="width: 500px;height: 400px;"></div>
95 <script type="text/javascript">
96 var bzt2 = echarts.init(document.getElementById("bzt2"));
97 bzt2.setOption({
98 title:{
99 text:"饼状图"
100 },
101 itemStyle:{
102 emphasis:{
103 shadowBlur:200,
104 shadowColor:"rgba(0,0,0,0.8)"
105 }
106 },
107 series:[
108 {
109 name: '访问来源',
110 type: 'pie',
111 radius: '55%',
112 data:[
113 {value:235, name:'视频广告'},
114 {value:274, name:'联盟广告'},
115 {value:310, name:'邮件营销'},
116 {value:335, name:'直接访问'},
117 {value:400, name:'搜索引擎'}
118 ]
119 }
120 ]
121 });
122 </script>
123 </div>
124 <div class="col-xs-4">
125 <h3>饼状图加背景</h3>
126 <div id="bzt3" style="width: 500px;height: 400px;"></div>
127 <script type="text/javascript">
128 var bzt3 = echarts.init(document.getElementById("bzt3"));
129 bzt3.setOption({
130 title:{
131 text:"饼状图"
132 },
133 backgroundColor:"#EEEFF4",
134 itemStyle:{
135 emphasis:{
136 shadowBlur:200,
137 shadowColor:"rgba(0,0,0,0.8)"
138 }
139 },
140 series:[
141 {
142 name: '访问来源',
143 type: 'pie',
144 radius: '55%',
145 data:[
146 {value:235, name:'视频广告'},
147 {value:274, name:'联盟广告'},
148 {value:310, name:'邮件营销'},
149 {value:335, name:'直接访问'},
150 {value:400, name:'搜索引擎'}
151 ]
152 }
153 ]
154 });
155 </script>
156 </div>
157 <div class="col-xs-4">
158 <h3>放大缩小</h3>
159 <div id="dataZoom" style="width: 500px;height: 400px;"></div>
160 <script type="text/javascript">
161 var dataZoom = echarts.init($("#dataZoom")[0]);
162 dataZoom.setOption(
163 {
164 xAxis:{
165 type:"value"
166 },
167 yAxis:{
168 type:"value"
169 },
170 dataZoom:[
171 {
172 type:"slider",
173 start:10,
174 end:60
175 }
176 ],
177 series:[
178 {
179 type:"scatter",
180 itemStyle:{
181 normal:{
182 opacity:0.8
183 }
184 },
185 symbolSize:function(val)
186 {
187 return val[2] * 40;
188 },
189 data:[["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
190 }
191 ]});
192 </script>
193 </div>
194 <div class="col-xs-4">
195 <h3>Scatter-large</h3>
196 <div id="sl" style="width: 500px;height: 400px;"></div>
197 <script type="text/javascript">
198 var sl = echarts.init($("#sl")[0]);
199 var sloption = {
200 tooltip : {
201 trigger: 'axis',
202 showDelay : 0,
203 axisPointer:{
204 show: true,
205 type : 'cross',
206 lineStyle: {
207 type : 'dashed',
208 width : 1
209 }
210 },
211 zlevel: 1
212 },
213 legend: {
214 data:['sin','cos']
215 },
216 toolbox: {
217 show : true,
218 feature : {
219 mark : {show: true},
220 dataZoom : {show: true},
221 dataView : {show: true, readOnly: false},
222 restore : {show: true},
223 saveAsImage : {show: true}
224 }
225 },
226 xAxis : [
227 {
228 type : 'value',
229 scale:true
230 }
231 ],
232 yAxis : [
233 {
234 type : 'value',
235 scale:true
236 }
237 ],
238 series : [
239 {
240 name:'sin',
241 type:'scatter',
242 large: true,
243 symbolSize: 3,
244 data: (function () {
245 var d = [];
246 var len = 10000;
247 var x = 0;
248 while (len--) {
249 x = (Math.random() * 10).toFixed(3) - 0;
250 d.push([
251 x,
252 //Math.random() * 10
253 (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
254 ]);
255 }
256 //console.log(d)
257 return d;
258 })()
259 },
260 {
261 name:'cos',
262 type:'scatter',
263 large: true,
264 symbolSize: 2,
265 data: (function () {
266 var d = [];
267 var len = 20000;
268 var x = 0;
269 while (len--) {
270 x = (Math.random() * 10).toFixed(3) - 0;
271 d.push([
272 x,
273 //Math.random() * 10
274 (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
275 ]);
276 }
277 //console.log(d)
278 return d;
279 })()
280 }
281 ]
282 };
283
284 sl.setOption(sloption);
285 </script>
286 </div>
287 <div class="col-xs-4">
288 <h3>微博签到</h3>
289 <div id="qd" style="width: 500px;height: 400px;"></div>
290 <script type="text/javascript">
291 var qd = echarts.init($("#qd")[0]);
292 qd.showLoading();
293
294 $.get('http://echarts.baidu.com/gallery/data/asset/data/weibo.json', function (weiboData) {
295 qd.hideLoading();
296
297 weiboData = weiboData.map(function (serieData, idx) {
298 var px = serieData[0] / 1000;
299 var py = serieData[1] / 1000;
300 var res = [[px, py]];
301
302 for (var i = 2; i < serieData.length; i += 2) {
303 var dx = serieData[i] / 1000;
304 var dy = serieData[i + 1] / 1000;
305 var x = px + dx;
306 var y = py + dy;
307 res.push([x, y, 1]);
308
309 px = x;
310 py = y;
311 }
312 return res;
313 });
314 qd.setOption(option = {
315 backgroundColor: '#404a59',
316 title : {
317 text: '微博签到数据点亮中国',
318 subtext: 'From ThinkGIS',
319 sublink: 'http://www.thinkgis.cn/public/sina',
320 left: 'center',
321 top: 'top',
322 textStyle: {
323 color: '#fff'
324 }
325 },
326 legend: {
327 left: 'left',
328 data: ['强', '中', '弱'],
329 textStyle: {
330 color: '#ccc'
331 }
332 },
333 geo: {
334 name: '强',
335 type: 'scatter',
336 map: 'china',
337 label: {
338 emphasis: {
339 show: false
340 }
341 },
342 itemStyle: {
343 normal: {
344 areaColor: '#323c48',
345 borderColor: '#111'
346 },
347 emphasis: {
348 areaColor: '#2a333d'
349 }
350 }
351 },
352 series: [{
353 name: '弱',
354 type: 'scatter',
355 coordinateSystem: 'geo',
356 symbolSize: 1,
357 large: true,
358 itemStyle: {
359 normal: {
360 shadowBlur: 2,
361 shadowColor: 'rgba(37, 140, 249, 0.8)',
362 color: 'rgba(37, 140, 249, 0.8)'
363 }
364 },
365 data: weiboData[0]
366 }, {
367 name: '中',
368 type: 'scatter',
369 coordinateSystem: 'geo',
370 symbolSize: 1,
371 large: true,
372 itemStyle: {
373 normal: {
374 shadowBlur: 2,
375 shadowColor: 'rgba(14, 241, 242, 0.8)',
376 color: 'rgba(14, 241, 242, 0.8)'
377 }
378 },
379 data: weiboData[1]
380 }, {
381 name: '强',
382 type: 'scatter',
383 coordinateSystem: 'geo',
384 symbolSize: 1,
385 large: true,
386 itemStyle: {
387 normal: {
388 shadowBlur: 2,
389 shadowColor: 'rgba(255, 255, 255, 0.8)',
390 color: 'rgba(255, 255, 255, 0.8)'
391 }
392 },
393 data: weiboData[2]
394 }]
395 });
396 });
397 </script>
398 </div>
399 <div class="col-xs-4">
400 <h3>极坐标双轴线</h3>
401 <div id="jzb" style="width: 500px;height: 400px;"></div>
402 <script type="text/javascript">
403 var jzb = echarts.init($("#jzb")[0]);
404 var data = [];
405
406 for (var i = 0; i <= 100; i++) {
407 var theta = i / 100 * 360;
408 var r = 5 * (1 + Math.sin(theta / 180 * Math.PI));
409 data.push([r, theta]);
410 }
411
412 var jzboption = {
413 title: {
414 text: '极坐标双数值轴'
415 },
416 legend: {
417 data: ['line']
418 },
419 polar: {},
420 tooltip: {
421 trigger: 'axis',
422 axisPointer: {
423 type: 'cross'
424 }
425 },
426 angleAxis: {
427 type: 'value',
428 startAngle: 0
429 },
430 radiusAxis: {
431 },
432 series: [{
433 coordinateSystem: 'polar',
434 name: 'line',
435 type: 'line',
436 data: data
437 }]
438 };
439
440 jzb.setOption(jzboption);
441 </script>
442 </div>
443 <div class="col-xs-4">
444 <h3>浏览器占比</h3>
445 <div id="llqzb" style="width: 500px;height: 400px;"></div>
446 <script type="text/javascript">
447 var llqzb = echarts.init($("#llqzb")[0]);
448 var llqzboption = {
449 title: {
450 text: '浏览器占比变化',
451 subtext: '纯属虚构',
452 x:'right',
453 y:'bottom'
454 },
455 tooltip: {
456 trigger: 'item',
457 backgroundColor : 'rgba(0,0,250,0.2)'
458 },
459 legend: {
460 data: (function (){
461 var list = [];
462 for (var i = 1; i <=28; i++) {
463 list.push(i + 2000);
464 }
465 return list;
466 })()
467 },
468 visualMap: {
469 color: ['red', 'yellow']
470 },
471 radar: {
472 indicator : [
473 { text: 'IE8-', max: 400},
474 { text: 'IE9+', max: 400},
475 { text: 'Safari', max: 400},
476 { text: 'Firefox', max: 400},
477 { text: 'Chrome', max: 400}
478 ]
479 },
480 series : (function (){
481 var series = [];
482 for (var i = 1; i <= 28; i++) {
483 series.push({
484 name:'浏览器（数据纯属虚构）',
485 type: 'radar',
486 symbol: 'none',
487 itemStyle: {
488 normal: {
489 lineStyle: {
490 width:1
491 }
492 },
493 emphasis : {
494 areaStyle: {color:'rgba(0,250,0,0.3)'}
495 }
496 },
497 data:[
498 {
499 value:[
500 (40 - i) * 10,
501 (38 - i) * 4 + 60,
502 i * 5 + 10,
503 i * 9,
504 i * i /2
505 ],
506 name:i + 2000
507 }
508 ]
509 });
510 }
511 return series;
512 })()
513 };
514 llqzb.setOption(llqzboption);
515 </script>
516 </div>
517 </body>
518 </html>
