[EChartsFormatter] - 一个ECharts数据转换插件

最新推荐文章于 2025-06-23 11:42:28 发布

原创最新推荐文章于 2025-06-23 11:42:28 发布 · 870 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS

本文介绍如何使用JavaScript函数从JSON数据中提取字段值，动态填充ECharts图表的xAxis和series数据，实现数据可视化。通过提供的getParamValues和getParamValuesByCname函数，可以灵活处理单个或多个数据源，适用于不同场景的数据展示。

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

插件地址:https://github.com/sixtreehall/EChartsFormatter

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

从上述代码看到data填充的数组完全可以根据前端点击按钮或ajax获取json后根据不同的获取字段获取.

比如xAxis的data为时间,而series系列中是数值(比如数据库中price字段).

那么其实一个js是可以搞定的.

即使数据库返回的是一套元组数据(其中字段包含了这俩data的数据)

/*获取json数据中的某一个字段*/
function getParamValues(name, json) {
    var ret = [];
    var len = Object.keys(json).length;
    for (var i = 0; i < len; i++) {
        ret.push(json[i][name]);
    }
    return ret;
}

那么将json数据传入后可以获取某个字段的数组形式.

假如有三个company,每个company的时间轴和价格表要进行数据获取呢?

没关系我们还有这个js

/*获取json数据中的某一个字段key根据给定value => 数组*/
function getParamValuesByCname(name, json, key, value) {
    var ret = [];
    var len = Object.keys(json).length;

    for (var i = 0; i < len; i++) {
        if (json[i][key] == value) {
            ret.push(json[i][name]);
        }
    }
    return ret;
}

好了,这个EChartsFormatter讲解完了,请关注github.进行star或者fork.