项目中需要用到图表这个功能,网上搜了半天,后台数据获取了但是效果就是出不来,弄了很久终于出来了,特来分享下
当然,看效果
首先导入js文件
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Content/echarts.js"></script>
其次,创建一个容器,必须制定宽度高度
<div align="center">
<div id="main" style="width: 1000px;height:700px"></div>
</div>
下面是script代码
var myChart = echarts.init(document.getElementById('main'));//渲染组件
myChart.showLoading({//加载动画
text:'正在加载数据。。。。'
});
var names = []; //类别数组(实际用来盛放X轴坐标值)
var nums = []; //销量数组(实际用来盛放Y坐标值)
//加载数据
jQuery.ajax({
url:"@Url.Action("GetEchart", "Charts")",
type: 'get',
datatype:'json',
async: true,
success: function (jsons) {
if (jsons) {
myChart.hideLoading();//隐藏动画
$.each(jsons, function (i, value) {
//alert(jsons[index].price);
names[i] = value['pname'];
nums[i] = value['price'] ;
var option = {
tooltip: {
show: true
},
legend: {
data: ['销量']
},
xAxis: [
{
type: 'category',
data: names
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
'name': '销量',
'type': 'bar',
'data': nums
}
]
};
myChart.setOption(option)//绑定数据
});
}
},
error:function(){
alert("数据加载失败!请检查数据链接是否正确");
}
});
// 初次加载图表(无数据)
myChart.setOption(option);
这样就完成了 ,后台的话只需要返回json数据就可以了