Echarts是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表,是一款很好用的前端报表制作工具。
动态获取后台数据绘制echarts图表可以使用jQuery的ajax()方法,动态获取json数据,对获取到的json数据挑选出你需要的,传给echarts图表。
示例效果。
贴个简易的代码,注释比较全了。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>
<script>
//初始化echarts实例
var myCharts = echarts.init(document.getElementById('main'));
//指定图表的配置项和数据
var option={
title:{
text:'ajax动态获取后台数据绘制echarts图表'
},
color:['#3398db'], //调色盘颜色列表
tooltip:{ //提示框组件
trigger:'axis', //触发类型(坐标轴触发)
axisPointer:{
type:'line' //指示器类型(直线指示器)
}
},
grid:{ //直角坐标系内绘图网格
left:'3%', //grid组件离容器左侧的距离
right:'4%',
bottom:'3%',
containLabel:true //grid 区域是否包含坐标轴的刻度标签。
},
xAxis:[ //x轴
{
type:'category', //坐标轴类型(类目轴)
data:[], //类目数据
axisTick:{ //坐标轴刻度相关配置
alignWithLabel:true //刻度线与标签对齐
}
}
],
yAxis:[
{
type:'value' //数值轴
}
],
series:[ //系列列表
{
name:'直接访问',
type:'bar',
barWidth:'60%',
data:[]
}
]
};
myCharts.setOption(option);
myCharts.showLoading(); //显示加载动画
var x = [];
var y = [];
$.ajax({
type:'get',
url:'./data/obj.txt',
dataType:'JSON',
success:function(data){
// console.log(data.data);
data.data.map((item)=>{
x.push(item.name);
y.push(item.extn);
})
// console.log(x,y)
myCharts.hideLoading(); //隐藏加载效果
myCharts.setOption({
xAxis:{
type:'category', //坐标轴类型(类目轴)
data:x
},
series:{
data:y
}
})
}
})
</script>
当传过来的数据量比较多时,x轴的显示就会不全,现在已经发现这个问题了,所以先把txt文档里数据删的只剩下四条能显示全,关于x轴显示不全的问题下一篇解决。