ECharts——柱状折线图 + 双Y轴 (1.多统计项依附不同的y轴 2.自定义提示文本)

option = {
            title: [
                {
                    text: '',
                    left: 'center'
                }
            ],
            //当trigger为’item’时只会显示该点的数据，
            //为’axis’时显示该列下所有坐标轴所对应的数据。
            //提示框组件
            tooltip: {
                //？触发类型
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                // 提示框内容: 可根据传入的data参数自定义内容、配合html自定义排版样式
                formatter:function(params){
                    var tip = "";
                    if(params!=null && params.length>0){
                        tip += "数据业务时间: ".concat(params[0].data.busiDate)+"<br/>"
                            +  "<div style='border:0px solid red;margin-top:5px'>";
                        for(var i=0;i<params.length;i++){
                            var seriesName = params[i].seriesName;
                            var txt = params[i].value;
                            tip += "<p>"
                                +   params[i].marker
                                +   "<span style='width:100px;line-height:25px;display:inline-block;'>" + seriesName + " :</span>" ;
                            if(seriesName=="值缺失"){
                                txt = params[i].value + "  (" + params[i].data.percent + ")"
                            }else if(seriesName=="调度跑批时长"){
                                txt = params[i].data.time;
                            }
                            tip +=   "<span style='line-height:25px;display:inline-block;text-align:left;margin-left:20px'>" + txt + "</span>"
                                +  "</p>";

                        }
                        tip += "</div>";
                    }
                    return tip;
                }
            },
            legend: {
                x:'left',
                y:'top',
                padding: [20,0,0,40],
                bottom: 120,  // 类似于margin-bottom
                // 图例样式
                // icon : circle圆形、rect矩形、roundRect圆角矩形、triangle三角形、pin水滴、arrow箭头...
                data: [
                    {
                        "name":"数据总量",
                        "icon":"circle",
                        "key":"dataCount"
                    },
                    {
                        "name":"值缺失",
                        "icon":"circle",
                        "key":"defaultVal"
                    },
                    {
                        "name":"调度跑批时长",
                        "icon":"circle",
                        "key":"taskDuration"
                    }
                ],
                textStyle: {  // 统计项的样式
                    color: "#595959",
                    fontSize: 14
                },
                itemGap: 30
            },
            grid: {
                left: '10%',
                right: '10%',
                top: '15%',
                bottom: '5%',
                height: '58%',
                containLabel: true
            },
            xAxis: {
                type: 'category', //category:类目轴(适用于离散无序数组)
                data: [
                    "2017",
                    "2018",
                    "2019"
                ],
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#595959", //X轴文字颜色
                        fontSize:14       // x轴文字大小
                    },
                    interval:1,         // 刻度间隔
                    rotate:0,          // 倾斜角度
                    align: 'center',      // x轴文字居中
                    margin: 10          // 文字与x轴的间隔
                },
                axisLine: {
                    show:true,
                    lineStyle: {
                        color: '#595959'  // x轴颜色
                    }
                },
                axisTick: {
                    inside: false,   // true刻度朝向内侧
                    alignWithLabel:{
                        boundaryGap : true // 值与刻度对齐
                    }
                }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    splitLine:{
                        lineStyle:{
                            type:'dashed'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#595959", //y轴文字颜色
                            fontSize:14       // y轴文字大小
                        },
                        formatter: '{value}'
                    },
                    axisLine: {
                        show:false,
                        lineStyle: {
                            color: '#595959'  // y轴颜色
                        }
                    },
                    axisTick:{
                        show:false        // 隐藏坐标轴上的刻度
                    }
                },
                {
                    type: 'value',
                    name: '',
                    min: 0,
                    max: 90,
                    interval: 30,
                    splitLine:{show: false},  // 不显示分割线
                    axisLabel: {
                        show: true,
                        formatter: '{value} 秒'
                    },
                    axisLine: {
                        show:false 
                    },
                    axisTick:{
                        show:false        // 隐藏坐标轴上的刻度
                    }
                }
            ],
            series: [
                        {
                            "barWidth":25,
                            "stack":"one", // stack相同的图形将堆叠展示
                            "data":[
                                {
                                    "busiDate":"2017",
                                    "value":"13283162"
                                },
                                {
                                    "busiDate":"2018",
                                    "value":"13283162"
                                },
                                {
                                    "busiDate":"2019",
                                    "value":"13283162"
                                }
                            ],
                            "name":"数据总量",
                            "itemStyle":{
                                "normal":{
                                    "color":"#3BA0FF"
                                }
                            },
                            "type":"bar"
                        },
                        {
                            "barWidth":25,
                            "stack":"one",   // stack相同的图形将堆叠展示
                            "data":[
                                {
                                    "busiDate":"2017",
                                    "value":"300000",
                                    "percent":"0.00%"
                                },
                                {
                                    "busiDate":"2018",
                                    "value":"0",
                                    "percent":"0.00%"
                                },
                                {
                                    "busiDate":"2019",
                                    "value":"0",
                                    "percent":"0.00%"
                                }
                            ],
                            "name":"值缺失",
                            "itemStyle":{
                                "normal":{
                                    "color":"#FAD337"
                                }
                            },
                            "type":"bar"
                        },
                        {  
                            "data":[
                                {
                                    "busiDate":"2017",
                                    "time":"00:00:05",
                                    "value":5
                                },
                                {
                                    "busiDate":"2018",
                                    "time":"00:00:11",
                                    "value":11
                                },
                                {
                                    "busiDate":"2019",
                                    "time":"00:00:03",
                                    "value":3
                                }
                            ],
                            "symbolSize":10,
                            "name":"调度跑批时长",
                            "itemStyle":{
                                "normal":{
                                    "color":"#36CBCB"
                                }
                            }, 
                            "type":"line", 
                            "yAxisIndex": 1      //绑定所依附的y轴下标
                        }
                    ]
        };

 

 

效果图: