echarts画图/封装数据

echarts用来画图还是不错的,前端引一下包,将相关的图的demo拷一下,改一下数据就行

封装数据思路

需求: 展示一段时间内的收入,退款,提现的数据和趋势
让产品随便选,选了上面这个.x轴是每个数据集合的开头,后面跟三条线的y轴的数据

获取x轴的时间

SELECT t1.date_str time
FROM (
    SELECT @cdate := date_add( @cdate, INTERVAL - 1 DAY ) AS date_str
    FROM ( SELECT @cdate := date_add( CURDATE( ), INTERVAL 1 DAY ) FROM tbl_pay_running_water ) tmp1
    WHERE @cdate > '2020-04-05'
) t1
ORDER BY time

• 我这里是使用mysql获取的

获取y轴的数据

SELECT FROM_UNIXTIME(createTime / 1000, '%Y-%m-%d') pTime,SUM(money) money FROM tbl_pay_running_water
WHERE FROM_UNIXTIME(createTime / 1000, '%Y-%m-%d' ) BETWEEN '${startTime}' AND '${endTime}'
	AND orderType = 1 AND orderStatus = 2
GROUP BY pTime

• 其余的数据也使用类似的方法

拼装数据

List<JSONObject> incomeJo = settlementFlowMapper.selectIncome(billDto);
List<JSONObject> refundJo = settlementFlowMapper.selectRefund(billDto);
List<JSONObject> withdrawJo = settlementFlowMapper.selectWithdraw(billDto);
JSONArray productArray = new JSONArray();
productArray.add("product");
productArray.add("收入");
productArray.add("退款");
productArray.add("提现");
jsonArray.add(productArray);

List<String> days = settlementFlowMapper.selectCustomizeTateStr(billDto);
for (String day : days) {
    JSONArray incomeArray = new JSONArray();
    incomeArray.add(day);

    String incomeMoney = getMoneyString(incomeJo, day);
    String refundMoney = getMoneyString(refundJo, day);
    String withdrawMoney = getMoneyString(withdrawJo, day);

    incomeArray.add(incomeMoney);
    incomeArray.add(refundMoney);
    incomeArray.add(withdrawMoney);
    jsonArray.add(incomeArray);
}

private String getMoneyString(List<JSONObject> jsonObject, String day) {
    String moneyStr = "0.00";
    for (JSONObject refund : jsonObject) {
        String money = refund.getString("money");
        String time = refund.getString("pTime");
        if (day.equals(time)) {
            moneyStr = money;
            break;
        }
    }
    return moneyStr;
}

• 循环x轴的日期时间串拼装就ok了