Ecahrts双Y轴 + X轴内容隔天显示+移入弹框全部显示

Ecahrts双Y轴 + X轴内容隔天显示+移入弹框全部显示

1.例如：

2.数据的操作：

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

var lineLossDay = {
            lineloss: [
                0.1, 0, 0.28, 0.33, 0, 0.39, 0.33,
                0.39, 0.42, 0.5, 0.31, 0.73, 0.67, 0.64,
                0.01, 0.13, 0.83, 0.37, 0.03, 0.57, 0.55,
                0.28, 0.08, 0.27, 0.59, 0.4, 0.67, 0,
                0.68, 0.1
            ],
            powerSupply: [
                0.44,0.56, 0.45, 0, 0.45, 0.36, 0.46,
                1, 0.45, 0.46, 0.46, 0.36, 0.46, 1,
                0.47,
                1, 0.45, 0.28, 0.46,0, 0.46,
                1, 0.47,0.32, 0.46, 0.45, 0.47, 1,
                 0.47, 0.36
            ],
            powerSale: [
                0.32, 0.32, 0.33, 0.32, 0.33, 0.21, 0.34,
                0.36, 0.33, 0.36, 0, 0.21, 0.34, 0.21,
                0.35,
                0.21, 0.33, 0.21, 0.34, 0.21, 0.34,
                0.21, 0.35,0.21, 0.34, 0, 0.35, 0,
                0.35, 0.21
            ],
            statDate: [
                "20201101", "20201102", "20201103",
                "20201104", "20201105", "20201106",
                "20201107", "20201108", "20201109",
                "20201110", "20201111", "20201112",
                "20201113", "20201114", "20201115",
                "20201116", "20201117", "20201118",
                "20201119", "20201120", "20201121",
                "20201122", "20201123", "20201124",
                "20201125", "20201126", "20201127",
                "20201128", "20201129", "20201130"
            ],
           lineRateCeil: 0.9
        }
function insertStr(soure, start, newStr) {
    return soure.slice(0, start) + newStr + soure.slice(start);
}
var fen = [];
var map = {};
    for (var i = 0; i < lineLossDay.statDate.length; i++) {
            var key = insertStr(lineLossDay.statDate[i].substring(4),2,"-");
            fen.push(key);
            map[key] = {
                powerSupply: lineLossDay.powerSupply[i],
                powerSale: lineLossDay.powerSale[i]
            };
            if (!((i + 1) % 2 == 0)) {
                lineLossDay.powerSupply[i] = 0
                lineLossDay.powerSale[i] = 0
            }
        }入代码片
3.option：

option = {
  tooltip: {
                trigger: 'axis',
                formatter: function (res) {
                    console.log(res);
                    return '日期:' + res[0].name + "</br>"
                        + res[0].seriesName + ':' + res[0].value + '%' + "</br>"
                        + res[1].seriesName + ':' + map[res[0].name].powerSupply + 'kw.h' + "</br>"
                        + res[2].seriesName + ':' + map[res[0].name].powerSale + 'kw.h'
                },
                extraCssText:'white-space:pre-wrap',
                axisPointer: {
                    type: 'cross',
                    label: {
                        show: true
                    }
                },
            },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },

 xAxis: [
            {
                name: '(日期)',
                nameTextStyle: {
                    padding: [0, 0, -30, -20],
                },
                axisLabel: {
                    interval: 1,
                    rotate: 90,
                },
                axisPointer: {
                    type: 'none'
                },
                type: 'category',
                boundaryGap: true,
                axisTick: {
                    show: true
                },
                data: fen
            },
        ],

        yAxis: [
            {
                name: "线%",
                type: 'value',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false,
                }
            },
            {
                type: 'value',
                name: '供(kw.h)',
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false,
                },
            }
        ],
        series: [
            {
                name: "线",
                showSymbol: false,
                data: lineLossDay.lineloss,
                type: 'line',
                lineStyle: {
                    color: "#4cc3ff",
                    width: 3,
                },
                markLine: {
                    symbol: "none",
                    data: [{
                        silent: false,
                        lineStyle: {
                            type: "dashed",
                            color: "red",
                        },
                        yAxis: lineLossDay.lineRateCeil
                    }],
                    label: {
                        position: "start"
                    }

                },
                boundaryGap: true,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#b7e7ff'
                        }, {
                            offset: 1,
                            color: '#f5fcff'
                        }],
                        global: false // 缺省为 false
                    }

                }
            },
            {
                name: '供',
                type: 'bar',
                yAxisIndex: 1,
                data: lineLossDay.powerSupply,
                boundaryGap: true,
                itemStyle: {
                    normal: {
                        color: '#49a1e4d6'
                    }
                },

            },
            {
                name: '售',
                type: 'bar',
                stack: '广告',
                yAxisIndex: 1,
                boundaryGap: true,
                itemStyle: {
                    normal: {
                        color: '#44f561'
                    }
                },
                barGap: '-100%',
                data: lineLossDay.powerSale,
            },
        ]

};

option && myChart.setOption(option);

4.希望对大家有所帮助！