怎么样让ECharts从后台获取数据并展示
2014-12-28
展开全部
您好,很高兴能帮助您,
html代码:
放2个div,取个id就行。引用写好的js。
<div>
<div class="case_type">
<div class="pie_chart_name">测试类型</div>
<div id="div_pieCategory" style="height:210px;
width: 300px; float: left;" class="pie_chart_img">
</div>
</div>
<div class="case_date">
<div id="div_bar" style="height:210px; width: 300px; float: left;">
</div>
</举困div>
</div>
<input id="hid_category" type="hidden" value="" />
<input id="hid_state" type="hidden" value="" />
<input id="hid_date" type="hidden" value="" />
<正亩念/form>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/esl.js"></script>
<script src="BusinessJs/echarts.js">耐模</script>
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]);
}
}
})
}
)
你的采纳是我前进的动力,还有不懂的地方,请你继续“追问”!
如你还有别的问题,可另外向我求助;答题不易,互相理解,互相帮助!
html代码:
放2个div,取个id就行。引用写好的js。
<div>
<div class="case_type">
<div class="pie_chart_name">测试类型</div>
<div id="div_pieCategory" style="height:210px;
width: 300px; float: left;" class="pie_chart_img">
</div>
</div>
<div class="case_date">
<div id="div_bar" style="height:210px; width: 300px; float: left;">
</div>
</举困div>
</div>
<input id="hid_category" type="hidden" value="" />
<input id="hid_state" type="hidden" value="" />
<input id="hid_date" type="hidden" value="" />
<正亩念/form>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/esl.js"></script>
<script src="BusinessJs/echarts.js">耐模</script>
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]);
}
}
})
}
)
你的采纳是我前进的动力,还有不懂的地方,请你继续“追问”!
如你还有别的问题,可另外向我求助;答题不易,互相理解,互相帮助!
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
光点科技
2023-08-15 广告
2023-08-15 广告
通常情况下,我们会按照结构模型把系统产生的数据分为三种类型:结构化数据、半结构化数据和非结构化数据。结构化数据,即行数据,是存储在数据库里,可以用二维表结构来逻辑表达实现的数据。最常见的就是数字数据和文本数据,它们可以某种标准格式存在于文件...
点击进入详情页
本回答由光点科技提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询