echarts 外观效果修改

Posted 丶疏影横斜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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: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>

 

以上是关于echarts 外观效果修改的主要内容,如果未能解决你的问题,请参考以下文章

echarts怎么控制圆饼图的大小

echarts tree怎么自定义显示NAME?

Echarts常用折线和频谱以及三维散点图

Echart动效系列01——循环切换数据以实现图表的动态效果

Echart动效系列01——循环切换数据以实现图表的动态效果

如何修改echarts的雷达图背景