echarts堆叠柱状图参数配置案例

源码

option = {
    color: ['#5D85FF','#59D88F','#FFB459'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
          data: ["商家1", "商家2","商家"],
          orient: "horizontal",
          width: "200",
          x: "right", //图例位置
        //   y: "center",
          padding: [30, 15, 0, 0],
          textStyle: {
            //图例文字的样式
            color: "#333",
            fontSize: 12,
          },
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            splitLine: { show: true }, //去除网格线
            data: ['12.1', '12.2', '12.3', '12.4', '12.5', '12.6', '12.7'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: "value",
            name: "费用",
            show: true,
            splitLine: { show: true }, //去除网格线
        }
    ],
    series: [
        {
            name: '商家1',
            type: 'bar',
            // barWidth: '30%',
            data: [10, 52, 200, 334, 390, 330, 220]
        },
        {
            name: '商家2',
            type: 'bar',
            // barWidth: '30%',
            data: [10, 52, 200, 334, 390, 330, 220]
        },
        {
            name: '商家',
            type: 'bar',
            // barWidth: '30%',
            data: [10, 52, 200, 334, 390, 330, 220]
        }
    ]
};