首页 > 代码库 > echarts 外观效果修改
echarts 外观效果修改
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:60175 }176 ],177 series:[178 {179 type:"scatter",180 itemStyle:{181 normal:{182 opacity:0.8183 }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 : 1209 }210 },211 zlevel: 1212 },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:true230 }231 ],232 yAxis : [233 {234 type : ‘value‘,235 scale:true236 }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() * 10253 (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0254 ]);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() * 10274 (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0275 ]);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: false340 }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: 0429 },430 radiusAxis: {431 },432 series: [{433 coordinateSystem: ‘polar‘,434 name: ‘line‘,435 type: ‘line‘,436 data: data437 }]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:1491 }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 /2505 ],506 name:i + 2000507 }508 ]509 });510 }511 return series;512 })()513 };514 llqzb.setOption(llqzboption);515 </script>516 </div>517 </body>518 </html>
echarts 外观效果修改
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。