叠堆柱状图（带折线版+2y轴）

叠堆柱状图（带折线+2y轴）

代码

var chartDom=document.getElementById("stackBarAddLine");
var myChart=echarts.init(chartDom);
var option;
option = {
  tooltip: {
    trigger: 'axis' //轴触发
  },
  title: {
    text: '这是主标题',
    left: 'center',
    top: 'top',
     textStyle: {
      fontSize: 18,
      fontStyle: 'oblique', //斜体
      color: 'red'
    },
    subtext: '这是副标题'
    //subtextStyle:{//副标题样式
    //}
  },
  legend: {
    //图例
    data: ['直销', '分销', '分销比率'],
    left: '10%'
  },
  xAxis: {
    type: 'category', //类目轴
    name: '酒店',
    nameLocation: 'center',
    nameTextStyle: {
      padding: [30, 0, 0, 200] //[下，左，上无效,右]
    },
    data: ['酒店1', '酒店2', '酒店3', '酒店4', '酒店5', '酒店6', '酒店7']
  },
  yAxis: [
    {
      type: 'value',
      name: '销售数量',
      nameLocation: 'center',
      nameTextStyle: {
        padding: [0, 0, 30, 200] //[右无效，下，左，上]
      }
    },
    {
      type: 'value',
      name: '分销比率',
      nameLocation: 'center',
      nameTextStyle: {
        padding: [30, 0, 0, 200] //[右，下，左无效，上]
      }
    }
  ],
  series: [
    {
      barWidth: 50,
      name: '直销',
      type: 'bar',
      stack: 'a',
      data: [80, 50, 40, 60, 40, 20, 40],
      itemStyle: {
        normal: {
          label: {
            position: ['50%', '10%'],
            color: 'white',
            show: true
          }
        }
      }
    },
    {
      name: '分销',
      type: 'bar',
      stack: 'a',
      data: [20, 50, 40, 90, 50, 40, 60],
      itemStyle: {
        normal: {
          label: {
            position: ['50%', '10%'],
            color: 'white',
            show: true
          }
        }
      }
    },
    {
      name: '分销比率',
      type: 'line',
      yAxisIndex: 1, //默认为0
      data: [0.2, 0.5, 0.5, 0.5, 0.63, 0.63, 0.63]
    }
  ]
};

option & myChart.setOption(option);

效果图：

总结：

1.nameTextStyle属性中的padding:[1,2,3,4] 的使用规律：

对于y轴：[右，下，左无效，上] ，其中y轴在左边，则左无效，y轴在右边，则向右无效

对于x轴：[下，左，上,右] 其中x轴在下方，则向上无效，x轴在上方，则向下无效

2.多轴问题总结：选择第一个y轴则在series中对应的{}中使用yAxisIndex（从0开始），如果是多指标雷达图，则是使用radarIndex等等...