echart 折线渐变 加柱形图结合图形，左右纵轴自设置格式，现行图北京渐变 ，x轴字体倾斜

app.title = '折柱混合';

option = {
 grid: {
    left: '5%',   //距离左边的距离
    right: '5%', //距离右边的距离
    top:'8%',
    bottom:'5%',
    containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor:'rgba(0,0,0,0.75)',
      axisPointer: {
        crossStyle: {
          color: '#999'
        },
        label: {
          backgroundColor: 'rgba(0,0,0,0.75)'
        }
      },
      formatter: function(data){
        for(var i=0; i<data.length;i++){
          if(data[i].seriesName==="男"){
            var mm = Math.floor(data[0].value % 3600 / 60);
            var ss = Math.floor(data[0].value % 60);
          }else if(data[i].seriesName==="女"){
            var mm1 = Math.floor(data[1].value % 3600 / 60);
            var ss1 = Math.floor(data[1].value % 60);
          }
        }
        if(data[0].value >3600) {
          mm = mm +60
        }
        if(data[1].value >3600) {
          mm1 = mm1 +60
        }
        var timeOne=mm + "'" + ss + "''";
        var timeTwo=mm1 + "'" + ss1 + "''";
        if(name == '按年龄'){
          return '<p style="font-size:0.2rem; line-height:20px; padding:0.1rem;">'+data[0].name+"<br/><span style='display:inline-block; width:0.1rem; height:0.1rem; border-radius:8px; background:#6BADCC;'></span>&nbsp&nbsp停留时长(次) : "+ timeOne + "<br/><span style='display:inline-block; width:0.1rem; height:0.1rem; border-radius:8px; background:#DB7272;'></span>&nbsp&nbsp人数 : "+ data[1].data.value +"人&nbsp&nbsp占比: "+data[1].data.per+ "%</p>"
        }else if(name == '按年龄性别'){
          return '<p style="font-size:0.2rem; line-height:20px; padding:0.1rem;">'+data[0].name+"<br/><span style='display:inline-block; width:0.1rem; height:0.1rem; border-radius:8px; background:#7299CF;'></span>&nbsp&nbsp男子停留时长(次) : "+ timeOne + "<br/><span style='display:inline-block; width:0.1rem; height:0.1rem; border-radius:8px; background:#DB7272;'></span>&nbsp&nbsp女子停留时长(次) : "+ timeTwo + "<br/><span style='display:inline-block; width:0.1rem; height:0.1rem; border-radius:8px; background:#1FC3E4;'></span>&nbsp&nbsp男子人数 : "+ data[2].value +"人<br/><span style='display:inline-block; width:0.1rem; height:0.1rem; border-radius:8px; background:#FFCB00;'></span>&nbsp&nbsp女子人数 : "+ data[3].value +"人</p>"
        }

      }
    },
    xAxis: [{
      type: 'category',
      data: ["小于18岁", "18-23岁", "24-32岁", "33-40岁", "41-50岁", "51-60岁", "大于61岁", "未知年龄"],
      axisPointer: {
        type: ''
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#f5f5f5',//左边线的颜色
          width:'1'//坐标线的宽度
        }
      },
      axisLabel: {
        interval:0,
        rotate:45,
        textStyle: {
          color:'#999',
          fontSize:'10'
        }
      },
    }],
    yAxis: [
      {
        type: 'value',
        name: '',
        splitNumber :8,
        axisPointer: {
          type: ''
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#f5f5f5',//左边线的颜色
            width:'1'//坐标线的宽度
          }
        },
        position:'left',
        splitLine: {
          show:false,
          lineStyle: {
            color: ['#f5f5f5']
          }
        },
        axisLabel: {
          textStyle: {
            color:'#999',
            fontSize:'10'
          },
          formatter: function (value) {
            // var hh = Math.floor(value % 3600 / 60 / 60)
            var mm = Math.floor(value % 3600 / 60);
            var ss = Math.floor(value % 60);
            if(value>3500){
              return mm + 60 + "'" + ss + "''";
            }else{
              return mm + "'" + ss + "''";
            }
          }
        }
      },
      {
        type: 'value',
        name: '',
        splitNumber :8,
        axisPointer: {
          type: ''
        },
        axisLine: {
          show:'false',
          lineStyle: {
            type: 'solid',
            color: '#f5f5f5',//左边线的颜色
            width:'1'//坐标线的宽度
          }
        },
        splitLine: {
          show:'false',
          lineStyle: {
            color: ['#f5f5f5']
          }
        },
        axisLabel: {
          textStyle: {
            color:'#999',
            fontSize:'10'
          },
        }
      }
    ],
    series: [
      {
        name:'男',
        type:'bar',
        data: [117.3005, 107.2594, 84.4112, 83.3266, 95.9611, 54.8313, 29.0411, 0],
        barWidth : 12,
        itemStyle: {
          normal: {
              color:'#7299CF'
          }
        }
      },
      {
        name:'女',
        type:'bar',
        data:[324.082, 382.1394, 340.01627, 1289.3278, 3501.2786, 216.18571, 0, 0],
        barWidth : 12,
        itemStyle: {
          normal: {
              color:'#DB7272'
          }
        }
      },
      {
        name:'男',
        type:'line',
        yAxisIndex: 2,
        symbol:'circle',
        yAxisIndex: 1,
        data:[50, 62, 71, 59, 52, 57, 38, 30],
        itemStyle: {
          normal: {
            color: "#fff",
            borderColor: '#1FC3E4',
            borderWidth: 1,
            lineStyle: {
              color:'#1FC3E4',
              width:1
            }
          },
          emphasis:{
            color:'#1FC3E4',
          }
        },
        areaStyle:{
          normal:{
            opacity:'0.3',
            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255,0,0,0.6)'
              },{
                offset: 1,
                color: 'rgba(255,0,0,0.1)'
              }])
          }
        }
      },
      {
        name:'女',
        type:'line',
        yAxisIndex: 1,
        symbol:'circle',
        yAxisIndex: 1,
        data:[40, 52, 61, 49, 32, 37, 18,38],
        itemStyle: {
          normal: {
            color: "#fff",
            borderColor: "#DB7272",
            borderWidth: 1,
            lineStyle: {
              color:"#DB7272",
              width:1
            }
          },
          emphasis:{
            color:"#DB7272",
          }
        },
        areaStyle:{
          normal:{
            opacity:'0.3',
            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255,203,0,0.8)'
              },{
                offset: 1,
                color: 'rgba(255,203,0,0)'
              }])
          }
        }
      }
    ]
}