利用ajax获取echarts图表的数据
ECharts是由百度打造的一个纯javascript的图标库,很好用。
下载地址:http://echarts.baidu.com/download.html
1. echarts文件的引入,在javascript块引入,src按需修改
<script type="text/javascript" src="./res/js/echarts.js"></script>
2. 基于准备好的dom,初始化echarts
js: var myChart = echarts.init(document.getElementById('main'));
html: <div id="main" style="width:900px;height:500px;"></div>
3.指定图表的配置项和数据
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data:['电话','邮件','广告','视频','搜索']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'电话',
type:'bar',
data:[32, 33, 30, 33, 39, 30, 30]
},
{
name:'邮件',
type:'bar',
data:[20, 12, 101, 14, 30, 30, 20]
},
{
name:'广告',
type:'bar',
data:[22, 18, 19, 23, 29, 35, 30]
},
{
name:'视频',
type:'bar',
data:[10, 22, 21, 14, 10, 30, 10]
}
]
};
4.ajax动态获取数据设置参数
$.ajax({
type: 'get',
url: URL,
data: data,
dataType: "json",
success: function (res) { //这里只设置月份
myChart.setOption({
xAxis:{
data:res.Ymouth
}
});
}
});
5. 使用刚指定的配置项和数据显示图表
myChart.setOption(option,true);
6.ajax传递数据
原始数据图片 :
动态数据图片:
为大家提供更多更全面的知识点,共同进步!