完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应
来源:互联网 发布:cf手游刷图软件 编辑:程序博客网 时间:2024/06/05 05:39
1.前言
百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了。今天呢。主要是跟小白讲一下,如何用ajax+百度Echarts实现我们动态数据的绑定呢?
2.详情
写一个很全的demo.接口的url自己换,数据结构自己换。
- 引入百度echarts库
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xGF99mjQcACk1Ctv50lXs0QOqdHiZml1"></script>
2.html内容`
<div class="match_echart cleanfloat"> <div id="chart1" style='margin-right:1%' ></div> <div id="chart2" ></div> </div>
3.css样式
//定义宽高度.match_echart>div{width:48%; height:400px;float:left; border:1px solid #d1d1d1;}//清浮动.cleanfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
4.js代码
//初始化var chart1 = echarts.init(document.getElementById('chart1'));var chart2 = echarts.init(document.getElementById('chart2'));//用ajax获取数据填充function chartFun() { /*饼图option*/ var option1 = { title: { text: '分类', x: 'center', }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['高度', '中度', '低度'] }, series: [{ name: '分类', type: 'pie', center: ['50%', '55%'], radius: '50%', data: [] }, ] } /*柱状图option*/ var option2 = { title: { text: '对手', x: 'center', }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, xAxis: [{ type: 'category', data: [], axisTick: { alignWithLabel: true } }], yAxis: [ { type: 'value' }], series: [{ name: '对手', type: 'bar', center: ['50%', '55%'], radius: '50%', data: [] }, ] } /*分类饼图*/ $.ajax({ url: url1,//请换成自己的url success: function (result) { //换成自己的数据结构 var high = result.high; var low = result.low; var middle = result.middle; option1.series[0].data.push({ value: high, name: "高度" }, { value: middle, name: "中度" }, { value: low, name: '低度' }); chart1.setOption(option1); } }) /*分类柱状图*/ $.ajax({ url: url2,//请换成自己的url success: function (result) { //换成自己的数据结构 for (var i = 0; i < result.list.length; i++) { var column =result.list[i].column; var num = result.list[i].num; option2.series[0].data.push({ value: num, name: column }); option2.xAxis[0].data.push(column); } chart2.setOption(option2); } }) }//调用方法$(function(){ chartFun()});//根据窗口大小自适应图表window.addEventListener("resize", function () { chart1.resize(); chart2.resize();});
5.效果展示
4.总结
这种demo在项目需求应用中应该是简单的不能再简单的了,很多童鞋的需求肯定不是酱紫的,好吧,如果你是小白,这个会了,稍微难的或者更难的都不会难倒你的。总之,掌握了其方法就会了。我这个写的是很菜,好吧,我承认我技术不照,学无止境!。
阅读全文
1 0
- 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应
- echarts图表大小自适应
- CEGUI控件随着窗口大小改变而改变
- C++ MFC控件随着窗口大小变化而自适应
- C++ MFC控件随着窗口大小变化而自适应
- Echarts 如何设置多个图表自适应窗口大小
- Delphi让控件随着窗口的大小而改变
- echarts实现统计图表
- mfc中控件随着窗口的大小改变而改变大小
- VC MFC 让窗口、控件随着主窗口大小改变而改变
- echarts选项卡切换效果,并且自适应随着窗口大小变大变小。
- QT中控件如何随着窗口大小的改变而使它充满整个窗口空间
- echarts图表大小随着外部div大小变化
- echarts 图表根据容器大小自适应
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
- 让iframe自适应高度 兼容多种浏览器随着窗口大小改变
- QT5如何让控件随着窗口大小改变而缩放(图示)
- 数据库增删改查
- 解决“ the useBean class attribute StudentBean is invalid”
- cookie和session的区别
- Mysql中文排序order by covert
- c++ 单链表
- 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应
- socket
- Unity3D引擎架构设计之组件的概念解析
- bzoj3312[Usaco2013 Nov]No Change 状压DP
- C++多线程和原子操作--2017-7-20
- window.onload和$(document).ready(function(){})
- Dom4j加强&Xpath技术&SAX解析
- Spark-ML 线性回归 LinearRegression (1)
- Android中分辨率,DPI,DP与PX对应关系