Echars 动态生成数据与为0的数据不显示(折线图)

1、贴个效果图

2、讲个 自己的小思路: 准备自己统计的数据: 如下图(代码很简单):

// 首先我们需要一个data
// data里面需要什么数据？
// 1、每日的日期 2、每日日期对应的商品名称 3、每日日期对应的商品名称销售总数量
// 比如:
//     goodsName        days            count
//     老干妈            2019-01-01      17
//     摇摇冻            2019-01-01      20
//     老干妈            2019-01-02      10
//     摇摇冻            2019-01-02      8
// 有了这个data 是不是可以开始做事了？

var totalGoodsSalesPie = echarts.
    init(document.getElementById('totalGoodsSales'), 'shine');

// 获取到后台传过来的数据
var data = null;
$.ajax({
    url: '/*****e/pa*****er/totalGoodsSales',
    type: 'post',
    async: false,
    data: {isBulk: _isBluk, deviceNo: _totalGoodsDeviceNumber},
    dataType: 'json',
    success: function (res) {
        if (res != null && res.length != 0) {
            for (let i = 0; i < res.length; i++) {
                // 所有的商品名称
                _good_name.push(res[i].goods_name);
                // 所有的日期
                _days.push(res[i].days)
            }
            data = res;
        }
    }
})

// 用数组接受商品名称 和 日期
var _good_name = [], _days = [];
_good_name = removeRepeatArrElement(_good_name);
_days = removeRepeatArrElement(_days);
// 数组去重复
function removeRepeatArrElement(arr){
    var newArr = [];
    var len = arr.length;
    for(var i=0; i<len; i++){
        if(newArr.indexOf(arr[i]) == -1){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

/************* 下面要开始动态生成seriesName 和 data  ***************/
// 动态生成商品名称
var _seriesArr = [], _series = {};
for (let i = 0; i < _good_name.length; i++) {
    _series = {
        name: _good_name[i],
        type: 'line', // line 为折线图
        smooth: true,
        data:[]
    }
    // 生成每种商品每天的销售量
    var _sales = [];
    var goodsName = _good_name[i];
    for (let j = 0; j <  _days.length; j++) {
        var toDay = _days[j];
        var quantity = ruleOut(toDay, goodsName);
        _sales.push(quantity);
    }
    // 把当前商品对应的数据添加进去
    _series.data = _sales;
    _seriesArr[i] = _series;
}

// 通过时间和商品名称  返回哪天某种商品的销量   没有则返回0
function ruleOut(toDay, goodsName) {
    var lastData = 0;
    for (let i = 0; i < data.length; i++) {
        if (toDay == data[i].days && goodsName == data[i].goods_name) {
            lastData = data[i].quantity;
        }
    }
    return lastData;
}
// 其实这就应该拿到所有的商品和商品对应的数据了，下面只做一下数据处理了

option = {
    title: {
        // text: '日销售统计',
        subtext: '件/克',
    },
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        },
        // 进行数据处理
        formatter: function (params) {
            var html = '';
            if (params.length != 0) {
                // 对应x轴的时间数据  也就是2019-01-01
                // 可以自己打印一下console.info(params[0]);
                var getName = params[0].name;
                html += getName + '<br/>';
                for (let i = 0; i < params.length; i++) {
                    // 如果为0 为空的数据我们不要了
                    if (params[i].value != null && params[i].value != 0 
                        && params[i].value != '') {
                        // params[i].marker 需要加上，否则你鼠标悬浮时没有样式了
                        html += params[i].marker;
                        html += params[i].seriesName + ':' + params[i].value + '<br/>';
                    }
                }
            }
            return html;
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '2%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        // name: '日期',
        type: 'category',
        boundaryGap: false,
        data: _days
    },
    yAxis: {
        type: 'value'
    },
    // 动态生成的数据
    series: _seriesArr
};
// end 结束 配置

if (option && typeof option === "object") {
    totalGoodsSalesPie.setOption(option, true);
}

 3、有些人可能动态生成数据那里会看蒙、 那就先把动态生成商品名称先弄出来，先不管数据，名称出来后再看每种商品每天的销售量；