双轴柱状图echarts 折线配置项内容和展示

      // 指定图表的配置项和数据
var data1 = [20, 30, 20, 30, 20, 30, 200];
var data2 = [9, 30, 9, 60, 70, 200, 59];
var data3 = [20, 30, 20, 30, 20, 30, 20];
var rate = [70,95,97,98,99,100,95]
var datacity = ['6.12', '6.13', '6.14', '6.15', '6.16', '6.17', '6.18'];
var option = {
    backgroundColor:'#061644',
    color: ['#265CAE', '#5CBDEA', '#AE56B4'],
    tooltip: {
        trigger: 'axis',
    },
    legend: {

        top: '8%',
        data: ['下发总条数', '下发成功条数', '一分钟短信条数','时延达标率'],
        textStyle:{
            color:'#C8D6EE',
            fontSize:14
        }
    },
    grid: { //图表的位置
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '5%',
        containLabel: true
    },
    yAxis: [{
        type: 'value',
        name:'单位:万',
        nameTextStyle:{
                        color:'#C8D6EE',
                        fontSize:14,
                        lineHeight: 20,
                    },
         position:'right',
        axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} ',
            color: '#C8D6EE',
            fontSize:14
        },
         axisLine: {
            lineStyle: {
                color: '#B4B4B4',
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                type: 'dashed'
            }
        },
        show: true
        

    },
    {
        type: 'value',
        position:'left',
        name:'单位:%',
        nameTextStyle:{
                        color:'#C8D6EE',
                        fontSize:14,
                        lineHeight: 20,
                    },
        axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} ',
             color: '#C8D6EE',
              fontSize:14
        },
         axisLine: {
            lineStyle: {
                color: '#B4B4B4',
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                type: 'dashed'
            }
        },
        show: true

    }],
    xAxis: [{
        type: 'category',
        axisLabel: {
            interval: 0,
            show: true,
            splitNumber: 15,
            textStyle: {
                fontSize: 10,
                color: '#C8D6EE'
            },

        },
         axisLine: {
            lineStyle: {
                color: '#B4B4B4',
            }
        },
        data: datacity,
    }],
    series: [
        {
        name: '时延达标率',
        type: 'line',
        smooth: true,
        showAllSymbol: true,
        symbol: 'emptyCircle',
        symbolSize: 8,
        yAxisIndex: 1,
        itemStyle: {
                normal: {
                color:'#3376B5'},
        },
        data: rate
    }, {
            name: '下发总条数',
            type: 'bar',
            stack: 'sum',
            barWidth: '20px',
            data: data1

        },
        {
            name: '下发成功条数',
            type: 'bar',
            barWidth: '20px',
            stack: 'sum',
            data: data2,

        },
        {name: '一分钟短信条数',
            type: 'bar',
            barWidth: '20px',
            stack: 'sum',
            data: data3,

        },
    ]
};