Skip to content

sixtreehall/EChartsFormatter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#2019-2-26 新增几个方法 示例html页面等改善后再push上来, 更多详尽信息请关注博客,或者star本仓库
有的朋友说写得有点麻烦,不过什么事情如果一蹴而就那就太好了!
方法基本没有冗余,麻烦一是写得不是很简化,这样也利于js功底不太好的朋友们一起学习.
现在支持曲线图line,及柱状图bar的自由切换,之后会再加入其它类型及WebGL的所需数据转化方法.

#2019-9-7 改善不同业务情况的逻辑问题.详见EChartsFormatter2和echarts-formatter-2.html示例 感谢两位同事的倾情改善:myzy,huchong
这个EChartsFormatter2.js是基于原始版本getParam.js进行的升级,为了解决较复杂业务:

  1. 数据中存在断续传入的情况,即ABC三家公司的数据,B公司的数据在某些天的数据是没有传入的,而A是有的.
  • 解决方式: 断续传入的情况基于该B公司最后录入的有效性数据进行延续,比如价格走势,延续最后有效的价格延续横线替代断续情况.
  1. 数据中存在中途传入的情况,即ABC三家公司的数据,C公司的数据在AB公司连续输入后,在中间的某段时间进行了传入.
  • 解决方式: 中途传入的情况基于该C公司在当中途数据传入的时间进行单独端点开始展示,其余情况与问题1一致.
    前端示例:echarts-formatter-2.html 业务接口暂时无法提供

/************************EChartsFormatter************************

author:ukzq blog:https://www.cnblogs.com/ukzq/   
            github:https://github.com/deadzq

this repository:https://github.com/sixtreehall/EChartsFormatter

****************************************************************/

/**
 * 根据传入name和json数据获取指定name的value值数组
 *
 * @param name 要获取的其中某一个json的key的value数组
 * @param json 控制层返回的json数据如thisData:[{"id":33,"province":"山东","company":"A公司0","s_company":"公司0","softening_point":0.1,"toluene":1,"quinoline":1,"beta_resin":1,"coking_value":1,"ash":1,"today_price":123,"remarks":"备注0","reporter":"张","create_time":"2019-02-20 13:47:52","update_time":"2019-02-20 13:47:52","b_time":null,"e_time":null,"order":null},
 * @returns {Array} 假设传入("company",thisDate),则会获取数组[A公司0,B公司1,C公司2,D公司3] 注意这里的company的数组还不能用于ECharts的维度,因为要设置
 */
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数据中,与getParamValues不同的是这里的时间中有'2019-1-20'单引号加持.
 * 暂时未用该方法
 *
 * @param name 时间字段的名称
 * @param json json数据
 * @returns {Array}
 */
function getCreateTimes(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 => 数组
 * 假设根据字段获取指定公司的today_price数组:
 * priceArr = getParamValuesByCname("today_price", jsonData, "company", companys[0]);
 * 如:这里传入的要获取的name为"today_price",那么最终return获取到的数据为 数组 [2323,2902,3002,4432]
 *
 * @param name 传入要获取的name(最终是该name的数组)
 * @param json 总体json数据
 * @param key  上方获取时根据该key是否等于下面value为判断依据
 * @param value  上面的key的value等于给定此value时,才被纳入最终获取数组:
 * @returns {Array}  最终获取的数组 { array | json[key]=value & json[name] }
 */
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;
}


/**
 * 数组去重 假设 this=[ 1,1,1,2 ] => [ 1,2 ]
 *
 * @returns {Array}         ↑[ 1,2 ]
 */
Array.prototype.delDuplicate = function () {
    var arr = [];
    for (var i = 0; i < this.length; i++) {
        if (arr.indexOf(this[i]) == -1) {
            arr.push(this[i]);
        }
    }
    return arr.slice(); //slice()转为纯数组
}


// /*数组去重方法版本*/
// function delDuplicateArrayItem(array){
//     var arr = [];
//     for(var i in array){
//         if(arr.indexOf(array[i]) == -1){
//             arr.push(array[i]);
//         }
//     }
//     return arr;
// }


