文档章节

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

k
 kevin小当家
发布于 2015/08/07 17:31
字数 594
阅读 478
收藏 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
海淀
私信 提问
D3.js与echart.js的应用场景

什么是D3? D3.js的全称是Data-Driven Documents,其实就是一个数据驱动的文档的js库,简而言之就是一个数据可视化的库。那什么是数据可视化呢?举个例子: 给出一组数据 [10,80,40,100,30...

Nomad_Lau
05/11
0
0
echarts甘特图的实现问题

由于项目需要使用甘特图展现设备的运行和停机记录,每条数据都有开始时间和结束时间。选择了很多JS图表组件,amchart、highchart、echarts等,最终决定使用echarts,数据量大时加载速度也很理...

wiseli
2015/04/10
1K
3
ECharts 3 测试版发布,焕然一新的面貌

ECharts 3 测试版发布 注:由于直接转载内容,文章中实例效果无法查看,如需查看详情请往 ECharts3 带来了什么 ECharts 在 github 上沉寂了数个月,想必很多小伙伴充满了各种疑问,ECharts是...

pissang
2015/12/04
70.7K
66
echarts搞定各种地图(想怎么画就怎么画)

echarts提供了全国各省市及区县的js和json文件,但是并没有细化到区域内各街道范围,有时候项目中又有这种需求,领导给予重任,我们又不能轻易拒绝,只能是硬着头皮上了。 今天我们以北京市西...

Mr_ZhangQian
2018/09/20
0
0
ECharts GL 1.0 alpha 发布

距离 ECharts-X 最近一个版本已经过去了两年多时间,期间我们不断被开发者在各种渠道询问 ECharts-X 为什么还不升级新版本,是不是不再维护了等等,对于这些问题我们只能回答我们还没准备好。...

ECharts
2017/04/17
8.1K
29

没有更多内容

加载失败,请刷新页面

加载更多

硬件配置

https://akkadia.org/drepper/futex.pdf sudo lshw -businfo[sudo] lambda 的密码: Bus info Device Class Description======================================......

MtrS
今天
3
0
springmvc的return “success”源码解读

qqqq

architect刘源源
今天
6
0
Java程序员五面阿里分享 逆袭成功 太不容易了!

前言 拿到阿里实习offer,经历了5次面试,其中4轮技术面,1轮HR面试。在这里分享一下自己的面试经验和学习心得。希望能够帮助更多的小伙伴。 我本科毕业于中南大学信管专业,真正开始学习Jav...

别打我会飞
昨天
4
0
Android Camera模块解析之视频录制

《Android Camera架构》 《Android Camera进程间通信类总结》 《Android Camera模块解析之拍照》 《Android Camera模块解析之视频录制》 《Android Camera原理之CameraDeviceCallbacks回调模...

天王盖地虎626
昨天
2
0
手把手教你使用issue作为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。 TLDR (不多废...

jump--jump
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部