Echarts官网找到一个简单的横向柱形图，如下：

我们想要修改成如下:

配置代码如下:

1. 修改柱状图图形区域大小

   
   

    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%"
    },

2.  不显示X轴

xAxis: {
      show: false
    },

3. 不显示y轴线和相关刻度

//不显示y轴线条
axisLine: {
    show: false
        },
// 不显示刻度
axisTick: {
   show: false
},

4.修改第一个柱子为圆角

// 柱子设为圆角
itemStyle: {
    normal: {
      barBorderRadius: 20,       
    }

5.修改柱子上面文字的颜色

   axisLabel: {
          color: "#fff"
   },

6.设置第一组柱子内百分比显示数据

label: {
    normal: {
         show: true,
         // 图形内显示
         position: "inside",
         // 文字的显示格式
         formatter: "{c}%"
     }
},

7. 设置第一组柱子不同颜色

// 声明颜色数组
var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
// 2. 给 itemStyle  里面的color 属性设置一个 返回值函数
  itemStyle: {
          normal: {
            barBorderRadius: 20,  
            // params 传进来的是柱子对象
            console.log(params);
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex];
          }
         
},

8.设置第二组柱子为框状，第一组柱子为条状

//第二个柱子
 name: "框",
 type: "bar",
 barCategoryGap: 50,
 barWidth: 15,
 itemStyle: {
            color: "none",
            borderColor: "#00c1de",
            borderWidth: 3,
            barBorderRadius: 15
        },
//第一个柱子
name: "条",
// 柱子之间的距离
barCategoryGap: 50,
//柱子的宽度
barWidth: 10,
// 柱子设为圆角
itemStyle: {
    normal: {
      barBorderRadius: 20,       
    }
},

9.设置两个柱子层叠

// 给series  第一个对象里面的 添加 
yAxisIndex: 0,
// 给series  第二个对象里面的 添加 
yAxisIndex: 1,