echarts动态加载饼状图数据
<!-- 为ECharts准备一个div -->
<div id="myChart1" style="width: 600px;height:400px;"></div>
ajax往echarts表中填数据
1、查询要赋值的数据
2、生成图表,把值放进去
var xq = document.getElementById("myChart1");
var xqChart = echarts.init(xq);
var xqapp = {};
// 数据加载前的动画
xqChart.showLoading();
// 定义两个数组 接收后台的数据
var demo1= [];
var demo2= [];
$.ajax({
type: 'post',
async: false,
url: '//后台方法',
// 根据data中的值从后台方法中查数据
data: {
'name': $("#userName").val(),
'datetxt': $("#dateTime").val()
},
success: function (result) {
if (result.rows.length > 0) {
for (var i = 0; i < result.rows.length; i++) {
var json = { value: result.rows[i].demo2, name: result.rows[i].demo1}
dataSource.push(json);
PrimaryOdorAttribute.push(result.rows[i].PrimaryOdorAttribute);
}
}
// 生成图表
option = null;
option = {
title: {
text: 'demo',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
legend: {
orient: 'vertical',
x: 'left',
data: demo1
},
series: [
{
name: 'demo',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: demo2,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0)'
},
}
}
]
};
;
if (option && typeof option === "object") {
xqChart.setOption(option, true);
}
// 隐藏加载动画
xqChart.hideLoading();
}
})