echarts 横向柱状堆叠图

 

var optionBar = {
  title: {
    /*text: '世界人口总量',*/
    subtext: '单位：%'
  },
  tooltip : {
    trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
      type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
  },
  barWidth: '60%',
  xAxis: {
    type: 'value',
        splitLine: {show: true},
    axisLabel: {
      textStyle: {color: '#C6CACD'}//字体颜色
    },
    axisLine: {
      //show: true,
      lineStyle: {
        type: 'solid',
            color: '#3B526C',//下边线的颜色
            width:'1'//坐标线的宽度
      }
    },
    splitLine: {
      show: true,//垂直线
          lineStyle:{
        color: '#3B526C'
      }
    }
  },
  yAxis: {
    type: 'category',
        axisTick: {show: true},//尺寸边线
    splitLine: {show: false},
    data: ['电网域','综合域','财务域','资产域','项目域','物资域','市场域','客户域','安全域','人员域'],
        axisLabel: {
      textStyle: {color: '#C6CACD'}//字体颜色
    },
    axisLine: {
      lineStyle: {
        type: 'solid',
        color: '#3B526C',//下边线的颜色
        width:'1'//坐标线的宽度
      }
    }
  },
  series: [
    {
      type: 'bar',
      color:'#0FEB86',
      name:'模型一致率',
      stack: true,//堆叠默认、叠加。没有是叠加
      z: 11,
      //barGap: '-100%',//叠加重叠使用
      data: [120, 92, 51, 134, 90, 30, 50, 51, 14, 90]
    },
    {
      type: 'bar',
      color:'#00C0FF',
      name:'模型准确率',
      stack: true,//堆叠默认、叠加。没有是叠加
      z: 10,
      data: [220, 102, 201, 134, 290, 130, 220, 120, 112, 256]
    },
    //设置不显示
    {
      type: 'line',
      color:'#06a9def7',
      name:'模型完整率',
      stack: true,//堆叠默认、叠加。没有是叠加
      z: 9,
      //设置不显示
//			                symbolSize: 0, // symbol的大小设置为0
//			                lineStyle: {
//			                    width: 0, // 线宽是0
//			                    color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
//			                },
      data: [320, 202, 301, 234, 390, 230, 320, 220, 212, 356],
      //显示数值
//					        label:{
//							 	show:true
//							}
    }
  ]
};

//   // 横向柱状堆叠图
var trendBar1 = echarts.init(document.getElementById("scatterChartDiv"));
trendBar1.setOption(optionBar);