更何况不过刚好 2022-02-11 12:55 采纳率: 86.4%
浏览 56
已结题

echart提示框有部分显示不出来

img


如图是我用echarts做的雷达图,需要提示框,但是因为数据较多,提示框超出去,无法显示内容,请问这应该怎么解决呢?

this.chartOption = {
            title: {
                text: '玫瑰图'
            },
            tooltip: {
                show: true,
                textStyle: {
                    color: '#fff'
                },
                backgroundColor: 'rgba(0,0,0,0.7)',
                formatter: (e) => {
                    let value = e.data.value;
                    let str = ``;
                    // let name = ['N', '北北西', '西北', '西西北', 'W', '西西南', '西南', '南南西', 'S', '南南东', '东南', '东东南', 'E', '东东北', '东北', '北北东',
                    // ]
                    value.forEach((item, index) => {
                        str += `<span>${this.name[index]}:${item}</span><br/>`
                    })
                    return str;
                }

            },
            legend: {
                data: ['风速玫瑰图'],
                show: false //不显示图例,
            },
            radar: {
                shape: 'circle',
                axisName: {
                    color: 'rgba(176,58,91,1)' //标签的样式
                },
                splitLine: {
                    lineStyle: {
                        color: [
                            'rgba(0,156,220, 0.1)',
                            'rgba(0,156,220, 0.2)',
                            'rgba(0,156,220, 0.4)',
                            'rgba(0,156,220, 0.6)',
                            'rgba(0,156,220, 0.8)',
                            'rgba(0,156,220, 1)'
                        ].reverse(),
                        type: 'dashed' //虚线
                    } //每层圆圈的样式
                },
                splitArea: {
                    show: false //不显示划分每个区域的样式
                },
                indicator: [
                    { name: 'N', max: 100 },
                    { name: '', max: 100 },
                    { name: '', max: 100 },
                    { name: '', max: 100 },
                    { name: 'W', max: 100 },
                    { name: '', max: 100 },
                    { name: '', max: 100 },
                    { name: '', max: 100 },
                    { name: 'S', max: 100 },
                    { name: '', max: 100 },
                    { name: '', max: 100 },
                    { name: '', max: 100 },
                    { name: 'E', max: 100 },
                    { name: '', max: 100 },
                    { name: '', max: 100 },
                    { name: '', max: 100 }
                ],
                center: ['50%', '56%'], //玫瑰图相对于容器的宽高
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0,156,220, 0.5)', //由圆点往外的线的样式
                        type: 'dashed' //虚线
                    }
                }
            },
            series: [
                {
                    name: 'Budget vs spending',
                    type: 'radar',
                    data: [
                        {
                            // value: [5000, 4500, 20000, 3000, 40089, 21000, 5000, 14000, 28000, 26000, 42000, 21000],
                            value: this.data,
                            name: '风速玫瑰图'
                        }
                    ],
                    itemStyle: {
                        color: 'rgb(176,58,91)' //线的样式
                    },
                    areaStyle: {
                        color: 'rgba(176,58,91,0.6)'
                    },
                    lineStyle: {
                        //线的长度
                        width: 1
                        // opacity: 0.5
                    },
                    symbol: 'none' //让拐点消失
                }
            ]
        };

  • 写回答

1条回答 默认 最新

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 2月19日
      • 已采纳回答 2月11日
      • 创建了问题 2月11日

      悬赏问题

      • ¥100 IIC通讯数据算法分析
      • ¥15 matlab 绘制涡流场
      • ¥15 依存句法分析如何与BERT模型及GCN相结合
      • ¥66 有偿收一个会Python 与unitysocket通信,会简单mediapipe手势识别的哥
      • ¥15 药店卖药设计使利润最大
      • ¥15 模拟银行实现VIP服务
      • ¥20 ECU在实车上can通讯失败或不稳定
      • ¥15 关于VB.net调用Excel如何打包的问题?
      • ¥15 VB6.0+WebBrowser如何实现网页内嵌图片按钮点击
      • ¥30 请问纯C语言如何编写简易的easyx图形库