1. Toy模板网首页
  2. > Toy博客

echarts雷达图图例自定义以及tooltip动态展示一维数据

9月前 作者：热心市民111 分类：Toy博客 阅读(38) 违法举报

这篇具有很好参考价值的文章主要介绍了echarts雷达图图例自定义以及tooltip动态展示一维数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、图例自定义

echarts雷达图tooltip,echarts,前端,javascript

 实现效果：

echarts雷达图tooltip,echarts,前端,javascript

//首先引入
import orangeIcon from '../../../../assets/images/class_statistical/icon1.png';
//使用
legend: {
         show: true,
         data: [{
                  name: '本班及格率',
                  icon: 'image://' + blueIcon + ''
                 },
                 {
                  name: '年级及格率',
                  icon: 'image://' + orangeIcon + ''
                 }],
                 x: 'right',
                 y: 'top',
                 itemWidth: 40,
                 itemHeight: 13,
                 itemGap: 40,//间距
             }

虽然上面实现了图例自定义，但是仔细看会发现图例与文字不在一条水平线上，利用富文本配置，对height进行调整，实现图例图片与文字对齐。

实现效果：

echarts雷达图tooltip,echarts,前端,javascript

                            legend: {
                                selectedMode: false,
                                show: true,
                                data: [{
                                    name: '本班及格率',
                                    icon: 'image://' + blueIcon,
                                },
                                {
                                    name: '年级及格率',
                                    icon: 'image://' + orangeIcon
                                }],
                                selected: {
                                    '本班及格率': true,
                                    '年级及格率': true
                                },
                                x: 'right',
                                y: 'top',
                                itemWidth: 40,
                                itemHeight: 13,
                                itemGap: 40,//间距
                                formatter:['{a|{name}}'].join('\n'),//实现图例与文字对齐
                                textStyle:{//实现图例与文字对齐
                                    height:9,
                                    rich:{
                                        a:{
                                        verticalAlign:'bottom'
                                        }
                                    }
                                }
                            },

二、tooltip悬浮框显示内容

官方文档中默认显示该维度的所有数据

echarts雷达图tooltip,echarts,前端,javascript

而遇到的需求是显示鼠标悬浮该轴的数据对比

echarts雷达图tooltip,echarts,前端,javascript

