echarts 基本使用
来源:互联网 发布:算法工程师做什么的 编辑:程序博客网 时间:2024/06/08 12:24
最近项目中要做图形报表,要求使用echarts实现,图形报表有很多中实现之前也接触过,但echarts还是头一次听说,正好可以趁这个机会好好学习一下它。
2,为图形准备容器
就是在html中添加一个div给定id,图表就会显示在div中。
之前不知道就不知道啦,现在知道了就了不得了,一下子喜欢上了echarts,今后项目中要是让做报表我肯定首选echarts在没有强制要求的前提下。主要是echarts太完美了:1,开源软件,无私的为我们提供漂亮的图形界面;2,使用简单,默默的为我们封装了重要的js,只要会引用就会使用echarts;3,种类多,echarts为我们提供了各种图标,其中最具象征的就是地图了;4,兼容性好,基于html5动画渲染超棒。
echarts官网 提供了源码和说明文档,使用echarts需要先到官网下载需要的js源文件。
官网上的demo中夹杂着很多我们用不到的东西,想使用饼状图就得从demo中把不用的去掉,劈植斩叶留下最原始的功能实现。这样毕竟比较费时,我就在裁剪后的代码中加以总结于是乎新的使用教程如下所示:
echarts饼状图实现步骤:
1,在简单的html中引入js文件
- <head>
- <meta charset="utf-8">
- <title>Charts demo</title>
- <script src="js/esl.js"></script>
- </head>
- <body>
- </body>
2,为图形准备容器
- <head>
- <meta charset="utf-8">
- <title>Charts demo</title>
- <script src="js/esl.js"></script>
- </head>
- <body>
- <div id="picturePlace"></div>
- </body>
就是在html中添加一个div给定id,图表就会显示在div中。
3,模块导入js
- <head>
- <meta charset="utf-8">
- <title>Charts demo</title>
- <script src="js/esl.js"></script>
- </head>
- <body>
- <div id="picturePlace"></div>
- <script type="text/javascript">
- // 路径配置
- require.config({
- paths:{
- 'echarts' : 'js/echarts',
- 'echarts/chart/pie' : 'js/echarts'
- }
- });
- </script>
- </body>
4,添加显示数据
- <head>
- <meta charset="utf-8">
- <title>Charts demo</title>
- <script src="js/esl.js"></script>
- </head>
- <body>
- <div id="picturePlace"></div>
- <script type="text/javascript">
- // 路径配置
- require.config({
- paths:{
- 'echarts' : 'js/echarts',
- 'echarts/chart/pie' : 'js/echarts'
- }
- });
- // 使用
- require(
- [
- 'echarts',
- 'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
- ],
- function (ec) {
- // 基于准备好的dom,初始化echarts图表
- var myChart = ec.init(document.getElementById('<span style="font-family:SimSun;">picturePlace</span><span style="font-family:FangSong_GB2312;">'</span>));
- option = {
- title : {
- text: '某站点用户访问来源',
- subtext: '纯属虚构',
- x:'center'
- },
- tooltip : {
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)"
- },
- legend: {
- orient : 'vertical',
- x : 'left',
- data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
- },
- toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- dataView : {show: true, readOnly: false},
- restore : {show: true},
- saveAsImage : {show: true}
- }
- },
- calculable : true,
- series : [
- {
- name:'访问来源',
- type:'pie',
- radius : '55%',
- center: ['50%', '60%'],
- data:[
- {value:335, name:'直接访问'},
- {value:310, name:'邮件营销'},
- {value:234, name:'联盟广告'},
- {value:135, name:'视频广告'},
- {value:1548, name:'搜索引擎'}
- ]
- }
- ]
- };
- // 为echarts对象加载数据
- myChart.setOption(option);
- }
- );
- </script>
- </body>
5,运行程序显示结果
以上是饼状图的实现步骤,柱状图散点图跟这个类似就是引用js时饼状图是pie,柱状图是bar,对应的option里面的数据不同,程序的架子是一样的。。
点击下载源码: 地址1,地址2
转载自:http://blog.csdn.net/lishuangzhe7047/article/details/38895117
0 0
- echarts 基本使用
- echarts 基本使用
- echarts 基本使用
- echarts基本使用
- echarts基本使用
- echarts基本使用
- echarts 基本使用
- canvas绘图 echarts 基本使用
- ECHARTS的基本使用:柱状图、折线图、饼图等
- Echarts柱状图与折线图的基本使用
- Echarts使用
- ECharts使用
- echarts使用
- Echarts使用
- ECharts使用
- ECharts使用
- Echarts使用
- ECharts使用
- 下一代防火墙features
- 分布式数据库 Hbase 的高可用管理和监控
- 枚举、typedef关键字
- IDNFeedParser 一个简单易用的Rss解析库(Objective-C)
- 129.找出一位数组中最大值
- echarts 基本使用
- Java中super的几种用法并与this的区别
- NIO.2 入门,第 1 部分: 异步通道 API
- makefile详细教程
- 3.hibernate核心接口
- NIO.2 入门,第 2 部分: 文件系统 API
- Ubuntu14.04 安装lua5.3
- list.h头文件详解
- 黑马程序员——Java基础--多态、内部类、异常