单容器图表tooltip 联动ECharts Gallery

20:11:45图表已生成
代码
let xs = ['2013', '2014', '2015', '2016', '2017', '2018', '2019'];
option = {
    axisPointer: {
        link: {
            xAxisIndex: 'all'
        },
        label: {
            backgroundColor: '#777'
        }
    },
    title: [{
        text: '接单量（万平方米）',
        left: 60,
        top: '0%',
        textStyle: {
            color: '#000',
            fontSize: 14,
            fontWeight: 'normal'
        }
    }, {
        subtext: '总GMV（万元）',
        subtextStyle: {
            color: '#000',
            fontSize: 14,
            fontWeight: 'normal',
        },
        left: 60,
        top: '45%',
    }],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            lineStyle: {
                type: 'dashed'
            }
        },
        backgroundColor: 'rgba(245, 245, 245, 0.8)',
        borderWidth: 1,
        borderColor: '#ccc',
        padding: 10,
        textStyle: {
            color: '#000'
        },
        formatter: function (params) {
            console.log(params);
            let text = `<div style="width: 240px">
                            <div style="margin-bottom: 10px; font-size: 14px; display: flex; justify-content: space-between"><p>${params[0].name} 周五</p> <p>日环比</p></div>
                            <div style="margin-bottom: 5px; font-size: 14px;display: flex; justify-content: space-between"><p>${params[0]['marker']} 接单量</p>  <p>${params[0]['value']}</p></div>
                            <div style="margin-bottom: 5px; font-size: 14px;display: flex; justify-content: space-between"><p>${params[1]['marker']} 总GMV</p>  <p>${params[1]['value']}</p></div>
                            <div style="margin-bottom: 5px; font-size: 14px;display: flex; justify-content: space-between"><p>${params[2]['marker']} 纸板团购</p>  <p>${params[2]['value']}</p></div>
                            <div style="font-size: 14px; display: flex; justify-content: space-between"><p>${params[3]['marker']} 积分商城</p> <p>${params[3]['value']}</p></div>
                        </div>`;
            return text;
          },
        // position: function(pos, params, el, elRect, size) {
        //     var obj = {
        //         top: 10
        //     };
        //     obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
        //     return obj;
        // }
    },
    color: ['#7AF6FC', '#FEC721', '#0AE7CC', 'transparent'],
    grid: [{
            x: '5%',
            y: '5%',
            height: '35%',
            left: '10%',
            show: false
        },
        {
            x: '5%',
            y1: '5%',
            top: '5%',
            height: '87.5%',
            left: '10%',
            show: false
        },
        {
            x: '5%',
            y2: '5%',
            top: '52.5%',
            height: '40%',
            left: '10%',
            show: false
            //bottom: '5%'
        },
    ],
    xAxis: [{
            gridIndex: 0, //对应前面grid的索引位置（第一个）
            show: false, //隐藏了x轴
            type: 'category',
            
            axisTick: {
                show: false
            },
            data: xs,
        },
        {
            show: false,
            gridIndex: 1, //对应前面grid的索引位置（第二个）
            type: 'category',
            axisTick: {
                show: false
            },
            data: xs,
        },
        {
            type: 'category',
            gridIndex: 2, //对应前面grid的索引位置（第二个）
            axisTick: {
                show: false
            },
            data: xs,
        }
    ],
    //y轴，不管有几个x轴，几个y轴，或者图，只要找到他对应的grid图的序号索引就可以精准匹配

    yAxis: [
         {
            type: 'value',
            gridIndex: 0,
            nameTextStyle: {
                padding: 40
            },
            offset: 10,
            position: 'left',
            nameLocation: 'middle',
            splitLine: {
                show: true
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    fontSize: 12 //y轴坐标轴上的字体大小
                }
            },
        },
        {
            show: false,
            type: 'value',
            gridIndex: 1, //对应前面grid的索引位置（第二个）
            splitLine: {
                show: true
            },
            offset: 10,
            nameTextStyle: {
                padding: 25,
                align: 'center'
            },
            position: 'left',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            gridIndex: 2,
            nameTextStyle: {
                padding: 40
            },
            offset: 10,
            position: 'left',
            nameLocation: 'middle',
            splitLine: {
                show: true
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    fontSize: 12 //y轴坐标轴上的字体大小
                }
            },
        },

    ],
    series: [{
            name: '接单量',
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [28, 27, 40, 72, 100, 123, 247]
        },
        {
            type: 'bar',
            stack: '总量',
            barWidth: 30,
            xAxisIndex: 2,
            yAxisIndex: 2,
            data: [28, 27, 40, 72, 100, 123, 247]
        },
        {
            type: 'bar',
            stack: '总量',
            barWidth: 30,
            xAxisIndex: 2,
            yAxisIndex: 2,
            data: [20, 27, 60, 52, 60, 103, 147]
        },
        {
            type: 'bar',
            barWidth: 30,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [10, 10, 10, 10, 10, 10, 10]
        }
    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
