Echarts实现纵向堆积图（四色）

项目中需要做一个四色的堆积柱状图，分别显示风、水、火、光伏四种类型发电的数据。

该函数里需传入数据，然后查看数据结构为数组对象，可以下面方法进行堆积图的实现。

function multiColumn(arrDatas){
    // console.log(arrDatas,'arrDatasarrDatas');
    value.forEach(item => {
        numberFormat(item)
    })
    function numberFormat(value){ 
        for (let key in value) {
        let n = value[key]
        if (typeof(n) !== 'number') {
            value[key] = n
        } else {
            value[key] = Number((n / 10000).toFixed(2));
        }

    }
}
let series =
    value.length === 0 ? [{
        name: '',
        // barMinHeight: 100,
        type: 'bar',
        stack: 'Ad',

        barWidth: 20,
        data: [0, 0, 0, 0, 0],
    }, ] : []
let colors = {
    火电: {
        type: 'linear',
        x: 1,
        y: 1,
        x2:0,
        y2:0,
        colorStops: [{
                offset: 1,
                color: 'rgba(249, 107, 21, 1)',
            },
            {
                offset: 0,
                color: 'rgba(249, 107, 21, 0.2)',
            },
        ],
        global: false,
    },
    风电: {
        type: 'linear',
        x: 1,
        y: 1,
        x2:0,
        y2:0,
        colorStops: [{
                offset: 1,
                color: 'rgba(59, 209, 158, 1)',
            },
            {
                offset: 0,
                color: 'rgba(59, 209, 158, 0.2)',
            },
        ],
        global: false,
    },
    水电: {
        type: 'linear',
        x: 1,
        y: 1,
        x2:0,
        y2:0,
        colorStops: [{
                offset: 1,
                color: 'rgba(0, 198, 255, 1)',
            },
            {
                offset: 0,
                color: 'rgba(0, 198, 255, 0.2)',
            },
        ],
        global: false,
    },
    光伏: {
        type: 'linear',
        x: 1,
        y: 1,
        x2:0,
        y2:0,
        colorStops: [{
                offset: 1,
                color: 'rgba(255, 169, 46, 1)',
            },
            {
                offset: 0,
                color: 'rgba(255, 169, 46, 0.2)',
            },
        ],
        global: false,
    },
}
value.forEach(item => {
    series.push({
        name: item.sx,
        // barMinHeight: 100,
        type: 'bar',
        stack: 'Ad',
        barWidth: 20,
        data: value.length === 0 ? [0, 0, 0, 0, 0] : [
            typeof item.m_value === 'number' ? item.m_value : 0,
            typeof item.mtb === 'number' ? item.mtb : 0,
            typeof item.mhb === 'number' ? item.mhb : 0,
            typeof item.y_value === 'number' ? item.y_value : 0,
            typeof item.ytb === 'number' ? item.ytb : 0,
        ],
        color: colors[item.sx],
    })
})
    let option = {
        title: {
            text: '发电量',
            textStyle: {
                color: '#333333',
                fontSize: '16',
                fontWeight: 'bolder',
            },
            triggerEvent: true,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        legend: {
            itemGap: 28,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                fontSize: 12,
                color: '#919191',
            },
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#CACACA',
                },
            },
            axisTick: {
                show: false,
            },
            // X轴文字
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#666666',
                },
            },
            axisPointer: {
                lineStyle: {
                    color: '#4E6BFF',
                },
            },
            data: ['月', '上年', '前一月', '年累', '年累同期'],
        },
        yAxis: {
            type: 'value',
            name: 'sfsd',
            nameTextStyle: {
                color: '#666666',
                align: 'center',
                verticalAlign: 'bottom',
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                textStyle: {
                    color: '#666666',
                },
                fontWeight: 'bold',
                formatter: function(value) {
                    if (value >= 10000) {
                        value = value / 10000 + 'w'
                    }
                    return value
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    color: '#ddd',
                },
            },
        },
        series: series,
    }
    return option  
}

export {doughnutChart,singleColumn,multiColumn,zhjsdjColumn,singlejlrColumn};