实现：

                        passChart.setOption({//各科及格率对比分析
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                },
                                show: true,
                                showContent: true,
                                backgroundColor: "#fff",
                                extraCssText: 'box-shadow:-2px 0px 9px 2px rgba(61,126,255,0.45)',
                                textStyle: {
                                    color: "#333333" //设置文字颜色
                                },
                                formatter: (params) => {//自定义绘制tooltip
                                    let str = ''
                                    str = ` <div class="ehover" style="width:120px;background: #FFFFFF;font-family: Microsoft YaHei;">
                                            <h3 style="height:14px;font-size:14px;font-weight:400;line-height:14px;color:#333333;">`+ this.singleSubName[this.isDot] + '及格率' + `</h3>
                                            <ul style="margin:0;paddding:0;list-style:none;color: #333333;font-size: 14px;">
                                                <li style="display:flex;justify-content: space-between;margin-top:6px;height: 15px;">
                                                    <p><span style="width:10px;height:10px;border-radius:10px;background: #3d7eff;margin-top: 6px;display: inline-block;margin-right: 5px;"></span> 本班</p><p style="font-weight:700">`+ this.classPass + '%' + `</p>
                                                </li>
                                                <li style="display:flex;justify-content: space-between;margin-top:6px;height: 15px;">
                                                    <p><span style="width:10px;height:10px;border-radius:10px;background: #F4A359;margin-top: 6px;display: inline-block;margin-right: 5px;"></span> 年段</p><p style="font-weight:700">`+ this.gradePass + '%' + `</p>
                                                </li>
                                            </ul>
                                        </div>`
                                    return this.singleSubName[this.isDot] ? str : ''//解决未在拐点悬浮undefine问题
                                }
                            },
                            legend: {
                                show: true,
                                data: [{
                                    name: '本班及格率',
                                    icon: 'image://' + blueIcon + ''
                                },
                                {
                                    name: '年级及格率',
                                    icon: 'image://' + orangeIcon + ''
                                }],
                                x: 'right',
                                y: 'top',
                                itemWidth: 40,
                                itemHeight: 13,
                                itemGap: 40,//间距
                            },
                            radar: [
                                {
                                    shape: 'circle',
                                    splitNumber: 5,
                                    indicator: this.subScoreMax,
                                    radius: 150,
                                    shape: 'circle',
                                    axisName: {
                                        color: '#333333'
                                    },
                                    axisLine: {//圆分隔线
                                        lineStyle: {
                                            color: '#C8DBF8'
                                        }
                                    },
                                    splitLine: {//列分隔线
                                        lineStyle: {
                                            color: '#C8DBF8'
                                        }
                                    },
                                    splitArea: {//背景圈颜色
                                        show: true,
                                        areaStyle: {
                                            color: ['rgb(252,255,255)', 'rgb(240,251,255)']
                                        }
                                    }
                                },
                            ],
                            series: [
                                {
                                    type: 'radar',
                                    tooltip: {
                                        trigger: 'item',
                                        axisPointer: {
                                            type: 'shadow'
                                        },
                                        show: true,
                                        showContent: true,
                                        backgroundColor: "#fff",
                                        padding: 20,  //内边距
                                        extraCssText: 'box-shadow:-2px 0px 9px 2px rgba(61,126,255,0.45)',
                                        textStyle: {
                                            color: "#333333" //设置文字颜色
                                        },
                                    },
                                    data: [
                                        {
                                            value: ,//数据
                                            name: '本班及格率',
                                            subjectName: this.subScoreMax,
                                            lineStyle: { color: '#3d7eff' },
                                            itemStyle: {
                                                color: '#FFFFFF', borderColor: '#3d7eff', borderWidth: 2, //实现空心圆点
                                            },
                                            areaStyle: {//区域颜色覆盖
                                                color: '#3d7eff',
                                                width: 1,
                                                opacity: 0.15
                                            },
                                        },
                                        {
                                            value: ,//数据
                                            name: '年级及格率',
                                            lineStyle: { color: '#f4a359' },
                                            itemStyle: {
                                                color: '#FFFFFF', borderColor: '#f4a359', borderWidth: 2 //实现空心圆点
                                            },
                                            areaStyle: {//区域颜色覆盖
                                                color: '#f4a359',
                                                width: 1,
                                                opacity: 0.15

                                            }
                                        }
                                    ]
                                },
                            ]
                        })
                        passChart.on('mouseover', (params) => {//写成箭头函数，获取到vue实例对象上的数据
                            this.isDot = params.event.target.__dimIdx;//获取鼠标停留拐点的数据
                            this.classPass = this.subListClone[this.isDot].passing_rate[0]//雷达图拐点本班及格率
                            this.gradePass = this.subListClone[this.isDot].passing_rate[1]//雷达图拐点年段及格率
                        })

  虽然实现了tooltip自定义，但是此时还有一个小缺陷：图例点击隐藏系列数据时，tooltip却不能动态展示：

echarts雷达图tooltip,echarts,前端,javascript

 解决方法有二：

  1. 将图例的点击事件关闭（最简单粗暴）echarts雷达图tooltip,echarts,前端,javascript
  2. 通过绑定legendselectchanged事件获取图例的selected值（true和false），并根据此值控制tooltip样式。

实现代码：

classLegend: { click: true },//data中存放图例点击的值
gradeLegend: { click: true },//data中存放图例点击的值


