java ee 网页中图表的显示

首先附上 http://echarts.baidu.com/ 网址

下载echarts.zip

将dist(压缩后js代码)文件夹导入到前端(WebContent)js文件夹中。

当然也可以将source(源码)文件夹导入到(WebContent)文件夹中。

在页面中插入一个div

<div id="hellochart" style="height:400px" ></div>

id自己取，但是style高度属性必须标注为一个固定的高度。要不然图表会显示不出来
require.config({
paths: {
echarts: './js/echarts/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('hellochart')); //初始化div
/*
myChart.showLoading({
text: '正在努力加载中...'
});
*/
var xAxisData = []; //此属性是每个点的x坐标
var seriesData = []; //此属性是每个点的y坐标

jQuery.get("IncomeLineChartServlet", { //get请求<span style="font-family: Arial, Helvetica, sans-serif;">Servlet</span><span style="font-family: Arial, Helvetica, sans-serif;">获取，生成option</span><span style="font-family: Arial, Helvetica, sans-serif;">获取参数</span>
}, function(data) {
var json = eval("(" + data + ")");
xAxisData = json.xAxisData;
seriesData = json.seriesData;

option = {<span style="white-space:pre"> </span>//生成option
title : {
text: '近一月营业额变化',
//subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
/*
legend: {
data:['最高营业额','最低营业额']
},
*/
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : xAxisData
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 元'
}
}
],
series : [
{
name:'营业额',
type:'line',
data: seriesData,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
],
/*itemStyle : {
normal: {
color: 'rgba(180,238,180,1)'
}
}*/
},
markLine : {
data : [
{type : 'average', name: '平均值'}
],
/*itemStyle : {
normal: {
color: 'rgba(70,130,180,1)'
}
}*/
},
/*
itemStyle : {
normal: {
color: 'rgba(70,130,180,1)'
}
}*/
}
/*
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
*/
]
};
myChart.setOption(option); //设置显示option
})

}
);