<script>
var myChart;
$(document).ready(function () {
//getEcharts();
});
function getEcharts() {
myChart = echarts.init(document.getElementById("container"));
var options = {
title: {
text: '实际监测的各类食品的构成比',
subtext: '',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {
show: true,
type: ['pie', 'funnel', 'line', 'bar', 'stack', 'tiled'],
},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(options); //先把可选项注入myChart中
getChartData();//ajax后台交互
}
function getChartData() {
var names = []; //(选项描述)
myChart.showLoading({
text: "图表数据正在努力加载..."
});
//通过Ajax获取数据
$.ajax({
type: "post",
url: "/foodMic/statistics/getFoodSamples",
dataType: "json",
// data:
success: function (data) {
result = eval(data.resultObject);
//console.log(result);
var dataList = [];
for (var i = 0; i < result.length; i++) {
//console.log(result[i].foodCategoryName);
names.push(result[i].foodCategoryName); //挨个取出类别并填入类别数组
var obj = {};
obj.value = result[i].sampleNum;
obj.name = result[i].foodCategoryName;
dataList.push(obj);
}
//console.log(names);
//console.log(dataList);
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
legend: {
data: names
},
series: [
{
data: dataList
}
]
});
},
error: function (errorMsg) {
alert("图表请求数据失败啦!");
myChart.hideLoading();
}
});
}
</script>
echarts ajax请求方式
最新推荐文章于 2022-05-02 01:17:52 发布