passChart.on("legendselectchanged", (params) => {//获知图例点击时的true和false
        this.$set(this.classLegend, 'click', params.selected.本班及格率)
        this.$set(this.gradeLegend, 'click', params.selected.年级及格率)
})


 tooltip: {
           trigger: 'axis',
           axisPointer: {
           type: 'shadow'
            },
            show: true,
            showContent: true,
            backgroundColor: "#fff",
            extraCssText: 'box-shadow:-2px 0px 9px 2px rgba(61,126,255,0.45)',
            textStyle: {
                        color: "#333333" //设置文字颜色
                        },
            formatter: (params) => {
                         let str = ''
                         if (this.classLegend.click) {//tooltip展示该维度所有数据
                                        str = ` <div class="ehover" style="width:120px;background: #FFFFFF;font-family: Microsoft YaHei;">
                                            <h3 style="height:14px;font-size:14px;font-weight:400;line-height:14px;color:#333333;">`+ this.singleSubName[this.isDot] + '及格率' + `</h3>
                                            <ul style="margin:0;padding:0;list-style:none;color: #333333;font-size: 14px;">
                                                <li style="display:flex;justify-content: space-between;margin-top:6px;height: 15px;">
                                                    <p><span style="width:10px;height:10px;border-radius:10px;background: #3d7eff;margin-top: 6px;display: inline-block;margin-right: 5px;"></span> 本班</p><p style="font-weight:700">`+ this.classPass + '%' + `</p>
                                                </li>
                                                <li style="display:flex;justify-content: space-between;margin-top:6px;height: 15px;">
                                                    <p><span style="width:10px;height:10px;border-radius:10px;background: #F4A359;margin-top: 6px;display: inline-block;margin-right: 5px;"></span> 年段</p><p style="font-weight:700">`+ this.gradePass + '%' + `</p>
                                                </li>
                                            </ul>
                                        </div>`
                                        return this.singleSubName[this.isDot] ? str : ''//解决未在拐点悬浮undefine问题
                                    } else if (this.gradeLegend.click) {//legend点击tooltip仅展示年级及格率
                                        str = ` <div class="ehover" style="width:120px;background: #FFFFFF;font-family: Microsoft YaHei;">
                                            <h3 style="height:14px;font-size:14px;font-weight:400;line-height:14px;color:#333333;">`+ this.singleSubName[this.isDot] + '及格率' + `</h3>
                                            <ul style="margin:0;padding:0;list-style:none;color: #333333;font-size: 14px;">
                                                <li style="display:flex;justify-content: space-between;margin-top:6px;height: 15px;">
                                                    <p><span style="width:10px;height:10px;border-radius:10px;background: #F4A359;margin-top: 6px;display: inline-block;margin-right: 5px;"></span> 年段</p><p style="font-weight:700">`+ this.gradePass + '%' + `</p>
                                                </li>
                                            </ul>
                                        </div>`
                                        return this.singleSubName[this.isDot] ? str : ''//解决未在拐点悬浮undefine问题
                                    } else if(this.classLegend.click) {//legend点击tooltip仅展示年级及格率
                                        str = ` <div class="ehover" style="width:120px;background: #FFFFFF;font-family: Microsoft YaHei;">
                                            <h3 style="height:14px;font-size:14px;font-weight:400;line-height:14px;color:#333333;">`+ this.singleSubName[this.isDot] + '及格率' + `</h3>
                                            <ul style="margin:0;padding:0;list-style:none;color: #333333;font-size: 14px;">
                                                <li style="display:flex;justify-content: space-between;margin-top:6px;height: 15px;">
                                                    <p><span style="width:10px;height:10px;border-radius:10px;background: #3d7eff;margin-top: 6px;display: inline-block;margin-right: 5px;"></span> 本班</p><p style="font-weight:700">`+ this.classPass + '%' + `</p>
                                                </li>
                                            </ul>
                                        </div>`
                                        return this.singleSubName[this.isDot] ? str : ''//解决未在拐点悬浮undefine问题
                                    }
                                }
                            },

注意事项：

  1. 给classLegend等赋值不能直接赋值：this.classLegend.click=params.selected.本班及格率，要利用this.$set,直接赋值不是响应式的，在tooltip中获取不到click值随图例点击而变化。
  2. 绑定legendselectchanged事件要写成箭头函数，获取this，拿到data里面的this.classLegend。

实现效果：

echarts雷达图tooltip,echarts,前端,javascript

 文章来源地址https://www.toymoban.com/news/detail-598482.html

 

