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

最新推荐文章于 2025-04-18 17:22:49 发布

置顶

Flying_Driver

最新推荐文章于 2025-04-18 17:22:49 发布

阅读量8.5k

点赞数 6

分类专栏：日常总结文章标签：数据插件 Echart

本文链接：https://blog.youkuaiyun.com/sinat_39409672/article/details/77775314

版权

本文分享了使用Echart动态获取并展示数据库数据的经验。重点在于如何处理从后台获取的数据，将其转换为Echart所需的数组格式。通过创建数据模型类ChartsData，设置属性dataName和dataNum，并在前端利用JSON解析保证数据结构完整，最终成功注入Echart的option中进行数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();
        chartsData0.setDataName("衬衫");
        chartsData0.setDataNum(5);

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

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

最低0.47元/天解锁文章