/*遍历js数组*/
// Array.prototype.traversal = function(){
//     var arrStr = '';
//     for(var i=0;i<this.length;i++){
//         arrStr += this[i];
//     }
//     return arrStr;
// }


/**
 * 获取以公司为key的todayprice数组 类似SQL的group by
 * 假设这里要获取公司名后:价格数组 => '公司名':[123,341,212] 并且传入的公司名是一个数组,
 * 最终形式为:'A公司0':[123,211,421,681],'B公司1':[300,421,255,472],'C公司2':[222,231,672,458],'D公司3':[332,425,521,862]
 * 示例: newJson = getJsonResult("today_price", data, "company", companys);
 *
 * @param name 要获取的数组字段名
 * @param json 总数据json
 * @param key  要根据哪个键去进行数组分组,这里示例为公司名字段"company",也可以根据字段"province"或"reporter"
 * @param values 对应key的数组集合,如key为"company",该values即[A公司0,B公司1,C公司2,D公司3],如果key为"province",可以传入如[山东,北京,内蒙古,河北,新疆]
 * @returns {string} 最终获取拼接的字符串 : 对应示例:  newJson:'A公司0':[123,211,421,681],'B公司1':[300,421,255,472],'C公司2':[222,231,672,458],'D公司3':[332,425,521,862]
 */
function getJsonResult(name, json, key, values) {
    var DataJSONStr = '';
    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]) {
                ret.push(json[i][name]);
            }
        }
        if (j != values.length - 1) {
            DataJSONStr += ("'" + values[j] + "':[" + ret + "],");
            ret = [];
        } else {
            DataJSONStr += ("'" + values[j] + "':[" + ret + "]");
            ret = [];
        }
    }
    var jsonStr = DataJSONStr;
    // console.log("jsonStr:" + jsonStr);
    return jsonStr;
}


/**
 * 返回ECharts 中 source中的填充数据: (格式如下):
 *    示例:
 *     'createTimes':['2012', '2013', '2014', '2015'],
 *     'companyName1': [41.1, 30.4, 65.1, 53.3],
 *     'companyName2': [86.5, 92.1, 85.7, 83.1],
 *     'companyName3': [24.1, 67.2, 79.5, 86.4]
 *    或理解为这样:
 *    'createTimes':['2019-02-20 13:47:52','2019-02-23 13:47:52','2019-02-24 13:47:52','2019-02-25 13:47:52'],'A公司0':[123,211,421,681],'B公司1':[300,421,255,472],'C公司2':[222,231,672,458],'D公司3':[332,425,521,862]
 *
 *
 * @param name  与getJsonResult一样
 * @param json  与getJsonResult一样
 * @param key  与getJsonResult一样
 * @param values  与getJsonResult一样
 * @param times  新增参数times为指定的times的字符串名称
 * @returns {stgetJsonResultProring}  查看上示例
 */
function getJsonResultPro(name, json, key, values, times) {
    var DataJSONStr = '';
    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]) {
                ret.push(json[i][name]);
            }
        }
        if (j != values.length - 1) {
            DataJSONStr += ("'" + values[j] + "':[" + ret + "],");
            ret = [];
        } else {
            DataJSONStr += ("'" + values[j] + "':[" + ret + "]");
            ret = [];
        }
    }
    var createTimes = getParamValues("create_time", json).delDuplicate();
    var jsonStr = "'" + times + "'" + ":[" + createTimes + "]," + DataJSONStr;
    return jsonStr;
}


/*size:需要设定几个. typeIn:line,row? . seriesLayout:根据什么排列数据*/
/**
 * 主要用于填充series字段
 * 示例 形式为:
 * [
 *   {"type":"line","seriesLayoutBy":"row"},
 *   {"type":"line","seriesLayoutBy":"row"},
 *   {"type":"line","seriesLayoutBy":"row"},
 *   {"type":"line","seriesLayoutBy":"row"}
 * ]
 *
 * @param size 需要设定几行
 * @param typeIn  展示类型,主要有line(曲线),bar(柱状图), pie(饼图),scatter(散点图)  ^_^||  >饼图,散点图 暂时还支持得不太好~
 * @param seriesLayout  数据的转变形式,一般这里使用"row",还有"column"
 * @returns {Array} 查看上面示例
 */
