echarts的tooltip提示内容过多分列显示及自定义图例

效果图

效果图描述

tooltip内容太多，超出图表的显示区域，导致显示不全

代码

<template>
    <div class="chart_box">
        <ChartBar :option="options"></ChartBar>
    </div>
</template>

<script>
import lodash from "lodash";
import { ChartBar } from "_c/charts";
export default {
    components: {
        ChartBar
    },
    props: ["chartsList"],
    watch: {
        chartsList: function () {
            this.getData();
        }
    },
    data () {
        return {
            legendData: [], // 自定义图例数据
            options: {
                legend: {
                    show: true,
                    icon: "circle",
                    itemGap: 15,
                    padding: [0, 40, 0, 40],
                    data: [],
                    bottom: 'bottom',
                    formatter: (name) => {
                        let data = this.legendData;
                        let target;
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].name === name) {
                                target = data[i].value;
                            }
                        }
                        let arr = [
                            '{a|' + name + '}',
                            '{b|' + target + '}',
                            '{c|' + '万}'
                        ]
                        return arr.join('')
                    },
                    textStyle: {
                        rich: {
                            a: {
                                fontSize: 12,
                                color: '#999',
                            },
                            b: {
                                fontSize: 14,
                                padding: [0, 0, 0, 5],
                            },
                            c: {
                                fontSize: 12
                            }
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) { // 提示内容太多隔行显示内容
                        let astr = ''
                        params.forEach((ele, index) => {
                            astr += `
                                <div style="display: block;height:20px;${index % 2 === 0 ? 'width: 62%;' : 'width: 38%;'}float:left;">
                                    <i style="width: 10px;height: 10px;display: inline-block;background: ${ele.color};border-radius: 10px;"></i>
                                    <span>${ele.seriesName}: ${ele.data}</span>
                                </div>
                            `
                        })
                        const b = '<div style="width: 500px;">' + astr + '<div>'
                        return b
                    },
                    position: function (point, params, dom, rect, size) {
                        return [point[1], 0]
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '25%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        interval: 0,
                        rotate: 45,
                        color: '#000',
                        borderWidth: 10, // 加边框，解决最后一个文字加粗加黑问题
                        borderColor: '#fff', // 背景色
                    }
                },
                yAxis: {
                    minInterval: 1,
                    name: '万元',
                    axisLabel: {
                        color: '#333'
                    },
                    nameTextStyle: {
                        color: '#333'
                    }
                },
                color: ['#1fa776', '#f6b239', '#1fb8f1', '#56097a', '#fb7293', '#32c5e9', '#fb7293', '#e062ae', '#e690d1', '#e7bcf3', '#9d96f5', '#8378ea', '#96bfff', '#859e41', '#9e7341', '#78419e', '#9e416d', '#414c9e'],
                series: []
            }
        }
    },
    methods: {
        getData () {
            let data = this.chartsList;
            console.log(data, '...ii')
            if (!lodash.isEmpty(data)) {
                this.options.legend.data = data.legendData;
                this.legendData = data.legendData;
                // data.legend.length > 8 ? this.options.grid.top = '35%' : this.options.grid.top = '30%';
                this.options.xAxis.data = data.xAxis;
                let arr = [...data.data, data.zj];
                arr.map((item, index) => {
                    if (index < arr.length - 1) {
                        item.type = "bar";
                        item.stack = '总量';
                        item.barWidth = 15;
                    } else {
                        item.type = "line";
                    }
                    return item;
                })
                this.options.series = arr;
            }
        }
    },
}
</script>

<style lang="less" scoped>
.chart_box {
    width: 100%;
    height: 400px;
    padding-bottom: 20px;
}
</style>