【ECharts】百度图表插件ECharts使用
2016-05-12 09:54
711 查看
百度ECharts报表呈现组件,挺不错的一个组件
官方网址:http://echarts.baidu.com/
下载 ECharts
http://echarts.baidu.com/download.html
你可以选择全部下载或自定义选择自己需要的js包
![](http://img.blog.csdn.net/20160512094426313)
引入 ECharts
ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。
绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 dom 容器。
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。
这样你的第一个图表就诞生了!
![](http://img.blog.csdn.net/20160512095127013)
ECharts教程:http://echarts.baidu.com/tutorial.html
API:http://echarts.baidu.com/api.html
实例DEMO:http://echarts.baidu.com/examples.html
官方网址:http://echarts.baidu.com/
下载 ECharts
http://echarts.baidu.com/download.html
你可以选择全部下载或自定义选择自己需要的js包
引入 ECharts
ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。
<!DOCTYPE html> <html> <header> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </header> </html>
绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 dom 容器。
<body> <!-- 为 ECharts 准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> </body>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
这样你的第一个图表就诞生了!
ECharts教程:http://echarts.baidu.com/tutorial.html
API:http://echarts.baidu.com/api.html
实例DEMO:http://echarts.baidu.com/examples.html
相关文章推荐
- asp.net中一款极为简单实用的图表插件(jquery)
- ECharts仪表盘实例代码(附源码下载)
- Ajax获取到数据放入echarts里不显示的原因分析及解决办法
- 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
- echarts图表导出excel示例
- Canvas和SVG的区别
- 解决ajax获取到数据放到echarts里不显示问题
- leaflet-echarts,使用leaflet加载echarts制作超炫可视化地图
- echarts 多个图形resize时的问题
- ECharts初使用,从后台得到数据源
- Convert shp to geoJSON,for ECharts.
- 基于ECharts报表开发
- echarts简单使用
- Spring 组合Echart.js
- echarts 文字标签云图实现方法
- echarts 兼容IE8问题 与实际开发范例
- Echarts小感
- 带时间轴的线型报表的配置说明和多维度的说明:
- 心路历程-初尝echarts
- ECharts Java 动态加载数据,echartsjava