问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

echart legend ?

头像
zhangliang
    43634


    Echarts legend 鼠标移动上去显示提示文字，这个事件应该怎么加，如图效果

    vue.js
    阅读 1.1k
    avatarAI BotBETA

    在 ECharts 中，您可以使用 legend 组件的 selectedMode 属性和 formatter 函数来实现这个功能。

    selectedMode 属性用于开启图例的点击复选框模式，让图例可以被选中。当 selectedMode 为 true 时，鼠标移上去时会显示提示文字。

    formatter 函数用于自定义图例的显示内容。你可以在这个函数中返回需要的提示文字。

    以下是一个简单的示例：

    option = {
    legend: {
        data: ['销量'],
        selectedMode: true,  // 开启图例的点击复选框模式
        formatter: function(params) {  // 自定义图例的显示内容
            // params 是包含图例相关信息的对象
            // 例如：params.name 是图例的名字，params.checked 是图例是否被选中的状态
            return '销量：' + params.name + (params.checked ? ' (已选中)' : '');
        }
    },
    series : [
        {
            name: '销量',
            type: 'bar',
            data:[5, 20, 36, 10, 10, 20]
        }
    ]
};

    在上述代码中，formatter 函数会检查每个图例的 checked 状态，并在提示文字中添加这个信息。你可以根据 params 对象中的其他属性来定制提示文字。

    2 个回答
    得票最新
    头像
    玛拉_以琳
      8.7k41542

      legend也有tooltip

        legend: {
    tooltip: {
      show: true,
      axisPointer: {
        type: 'shadow'
      }
    }
  },

      image.png

      头像
      落子无悔
        31314

        legend: {

            formatter: function(params) {
        return '结算成绩：'+'考核不通过';
    }
},
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题