怎么样让ECharts从后台获取数据并展示

2025-04-18 10:59:00
推荐回答(1个)
回答1:

  把项目中用到的几个报表图形拿出来分享一下。
主要是饼图和柱状图,结合点击事件获取点击的数据。

效果图:
获取数据后效果

点击饼图获取到数据的效果:

html代码:
放2个div,取个id就行。引用写好的js。



测试类型

















echarts代码:
1、在BusinessJs/echarts.js中引用echarts及zrender:

require.config({
packages: [
{
name: 'echarts',
location: './echarts/src',
main: 'echarts'
},
{
name: 'zrender',
location: './zrender/src',// zrender与echarts在同一级目录
main: 'zrender'
}
]
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/pie'
],
function (ec) {
var myChart_Category = ec.init(document.getElementById('div_pieCategory'));
var myChart_Bar = ec.init(document.getElementById('div_bar'));

SetTestStatisticsByCategory(ec, myChart_Category);
SetTestStatisticsByBeginTime(ec, myChart_Bar);
//设置点击事件
var ecConfig = require('echarts/config');
myChart_Category.on(ecConfig.EVENT.PIE_SELECTED, function (param) {
var selected = param.selected;
//debugger;
var serie
serie = optionpie_category.series[0];
if (jQuery.inArray(true, selected[0]) > -1) {
for (var i = 0; i < serie.data.length; i++) {
if (selected[0][i]) {
$("#hid_category").val(serie.data[i].name);
GetTestList(serie.data[i].name);
}
}
}
else {
$("#hid_category").val("");
}

})

myChart_Bar.on(ecConfig.EVENT.CLICK, function (param) {
var selected = param;
var xAxis;
xAxis = optionpie_bar.xAxis[selected.seriesIndex];
for (var i = 0; i < xAxis.data.length; i++) {
if (i == selected.dataIndex) {
if ($("#hid_date").val() != xAxis.data[i]) {
$("#hid_date").val(xAxis.data[i]);
} else {
$("#hid_date").val("");
}
GetTestList(xAxis.data[i]);
}
}
})
}
)