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在項目需求應用中應該是簡單的不能再簡單的了,很多童鞋的需求肯定不是醬紫的,好吧,如果你是小白,這個會了,稍微難的或者更難的都不會難倒你的。總之,掌握了其方法就會了。我這個寫的是很菜,好吧,我承認我技術不照,學無止境。。