Echarts横向柱形图

项目原型图如下:

实际上就是设置两个y轴，第一个显示底色柱子，另一个只显示真实数据的柱子,在这里只显示y轴,x轴不显示..

this.middleLeftOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {}
        },
        legend: {
          icon: 'circle', //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth:10  // 图例的宽
          itemHeight:10  // 图例的高
          data: ['回退次数'],
          bottom: '5%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '2%',
          containLabel: true //可容纳
        },
        xAxis: {
          show: false
        },
        yAxis: [
          {
            type: 'category',
            data: ydata,   //请求回来的数组y轴数据
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            // 设置第一个y轴上的文字颜色
            axisLabel: {
              color: 'black'
            }
          },
          {
            type: 'category',
            data: [2,16,10,2,11,9,6]
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            // 设置第二个y轴上文字的颜色与字号
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: 'black'
              }
            }
          }
        ],
        series: [
          {
            type: 'bar',
            yAxisIndex: 1,
            data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
            barWidth: 15, //柱子的宽度
            barCategoryGap: 50,
            tooltip: {
              show: false   //tooltip不显示下面柱子的数据
            },
            itemStyle: {
              // 设置下面y轴柱子颜色
              color: '#f2f2f2',
              // 设置下面y轴柱子边框
              // borderColor: '#00c1de',
              border: 'none',
              // 设置下面y轴柱子的宽度
              borderWidth: 3,
              // 设置下面y轴柱子边框为圆角
              barBorderRadius: 15
            }
          },
          {
            name: '回退次数',
            type: 'bar',
            color: '#facd91',
            data: xdata,
            barWidth: 15,
            itemStyle: {
              // 设置上面y轴柱子颜色
              color: '#facd91',
              // 设置上面y轴柱子边框
              border: 'none',
              // borderColor: '#00c1de',
              // 设置上面y轴柱子的宽度
              borderWidth: 3,
              // 设置上面y轴柱子边框为圆角
              barBorderRadius: 15
            }
          }
        ]
      }

 我的最终效果如下:

其中涉及到 图例修改形状:

1.如果是单个图例,直接配置icon字段控制形状,类型包括 circle，rect,line，roundRect，

 triangle，diamond，pin，arrow，none,i可以修改大小temWidth,itemHeight...

        legend: {
                  icon: 'circle', //  字段控制形状
                  itemWidth:10  // 图例的宽
                  itemHeight:10  // 图例的高
                }

2.如果是多个图例,且不同形状,直接配置legend的data,里面的对象配置name和icon即可.

         legend: {

                  data: [

                    {

                      name: '项目数量',

                      icon: 'rect',

                      itemWidth: 10, // 设置宽度

                      itemHeight: 10 // 设置高度

                    },

                    {

                      name: '平均耗时'  

                       //这里图例形状是默认的就可以不配置

                    }

                  ]

                }

如图:

另外涉及到提示框提示哪个数据,默认是都提示的,在不需要的提示的数据配置tooltip为false即可..在这里我是不需要提示下面一层的数据的

         series: [
                  {
                    type: 'bar',
                    yAxisIndex: 1,
                   data: [20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
                    barWidth: 15, //柱子的宽度
                    barCategoryGap: 50,
                    tooltip: {
                      show: false   //tooltip不显示下面柱子的数据
                    },
                    itemStyle: {
                      // 设置下面y轴柱子颜色
                      color: '#f2f2f2',
                      // 设置下面y轴柱子边框
                      // borderColor: '#00c1de',
                      border: 'none',
                      // 设置下面y轴柱子的宽度
                      borderWidth: 3,
                      // 设置下面y轴柱子边框为圆角
                      barBorderRadius: 15
                    }
                  }]