java图表数据显示_【JavaWeb+Echarts+EL表达式】用图表形式展示数据

1. Echarts环境配置

选择需要的，然后等待Build完成之后，就会自动弹出下载框啦！

把下载好的js放在web目录下~

然后在对应的jsp内导入噢~

2.Echarts代码

pageEncoding="UTF-8"%>

Insert title here

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

title: {

text: 'ECharts 入门示例'

},

tooltip: {},

legend: {

data:['销量']

},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

3.EL表达式

先在Servlet里setAttribute噢！

Map:

List

直接f.属性名就好啦！

4.EL表达式在js里如何使用呢~

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

var pants=[];

pants.push("${l}");

// 指定图表的配置项和数据

var option = {

title: {

text: 'ECharts 入门示例'

},

tooltip: {},

legend: {

data:['销量']

},

xAxis: {

data: pants

},

yAxis: {},

series: [{

name: '销量',

type: 'bar',

data: [5, 10, 10, 20]

}]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);