叠堆柱状图（带折线+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等等...

巴特西

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

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

代码

效果图：

总结：

最新文章

热门文章