横向柱状图echarts line' | 'shadow' } }, grid: { left: "5%", //距离dom间距 right: "4%", top: "10%", bottom: "5%" }, legend:{ data:['文件系统配置项内容和展示

多条横向柱状图

      /**
 * series.stack值改成一致，则变成堆叠效果
 * 
**/
option = {
     tooltip: {
         trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
    },
    grid: {
        left: "5%", //距离dom间距
        right: "4%",
        top: "10%",
        bottom: "5%"
    },
	legend:{
        data:['文件系统','数据库'],
        textStyle:{
            color:'black',
        },
        x:'center',
        y: '5%',
    },
    xAxis: [
        {
        type: 'value',
        boundaryGap: true,
        axisPointer: {
            type: "shadow"
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
        }
    ],
    yAxis: [
         {
            type: "category",
            inverse: true,
            axisLabel: {
              verticalAlign: "bottom",
              align: "left",
              padding: [0, 10, 10, 6],
              textStyle: {
                fontSize: 12,
                color: "black",
                fontFamily: "SourceHanSansCN-Regular"
              }
            },
            // 纵坐标数据
            data: [
              "数据中心",
              "网运部",
              "IT中心",
              "创新部",
            ],
            yAxisIndex: 0,
            // 横坐标 分割线等取消显示
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              inside: false,
              verticalAlign: "bottom",
              // 位置 上右下左
              padding: [0, 10, 10, -40],
            //   lineHeight: "40",
              textStyle: {
                fontSize: 12,
                color: "black",
                fontFamily: "SourceHanSansCN-Regular"
              }
            },
            // 统计的总量 用纵坐标模拟
            data: [34, 58, 53, 63]
          }
    ],
    series: [
        {
        name: '文件系统',
        type: 'bar',
        // 宽度
        barWidth: "10",
        // 堆叠
        stack: "总量1",
        showBackground: true,
        // 全部背景
        backgroundStyle: {
            color: 'rgba(255,255,255,0)'
        },
        data: [21, 14,19,32],
        itemStyle: {
            normal: {
            show: true,
            textStyle: {
                fontSize: 12
            },
            color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                {
                    offset: 0,
                    color: "#28C785"
                },
                {
                    offset: 1,
                    color: "#28C785"
                }
                ],
                false
            )
            }
        }
        }, {
            name: '数据库',
            type: 'bar',
            // 宽度
            barWidth: "10",
            // 堆叠
            stack: "总量2",
            showBackground: true,
            // 全部背景
            backgroundStyle: {
                color: 'rgba(255,255,255,0)'
            },
            data: [41, 34,13,44],
            itemStyle: {
                normal: {
                show: true,
                textStyle: {
                    fontSize: 12
                },
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    1,
                    0,
                    [
                    {
                        offset: 0,
                        color: "#12AAE8"
                    },
                    {
                        offset: 1,
                        color: "#12AAE8"
                    }
                    ],
                    false
                )
                }
            }
        }
    ]
};