Echarts在线免费图表

 
            const className = ['总流量(GB)', '话务量(Erl)', '短信量(次)'];
const cycleName = ['3G', '4G', '5G'];
const data1 = [
    [150, 100, 170],
    [50, 160, 90],
    [90, 100, 110],
    [130, 60, 170],
    [70, 260, 170],
    [120, 260, 170],
];
const colorList = ['#33b4ff', '#fda124', '#5179ff'];
const colorList2 = ['#56d1ff', '#ffd55e', '#7d9bff'];
const sumList = [];
className.forEach((item, index) => {
    let sum = 0;
    data1.forEach((value) => {
        sum += value[index];
    });
    sumList.push(sum);
});
const series = [];
cycleName.forEach((item, index) => {
    series.push({
        name: item,
        type: 'bar',
        stack: '总量',
        zlevel: 1,
        itemStyle: {
            normal: {
                barBorderRadius: 10,
                color: (params) => {
                    const i = JSON.parse(JSON.stringify(index));
                    // return colorList[i]
                    return new echarts.graphic.LinearGradient(
                        0,
                        0,
                        1,
                        0,
                        [
                            { offset: 0, color: colorList[i] },
                            { offset: 1, color: colorList2[i] },
                        ],
                        false
                    );
                },
            },
        },
        label: {
            normal: {
                show: true,
                //label 的position位置可以是top bottom left,right,也可以是固定值
                //在这里需要上下统一对齐,所以用固定值
                position: ['45%', '-300%'],
                formatter: '{c}',
                color: '#fff',
               fontSize: 16,
            },


        },
        barWidth: 10,
        data: data1[index],
    });
});

option = {
    color: colorList,
    backgroundColor: '#000',
    legend: {
        show: true,
        icon: 'circle',
        itemHeight: 12,
        itemWidth: 12,
        textStyle: {
            fontSize: 12,
            color: '#fff',
        },
        top: 10,
        right: 10,
        itemGap: 10, // 垂直间距
        y: 'top', // 延Y轴居中
        data: cycleName,
    },
    grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top: '5%',
        containLabel: true,
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'none',
        },
        formatter: function (params) {
            let str =
                '<div style="text-align: left;color:#8994a5;">' +
                params[0].name +
                '</div><div style="text-align: left;line-height: 25px;">';
            params.forEach((item, index) => {
                str += item.marker + item.seriesName + ':' + item.value + '<br/>';
            });
            str += '</div>';
            return str;
        },
    },

    xAxis: {
        show: true,
        type: 'value',
        splitLine: {
            show: true,
            lineStyle: {
                opacity: 0.4,
                color:'#33b4ff',
            },
        },
        axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                },
            },
    },
    yAxis: [
        {
            type: 'category',
            inverse: true,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff',
                },
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            data: className,
        },

    ],
    series: series,
};