Echart动态获取数据库数据使用心得

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

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

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

1. 首先建立数据模型类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();
        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方法将数据拆装到相应数组中，完成注入

• 效果图
  -