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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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 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>