java中图表如何显示_java ee 网页中图表的显示

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

下载echarts.zip

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

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

在页面中插入一个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请求Servlet获取，生成option获取参数

}, function(data) {

var json = eval("(" + data + ")");

xAxisData = json.xAxisData;

seriesData = json.seriesData;

option = {//生成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

})

}

);