[置顶] Echart动态获取数据库数据使用心得

Echart是百度出品的数据展示插件，优点是简单易用，交互性强，数据展示形式丰富，界面美观，数据注入方便。以下为本人在最近的的一个项目中使用Echart的心得。

百度的Echart做了很好的封装，只需在JS中对Echart进行配置即可在页面指定的区域显示相应的数据展示表格，其中配置数据展示的关键是对option的配置，而option中的xAxis中的data和series中的data是配置数据的核心，在此着重对这两个data进行配置。

这两个属性的参数均是数组，且该属性对数据的格式要求比较严格，必须是js的数组格式，而复合js数组形式的字符串是不支持的，因此需要我们把后台传来的数据拼装为数组后再传到option中，以下以官方文档的入门例程为基础修改为新的例程进行讲解。首先说一下整体思路：1、建立模型类->2、从数据库查询数据，为模型类赋值->3、将数据对象传到前台进行遍历放入数组内，完成数据注入。

首先建立数据模型类ChartsData。option所需要从后台获取的数据有x 轴项目名，y轴数据，因此建立两个属性dataName和dadaNum,创建get、set方法。

public class ChartsData {

private String dataName;
private Integer dataNum;
public String getDataName() {
return dataName;
}
public void setDataName(String dataName) {
this.dataName = dataName;
}
public Integer getDataNum() {
return dataNum;
}
public void setDataNum(Integer dataNum) {
this.dataNum = dataNum;
}

2.为方便说明采用假数据对ChartsData进行初始化，初始化完成后将数据放在request域中传递到前台，在js中进行解析。

ChartsData chartsData0 = new ChartsData();

4000
chartsData0.setDataName("衬衫");
chartsData0.setDataNum(5);

ChartsData chartsData1 = new ChartsData();
chartsData1.setDataName("羊毛衫");
chartsData1.setDataNum(20);

ChartsData chartsData2 = new ChartsData();
chartsData2.setDataName("雪纺衫");
chartsData2.setDataNum(40);

ChartsData chartsData3 = new ChartsData();
chartsData3.setDataName("裤子");
chartsData3.setDataNum(10);

ChartsData chartsData4 = new ChartsData();
chartsData4.setDataName("高跟鞋");
chartsData4.setDataNum(10);

ChartsData chartsData5 = new ChartsData();
chartsData5.setDataName("袜子");
chartsData5.setDataNum(20);

List<ChartsData> data =new ArrayList<>();
data.add(chartsData0);
data.add(chartsData1);
data.add(chartsData2);
data.add(chartsData3);
data.add(chartsData4);
data.add(chartsData5);

model.addAttribute("chartData", data);

3.在js中使用El表达式从域中取普通对象时会丢失数据结构而变成字符串，无法进行遍历操作。但是js是可以直接解析json对象的，因此将数据对象转换为json对象，由于El表达式在从域中取出对象进行解析时是调用的该对象toString方法，因而重写ChartsData类的toString让El表达式在取到该对象进行解析时解析到出的是一个json格式字符串，js会将这个字符串解析为json对象而可以进行遍历操作

@Override
public String toString() {
return "{\"dataName\":\""+ dataName + "\""+",\"dataNum\":"+dataNum+"}";
}

4.遍历数据对象时调用数组的push方法将数据拆装到相应数组中，完成注入

<script>
var $dataNum=[];
var $dataName=[];
$(function() {
var $temp=${chartData};
for(var i=0;i<$temp.length;i++)
{
$dataName.push($temp[i].dataName);
$dataNum.push($temp[i].dataNum);
}
});
</scripts>

js代码

<script>
var $dataNum=[];
var $dataName=[];
$(function() {
var $temp=${dataInfo};
for(var i=0;i<$temp.length;i++)
{
$dataName.push($temp[i].dataName);
$dataNum.push($temp[i].dataNum);
}
});

require.config({
paths: {
echarts:'http://echarts.baidu.com/build/dist'
}
});

require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('chart'));

var option = {

calculable : true,

toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},

tooltip: {
show:true
},
legend: {
data:['销量'],
x : 'center',
y : 'bottom'
},
xAxis : [
{
type : 'category',
data : $dataName
}
],
yAxis : [
{
type : 'value',
}
],
series : [
{
"name":"销量",
"type":"line",
"data": $dataNum,
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
},
itemStyle:{
normal:{
color:'#3fa1ff'
}
}

}
]
};

// 为echarts对象加载数据
myChart.setOption(option);
}
);

</script>

效果图

-