到了这里，关于echarts雷达图图例自定义以及tooltip动态展示一维数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • echarts——实现自动轮播展示tooltips——技能提升

    echarts——实现自动轮播展示tooltips——技能提升

    最近在做 echarts 看板的时候，经常会遇到下面的这种情况，给出的数值比较相近，所以在页面的展示上会出现重叠的情况。但是又无法保证数值能够有很大程度的分开。（如何数值有很大的分离，必须10以下，200以上这种的，就不会有这种问题出现）。 如果遇到这种数值相近

    2024年02月03日
    浏览(41)
  • echarts——legend图例颜色设置，legend数组形式展示——基础积累

    echarts——legend图例颜色设置，legend数组形式展示——基础积累

    最近在写看板的时候，遇到一个小细节，就是当折线图展示图表时，线的颜色不够明显，导致视觉上不突出。 问题效果图如下： 修改后的效果图： 还是拿前几天文章中的 renderBar 渲染图表的函数来处理. 如果要保证图例颜色各不相同，可以给legend设置成数组的形式。主要代码

    2024年02月12日
    浏览(39)
  • 【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）

    【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）

    **【写在前面】**这下我又不得不说了，还是客户现场使用时想查询一周的数据，查询时候发现页面居然要等20多秒，这是个人都得崩溃吧，然后就开始排查这块业务代码模块，主要体现在两个方面： A.接口请求时间过长(约8秒)，有优化的空间 B.前端一次性调用了四次接口，分

    2023年04月08日
    浏览(79)
  • echarts自定义tooltip,给tooltip增加百分号%

    echarts自定义tooltip,给tooltip增加百分号%

    支持返回 HTML 字符串或者创建的 DOM 实例。 (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) = string | HTMLElement | HTMLElement[] 在 trigger 为 ‘axis’ 的时候，或者 tooltip 被 axisPointer 触发的时候，params 是多个系列的数据数组。其中每项内容格式同上，并且， { componentT

    2024年02月15日
    浏览(52)
  • echarts自定义x轴和tooltip数据格式

    echarts自定义x轴和tooltip数据格式

    x轴和y轴数据格式如下 修改后xy轴数据格式如下 需求： 将json数据转成折线图需要的数据格式，并且x轴始终为0 - 23 点，并且折线图上的点数不会缺失，对应时间有点位的就展示，没有就空

    2024年01月19日
    浏览(47)

  • vue中echart的tooltip自定义显示内容

    目的：让tooltip显示自定义格式数据，甚至是显示横纵坐标以外的数据。 1. 先介绍一下常用情况 。 tooltip的trigger有三种选项“item”“axis”“none”，选择axis就是显示横坐标的内容。 这样设置，鼠标滑过对应点时，tooltip就会显示横坐标内容和对应纵坐标的温度和信号。 2. 若要

    2024年02月09日
    浏览(42)
  • Echarts图表，利用formatter自定义tooltip的内容和样式

    Echarts图表，利用formatter自定义tooltip的内容和样式

    在展示多数据图表的时候 有的时候需要图例也展示出一些内容来，例如官方这样子：鼠标悬停的时候展示该点数据 但是，官方提供的样式有时不适用所有的开发场景 我的项目需要实现鼠标悬停在某一点的时候，只展示该条线的数据，以及一些图表中未表现的数据。参照原型

    2024年02月11日
    浏览(67)
  • Echarts图表如何利用formatter自定义tooltip的内容和样式

    Echarts图表如何利用formatter自定义tooltip的内容和样式

    在展示多数据图表的时候 有的时候需要图例也展示出一些内容来，例如官方这样子：鼠标悬停的时候展示该点数据 但是，官方提供的样式有时不适用所有的开发场景 我的项目需要实现鼠标悬停在某一点的时候，只展示该条线的数据，以及一些图表中未表现的数据。参照原型

    2024年02月01日
    浏览(38)
  • ECharts中: legend图例中的格式化属性(formatter)以及嵌套图表

    ECharts中: legend图例中的格式化属性(formatter)以及嵌套图表

    Documentation - Apache ECharts 字符串模板的相识变量使用(不同的图表对应都有对应的变量): Documentation - Apache ECharts 具体详细使用可以点^^^链接查看: 你只需要创建一个 div id =\\\"xjzbChart\\\"/div 然后 获取 xjzbChart = echarts.init(document.getElementById(\\\'xjzbChart\\\')); 在 series数组里面创建两个图表对象

    2024年02月13日
    浏览(43)
  • 详解：当鼠标放上echarts图形时，显示数据、名称，或者自定义tooltip弹窗

    详解：当鼠标放上echarts图形时，显示数据、名称，或者自定义tooltip弹窗

     主要知识点：tooltip{}该配置项为：提示框组件相关设置 写入代码的位置如下，tooltip与xAxis同级 效果一实现代码 效果二实现代码： 更加灵活的自定义弹窗,可以自己写html，其中 params[0].marker 是柱形颜色的圆形，其他参数可以打印 params查看一下 然后拼接进html里 写入代码的位

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包