[echats] - 解析数据,而不通过修改数据库查询语句.

看了下echarts展示的数据格式是key,value的形式(包括数组)

dataset: [{
    // 按行的 key-value 形式(对象数组),这是个比较常见的格式。
    source: [
        {product: 'Matcha Latte', count: 823, score: 95.8},
        {product: 'Milk Tea', count: 235, score: 81.4},
        {product: 'Cheese Cocoa', count: 1042, score: 91.2},
        {product: 'Walnut Brownie', count: 988, score: 76.9}
    ]
}, {
    // 按列的 key-value 形式。
    source: {
        'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
        'count': [823, 235, 1042, 988],
        'score': [95.8, 81.4, 91.2, 76.9]
    }
}]

第一种比较容易取得,而第二种是将同字段的放到一个数组中.

第一种无法很好展示可点/关闭那种按钮查看某组数据.

经过测试可以使用以下方法获取某类型字段.

/*获取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数据中的某一个字段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;
    }

假设我返回的数据中,A,B,C公司的数据都均有三条,那么我不能展示3*3=9条的价格,而因为A公司的价格数据变为一个数组[长度3],

那么就可以看到这样的价格曲线波动.同样的B,C公司也是一样.

通过上述方法获取到返回的公司(去重)的数组,并获取每个公司的历史价格数组.即可以通过按列的方式

// 按列的 key-value 形式。
    source: {
        'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
        'count': [823, 235, 1042, 988],
        'score': [95.8, 81.4, 91.2, 76.9]
    }

来填入数据.

下面的方法能获取可以填充的数据,但是在echarts里不支持填入.

 //获取以公司为key的todayprice数组
    function getJsonResult(name, json, key, values) {
        var DataStr = '';
        var ret = [];
        var len = Object.keys(json).length;

        for (var j = 0; j < values.length; j++) {
            for (var i = 0; i < len; i++) {
                if (json[i][key] == values[j]) {
                    // console.log("values[i]:" + values[i]);
                    // console.log("json[i][name]:" + json[i][name]);
                    ret.push(json[i][name]);

                }
            }

            if (j != values.length - 1) {
                DataStr += ("'" + values[j] + "':[" + ret + "],");
                ret = [];
            } else {
                DataStr += ("'" + values[j] + "':[" + ret + "]");
                ret = [];
            }
            console.log('values[i] + ":" + ret+",":' + values[i] + ":[" + ret + "],");
        }
        // var newJson = onDataStr.substring(onDataStr.length, onDataStr.length);
        return DataStr;
    }
dataset:[{// 按行的 key-value 形式(对象数组),这是个比较常见的格式。
    source:[{product:'Matcha Latte', count:823, score:95.8},{product:'Milk Tea', count:235, score:81.4},{product:'Cheese Cocoa', count:1042, score:91.2},{product:'Walnut Brownie', count:988, score:76.9}]},{// 按列的 key-value 形式。
    source:{'product':['Matcha Latte','Milk Tea','Cheese Cocoa','Walnut Brownie'],'count':[823,235,1042,988],'score':[95.8,81.4,91.2,76.9]}}]

猜你喜欢

转载自www.cnblogs.com/ukzq/p/10301026.html