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

浅浅的花香味﹌ 2023-02-24 14:28 3阅读 0赞

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

## 效果图描述 ##

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20230209/95b6a494c9c04b8ba0eeb526e8866f1b.png