【前端统计图】echarts实现简单柱状图
2018-03-27 12:29
435 查看
图片.png
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五分钟上手之柱状图</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> <script src="js/jquery-1.11.3.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')); // 指定图表的配置项和数据 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["1","2","3","4","5"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: ["1","2","3","4","5"] }] }); </script> </body> </html>加上json数据之后,动态生成 的统计图
图片.png
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五分钟上手之柱状图</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> <script src="js/jquery-1.11.3.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')); // 指定图表的配置项和数据 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }] }); // 异步加载数据 $.get('data.json').done(function (data) { // 填入数据 myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根据名字对应到相应的系列 name: '销量', data: data.data }] });}); </script> </body> </html>data.json数据
{ "categories": [ "苹果", "橘子", "荔枝", "桃子", "栗子", "梨子", "柿子" ], "data": [ 500, 280, 386, 190, 107, 207, 452 ] }
文末福利:
福利一:前端,Java,产品经理,微信小程序,Python等10G资源合集大放送:https://www.jianshu.com/p/e8197d4d9880福利二:微信小程序入门与实战全套详细视频教程。
【领取方法】关注 【编程微刊】微信公众号:回复【小程序demo】一键领取130个微信小程序源码demo资源。回复【领取资源】一键领取前端,Java,产品经理,微信小程序,Python等资源合集10G资源大放送。
原文作者:祈澈姑娘
原文链接:https://www.jianshu.com/u/05f416aefbe1
创作不易,转载请告知
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
相关文章推荐
- ASP.NET+JQuery+.Ashx实现+百度Echarts 实现动态柱状图数据图形报表的统计
- 简单js实现统计图(平面图、柱状图、圆形)
- JQuery实现柱状图统计简单实现思路样例
- C &&Linux 下简单实现单词统计
- echarts地图上实现柱状图
- [置顶] 原生JS实现一个简单的前端路由(路由实现的原理)
- Python(2.7.x)实现简单的单词频数统计
- 简单的Java编译器的前端实现
- 前端用Webpact打包React后端Node+Express实现简单留言版
- 2014.02.20 重构代码之按不同级部门统计报表的实现总结(前端实现)
- C#+JQuery+.Ashx+百度Echarts 实现全国省市地图和饼状图动态数据图形报表的统计
- echarts3 柱状图实现
- DataTable用中使用Compute 实现简单的DataTable数据的统计
- 简单网站人数统计实现
- ASP.NET中在线用户统计的简单实现及讨论
- ASP.NET中实现简单访问统计计数器
- C++实现统计代码运行时间计时器的简单实例
- 前端通过JS将从后端接口返回的大数求和的简单实现
- mongoDB使用mapreduce实现简单的统计功能
- 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应