文档章节

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

k
 kevin小当家
发布于 2015/08/07 17:31
字数 594
阅读 2K
收藏 7

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

  最近开发项目时要做图形报表,网上找了些东西,还是觉得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尤为关键。。。















k
粉丝 0
博文 1
码字总数 594
作品 0
海淀
私信 提问
加载中
请先登录后再评论。
有了 echarts 还需要报表工具吗?

这个答案不是肯定的,而是需要根据不同的场景去看这个问题。 如果系统中只需要图形化展现,或者图形下面带简单的明细,那么直接用 echarts 实现需求就可以了。 如果绘制图表的数据来源比较复...

泡泡糖儿
07/10
5
0
可视化-echarts流向图制作

案例: http://www.internetke.com/jsEffects/2018040406/ 前段时间用echarts做了流程图,在此记录下制作步骤。 一、Echarts是什么 Echarts,缩写来自 Enterprise Charts,商业级数据图表,是...

osc_3rll7emc
2019/04/06
38
0
百度图表的使用

由于自己的一个项目涉及到图形显示,朋友推荐使用百度ECharts。 <!DOCTYPE html><html><head> </head></html> 引入下载的js文件,调用echarts.init 方法初始化一个 echarts 实例并通过 setO......

osc_h3robkrt
2018/02/27
2
0
web 页面如何实现 echarts 统计图的打印导出?

实现 echarts 的打印导出功能是需要前端和后端一起来完成的,也就是需要 echarts 在页面呈现之后,由浏览器截图并把图片传递给后端,后端最后实现打印导出。例如单页 echarts 导出打印的实现...

泡泡糖儿
05/27
8
0
百度技术沙龙第77期 ECharts 4.0最全技术攻略

本文作者:HelloDeveloper 3 月 31 日,由百度开发者中心主办、极客邦科技承办、百度创新中心赞助的第 77 期百度技术沙龙《ECharts 4.0最全技术攻略》成功在北京举行,此次技术沙龙邀请了百度...

百度开发者中心
2019/07/23
2
0

没有更多内容

加载失败,请刷新页面

加载更多

Whoosh:Python 的轻量级搜索工具

👆 “Python猫” ,一个值得加星标的公众号 花下猫语:周末愉快啊!今天还是给大家分享一篇文章。既然你已点进来看了,那说明你对此话题应该是感兴趣的,希望你读后有所收获吧。Best wish...

Python猫
2019/11/23
13
0
Spring升级案例之IOC介绍和依赖注入

Spring升级案例之IOC介绍和依赖注入 一、IOC的概念和作用 1.什么是IOC 控制反转(Inversion of Control, IoC)是一种设计思想,在Java中就是将设计好的对象交给容器控制,而不是传统的在对象内...

osc_xmvqghwh
27分钟前
5
0
KVM影子页表

2019年是崭新的一年,Linux kernel 5.0 低调发布了,给我的感觉就是,牛人不断在飞跃,我们也要策马奔腾赶紧追赶才有些许出路。 内核子系统众多,我发现KVM是个非常有意思的子系统,对cpu,内...

jeffxiemo
2019/01/08
0
0
重磅!入门者福音:从0学Java系列文章即将推出!

好消息!小编为了回馈母校(川农),决定和学校物联网系携手打造《从0开始学Java》系列文章,目前该系列文章由小编本人和一位研究生师姐撰写,接下来该系列文章将在本公众号陆续推出,欢迎关...

beifengtz
2019/07/28
17
0
围绕Java反射,BAT的面试官可以问出多少花样

好久不见,在疫情的控制下,我急需一杯奶茶续续命! 作者:王炸 |【坚持1000篇原创】 2020.2.21 王炸的第60篇原创 ☝️先赞后看是技术人的传统美德☝️ 有小朋友问我,我刚刚学Java,没接触过...

励志程序员
02/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部