echarts的常用记录-叠加

echarts的叠加图表代码如下（示例）：

var Chart = echarts.init(document.getElementById('chargeEchart'));

    var option = {
        color: [ '#5D7092','#5AD8A6', '#5B8FF9'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['实收', '现金', '代收'],
            bottom: 'bottom',
            left: 'center',
            icon: 'rect',
            itemWidth: 12,
            itemHeight: 8,
            textStyle: {
                color: 'rgba(140,140,140,1)'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['0:00', '6:00', '12:00', '18:00', '23:00'],
                axisLabel: {
                    textStyle: {
                        color: '#999999',  //更改坐标轴文字颜色
                        fontSize: 12      //更改坐标轴文字大小
                    }
                },
                //设置轴线的属性
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0,0,0,0.15);',
                        width: 1,//这里是为了突出显示加上的
                    }
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '单位：万元',
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',  // y轴显示虚线
                    }
                },
                axisLine: { show: false },
                axisTick: { show: false },
                axisLabel: {
                    textStyle: {
                        color: '#999999',  //更改坐标轴文字颜色
                        fontSize: 12      //更改坐标轴文字大小
                    }
                },
            }
        ],
        series: [
            {
                name: '代收',
                type: 'line',
                stack: '总量',
                smooth: true,  // 让曲线光滑
                lineStyle: {   // 设置实线的样式
                    width: 2,
                    color:'#5D7092'
                },
                showSymbol: false,
                areaStyle: {   // 叠加区域的样式
                    opacity: 0.25
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 132, 201, 334, 190, 130, 220]
            },
            {
                name: '现金',
                type: 'line',
                stack: '总量',
                smooth: true,
                lineStyle: {
                    width: 2,
                    color:'#5AD8A6'
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.25
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 282, 111, 234, 220, 340, 310]
            },
            {
                name: '实收',
                type: 'line',
                stack: '总量',
                smooth: true,
                lineStyle: {
                    width: 2,
                    color:'#5B8FF9'
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.25
                },
                emphasis: {
                    focus: 'series'
                },
                data: [140, 232, 101, 264, 90, 340, 250]
            },
        ]
    };
    Chart.clear(); //清除之前的图画
    Chart.setOption(option);  //绑定数据
    $(window).resize(function(){  // 自适应大小
        Chart.resize();
    });

---