ECharts 简单的使用过程,完美的图形展示

原创
2015/08/07 17:31
阅读数 2.6K

  最近开发项目时要做图形报表,网上找了些东西,还是觉得ECharts靠谱,具备诸多优点,功能强大,图表完美,兼容性也比较好,基于html5动画渲染。

  官网的demo中是写得比较全了,但很多用不到的东西直接影响了代码质量,下面我就饼图为例给描述一下echarts的基本使用过程,部分代码是我从demo中裁剪之后的代码

  echarts饼状图实现步骤:

1,在简单的html中引入js文件,该js文件可以去官网下载

  1. <head>  

  2.     <meta charset="utf-8">  

  3.     <title>Charts demo</title>  

  4.      <script src="js/esl.js"></script>  

  5. </head>  

  6. <body>  

  7. </body>

2,为图形准备容器

  1. <head>  

  2.     <meta charset="utf-8">  

  3.     <title>Charts demo</title>  

  4.      <script src="js/esl.js"></script>  

  5. </head>  

  6. <body> 

  7.     <div id="picturePlace"></div> 

  8. </body> 

这也就是在html中添加一个div给定id,图表就会显示在该div中。

3,模块导入js,这点比较关键,它直接决定了出什么图形

  1. <head>  

  2.     <meta charset="utf-8">  

  3.     <title>Charts demo</title>  

  4.      <script src="js/esl.js"></script>  

  5. </head>  

  6. <body>  

  7.     <div id="picturePlace"></div>  

  8.      <script type="text/javascript">  

  9.         // 路径配置

  10.         require.config({  

  11.             paths:{   

  12.                 'echarts' : 'js/echarts',  

  13.                 'echarts/chart/pie' : 'js/echarts'  

  14.             }  

  15.         });  

  16.     </script>  

  17. </body> 

4,添加显示数据

  1. <head>  

  2.     <meta charset="utf-8">  

  3.     <title>Charts demo</title>  

  4.      <script src="js/esl.js"></script>  

  5. </head>  

  6. <body>  

  7.     <div id="picturePlace"></div>  

  8.      <script type="text/javascript">  

  9.         // 路径配置  

  10.         require.config({  

  11.             paths:{   

  12.                 'echarts' : 'js/echarts',  

  13.                 'echarts/chart/pie' : 'js/echarts'  

  14.             }  

  15.         }); 

  16.          // 使用  

  17.         require(  

  18.             [  

  19.                 'echarts',  

  20.                 'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载  

  21.             ],  

  22.             function (ec) {  

  23.                 // 基于准备好的dom,初始化echarts图表  

  24.                 var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>));  

  25.                 option = {  

  26.                         title : {  

  27.                             text: '某站点用户访问来源',  

  28.                             subtext: '纯属虚构',  

  29.                             x:'center'  

  30.                         },  

  31.                         tooltip : {  

  32.                             trigger: 'item',  

  33.                             formatter: "{a} <br/>{b} : {c} ({d}%)"  

  34.                         },  

  35.                         legend: {  

  36.                             orient : 'vertical',  

  37.                             x : 'left',  

  38.                             data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']  

  39.                         },  

  40.                         toolbox: {  

  41.                             show : true,  

  42.                             feature : {  

  43.                                 mark : {show: true},  

  44.                                 dataView : {show: true, readOnly: false},  

  45.                                 restore : {show: true},  

  46.                                 saveAsImage : {show: true}  

  47.                             }  

  48.                         },  

  49.                         calculable : true,  

  50.                         series : [  

  51.                             {  

  52.                                 name:'访问来源',  

  53.                                 type:'pie',  

  54.                                 radius : '55%',  

  55.                                 center: ['50%', '60%'],  

  56.                                 data:[  

  57.                                     {value:335, name:'直接访问'},  

  58.                                     {value:310, name:'邮件营销'},  

  59.                                     {value:234, name:'联盟广告'},  

  60.                                     {value:135, name:'视频广告'},  

  61.                                     {value:1548, name:'搜索引擎'}  

  62.                                 ]  

  63.                             }  

  64.                         ]  

  65.                     }; 

  66.                 // 为echarts对象加载数据   

  67.                 myChart.setOption(option);   

  68.             }  

  69.         );  

  70.     </script>  

  71. </body> 

5,运行程序显示结果


  以上是饼状图的实现步骤,其他图形可以以此案例去官网参考即可,其中的option尤为关键。。。















展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
7 收藏
0
分享
返回顶部
顶部