通过Echarts官方下载Echarts.js文件
引用:<script src="echarts.js"></script>
//json数据
{
"code":"200","data":[{
"name":"xx店铺",
"sales_size":200
},{
"name":"aa店铺",
"sales_size":300
},{
"name":"bb店铺",
"sales_size":400
}]
}
<div id="sales_report_chart"></div>
<script>
//销量统计图
var sales_report_chart= echarts.init(document.getElementById('sales_report_chart'));
var option = {
title: {
text: '销售统计'
},
tooltip: {},
legend: {
data:['销售统计']
},
toolbox:
{
show:true,
feature:
{
dataView:{show:true},//显示数据视图
restore:{},//显示重载按钮
saveAsImage : {show: true},//显示下载按钮
}
},
xAxis: {
name:'销售统计',
data: []
},
yAxis: {},
series: [{
name:'销售金额:元',
type:'bar',
data:[],
}]
};
sales_report_chart.showLoading();//echart图加载
//ajax请求远程数据
jQuery.ajax({
type : "POST",
async : true,
url : "../table_after_statistics.json",//api
dataType:"json",
success:function(result) {
//接收json数据
var data=result.data;
if(data)
{
sales_report_chart.hideLoading();
//店铺名称
var name=[];
//销售量
var price=[];
jQuery.each(data,function(index,obj){//遍历json中的相关字段
//销售日期将数据中的字符串拼接成json数组
name.push(obj['name']);
//销售量
price.push(obj['price']);
});
sales_report_chart.setOption({
xAxis:{
data:name
},
series:[
{
data:price
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("请求数据失败!");
sales_report_chart.hideLoading();
}
});
sales_report_chart.setOption(option);
</script>