function getSeriesContent(size, typeIn, seriesLayout) {
    var contentArr = [];
    for (var i = 0; i < size; i++) {
        contentArr.push({type: typeIn, seriesLayoutBy: seriesLayout});
    }
    return contentArr;
}


/**
 * 填充ECharts dataset:source的数据形式
 * 示例:newArr = getArrayResultPro("today_price", data, "company", companys, "createTime",createTimes);
 * 返回:[ <<ret[]
 * timesArr[0]: ['createTimes','2018-06-19 16:00:00','2019-01-20 16:00:00','2019-01-21 16:00:00'],
 * priceStr[1]: ['华联石化',2323,5321,2422],
 * priceStr[2]: ['海油石化',3000,2311,3211],
 * priceStr[3]: ['昌邑石化',2703,1688,2900]
 *     ]<<ret[]
 *
 * console.log形式: createTime,2019-02-20 13:47:52,2019-02-23 13:47:52,2019-02-24 13:47:52,2019-02-25 13:47:52,A公司0,123,211,421,681,B公司1,300,421,255,472,C公司2,222,231,672,458,D公司3,332,425,521,862
 *
 * 示例返回:
 *  [
 *    ['product', '2012', '2013', '2014', '2015'],
 *    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
 *    ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
 *    ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4],
 *    ['sulfur1',1.4,1.2,1.5,0.5],
 *    ['sulfur2',2.4,3.2,1.5,1.5],
 *    ['sulfur3',2.4,3.2,1.5,1.5],
 *  ]
 *
 *
 * @param name 要获取的展示数据数组(这里主要是价格)
 * @param json 后端返回数据json
 * @param key  数据数组打头要展示的key(这里主要是公司名)
 * @param values  同上,这里是传入要查询的公司名数组
 * @param timeName 时间节点打头占位字符串,这里假设为 'createTimes' (创建时间)
 * @param dataTimeName 节点时间名,传入对应json中的时间节点的名称如"create_time",则获取timeArr
 * @param timeArr  传入的时间节点集合,如果不传入可通过上面参数dataTime内部获取
 * @returns {Array} 返回形式见 示例
 */
function getArrayResultPro(name, json, key, values, timeName, dataTimeName, timeArr) {
    var ret = [];
    if (timeArr == null) {
        console.log("getArrayResultPro:timeArr is Null,execution getParamValues return timeArr.")
        timeArr = getParamValues(dataTimeName, json).delDuplicate();
    }
    var timesArrStr = timeName + "," + timeArr;
    var timesArr = timesArrStr.split(",");
    ret.push(timesArr); //放入首行times集合
    // var price = [];
    var priceStr = '';
    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]) {
                priceStr += json[i][name] + ",";
            }
        }
        var s = values[j] + "," + priceStr.substring(0, priceStr.length - 1);
        priceStr = '';
        ret.push(s.split(","));//放入公司及价格数组
    }
    return ret;
}

/**
 * 主要用于ECharts中dataset下dimensions的数据填充
 * 将两个数组何为一个,避免形式['createTime',[companyName1,companyName2,companyName3]]
 * 正确形式:['createTime',companyName1,companyName2,companyName3]
 * 如果需要将数组中值变为''单引号加持请使用 array.map(String)
 *
 * @param companys 公司(或需要的)数组
 * @param timeName 时间名称(并非json中的时间key,而是填充时间节点的自定义的timeName),
 *                 如果获取不到时间请查看是否与其它数据设定的时间名称是否一致
 * @returns {Array}  示例: ['createTime',companyName1,companyName2,companyName3]
 */
function twoArrayToOne(companys, timeName) {
    var timeAndcompanyArray = [];
    timeAndcompanyArray.push(timeName);

    for(var i=0;i<companys.length;i++){
        timeAndcompanyArray.push(companys[i]);
    }

    // for (var i in companys) {
    //     // timeAndcompanyArray.push(companys.map(String)[i]);//原加持方式
    // }
    return timeAndcompanyArray;
}

About

A ECharts Data Formatter

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors