【ECharts 实战】5分钟学会：巧设Legend与Tooltip，提升数据可视化体验

已于 2024-01-29 11:48:13 修改
阅读量1.3k 收藏 9
点赞数 7
分类专栏： 前端 文章标签： echarts 数据可视化 前端框架 前端 html javascript chrome
于 2024-01-29 11:43:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51588894/article/details/135499708
版权

目录

引言

需求

示例代码概览

实战操作步骤

        1.重命名 Legend 中的系列名称

        2.重命名 Tooltip 中的系列名称

        实战效果

完整代码

引言

        在使用 ECharts 进行复杂的数据可视化过程中，定制图表元素以适应具体业务场景和用户需求至关重要。本文将通过一个直观的实例，带领我们在短短5分钟内掌握如何利用 ECharts 对图例（Legend）与提示框（Tooltip）中的系列名称进行个性化重命名，从而显著提升图表的可读性和满足用户的个性化需求。

需求

        假设我们面对着一个展示网站流量来源的折线图，其中包含五个不同渠道的数据系列，其中一个名为 'Email'。为了使信息传达更清晰、贴切，我们需要将图例中的 'Email' 更改为更具行业通用性的表述—— 'Message'，同时在鼠标悬停时显示的 tooltip 中也将 'Email' 修改为中文名 '邮件'。

示例代码概览

        以下代码是 ECharts 官网一个折线图示例的对应代码，可视化效果见下图所示；

<!DOCTYPE html>
<html lang="en" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
      title: {
        text: 'Stacked Line'
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>

</html>

实战操作步骤

        1.重命名 Legend 中的系列名称

        在 option.legend 的配置中设置 formatter 函数，针对传入的每个 name 参数判断是否为 'Email'，如果是，则将其替换为 'Message'：

legend: {
        formatter: function (name) {
          if (name === 'Email') {
            return 'Message';
          } else {
            return name;
          }
        },
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },

        2.重命名 Tooltip 中的系列名称

        对于 tooltip 内容的自定义，需要在 option.tooltip 的 formatter 函数中实现。由于 tooltip 可能会展示多个系列的数据，因此要根据不同情况处理：

tooltip: {
        formatter: function (params) {
          if (params && params.length > 0) {
            // 处理多系列数据的情况（params 是数组）
            let tipText = '';
            params.forEach(item => {
              if (item.seriesName === 'Email') {
                item.seriesName = '邮件'; // 在tooltip中将'Email'改为'邮件'
              }
              tipText += `${item.marker} ${item.seriesName}: ${item.data} <br/>`;
            });
            return tipText;
          } else if (params && params.componentType === 'series' && params.seriesIndex !== undefined) {
            // 处理单系列数据的情况（params 是对象）
            let seriesName = params.seriesName;
            if (seriesName === 'Email') {
              seriesName = '邮件';
            }
            return `${params.marker} ${seriesName}: ${params.data[1]}`; // 根据实际情况调整格式
          }
        },
        trigger: 'axis',
      },

        通过以上两个关键步骤的设置，我们的 ECharts 图表已经成功实现了 Legend 和 Tooltip 中系列名称的个性化重命名。这不仅有助于提升图表的信息传递效率，也使得整体视觉效果更加符合用户的认知习惯，进而提升了数据可视化的用户体验。

        实战效果

完整代码

<!DOCTYPE html>
<html lang="en" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <!-- 图表容器 -->
  <div id="container" style="height: 100%"></div>

  <!-- 引入 ECharts 库 -->
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>

  <!-- 初始化并配置 ECharts 图表 -->
  <script type="text/javascript">
    // 获取图表容器 DOM 节点
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    // 定义图表配置项 option
    var option;

    option = {
      title: {
        text: 'Stacked Line'
      },
      // 重命名 Tooltip 中的系列名称
      tooltip: {
        formatter: function (params) {
          if (params && params.length > 0) {
            // 处理多系列数据的情况（params 是数组）
            let tipText = '';
            params.forEach(item => {
              if (item.seriesName === 'Email') {
                item.seriesName = '邮件'; // 在tooltip中将'Email'改为'邮件'
              }
              tipText += `${item.marker} ${item.seriesName}: ${item.data} <br/>`;
            });
            return tipText;
          } else if (params && params.componentType === 'series' && params.seriesIndex !== undefined) {
            // 处理单系列数据的情况（params 是对象）
            let seriesName = params.seriesName;
            if (seriesName === 'Email') {
              seriesName = '邮件';
            }
            return `${params.marker} ${seriesName}: ${params.data[1]}`; // 根据实际情况调整格式
          }
        },
        trigger: 'axis',
      },
      // 重命名 Legend 系列名称
      legend: {
        formatter: function (name) {
          if (name === 'Email') {
            return 'Message';
          } else {
            return name;
          }
        },
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    // 设置图表配置并响应窗口大小变化
    window.addEventListener('resize', myChart.resize);
  </script>
</body>

</html>

Leviash
关注
专栏目录
Echarts从基础到上手实战
06-18
大数据可视化：Echarts从基础到上手实战.pdf 支持数据可视化，以多种图像接合。
Echarts从入门到上手实战视频教程 70课(完整)
11-03
ECharts，一个使用 JavaScript 实现的开源可视化库。上手简单、实用，是你在工作可视化的利器，值得学习
echarts标注legend的配置
最新发布
古之成大事者，不惟有超世之才，亦必有坚韧不拔之志
09-18 426
【代码】echarts标注legend的配置。
ECharts实战教程
星航夜空的帆舟
06-08 6634
pink老师讲解的ECharts可视化项目。。。
数据可视化-ECharts Html项目实战（1）
qq_49513817的博客
03-12 1981
在之前的文章中，我们学习了如何安装Visual Studio Code并下载插件，想了解的朋友可以查看这篇文章。安装 Visual Studio Code今天的文章，我会从基础案例开始，带着大家在VS code中绘制ECharts里的折线图、条形图与柱形图，并实现动态触发以及最大、最小、平均值。
echarts实战
令主
06-16 298
地图 <div id="map"></div> <script> import api from "@/../static/common/api/api.js"; import echarts from "echarts"; export default { methods: { // 中国地图 map() { var mapList = []; api.pharmaSumMap().then(res => {
WPS 2021双面打印技巧：巧设装订线.docx
09-27
WPS 2021双面打印技巧：巧设装订线 知识点1：普通喷墨打印机的限制 -------------------------------- 普通喷墨打印机由于价格低廉，功能也相对较少，不能自动双面打印，这给家用电脑用户带来了不便。但是，WPS却...
初中政治教学素材： 巧设情境 增强课堂活力.docx
11-23
初中政治教学素材： 巧设情境 增强课堂活力.docx
作文强化训练一：巧设议论文分论点解析版.doc
10-08
【议论文分论点设置】是写作中一种重要的组织思想和表达观点的方式，尤其是在议论文中，通过设立清晰、有力的分论点，可以更好地支撑和阐释中心论点，增强论述的逻辑性和说服力。 一、设置分论点的方法 ...
巧设无线路由器提升迅雷下载速度.docx
09-27
【标题】和【描述】提及的是通过优化无线路由器的设置来提升迅雷（一款流行的下载工具）的下载速度。以下是一些关键知识点的详细说明： 1. **启用加密**： - 无线路由器的安全性至关重要，启用WEP或WPA加密可以...
echarts实战应用
05-08
echarts的基本应用到 动态数据的使用 从页面 2秒钟发送一个请求到servlet 然后从servlet返回一个json数据 然后在页面展示 包含折线 饼图 柱形
巧设U盘提升win7系统运行速度.docx
09-27
"巧设U盘提升win7系统运行速度" 知识点1：ReadyBoost技术简介 ReadyBoost是一种Windows Vista和Windows 7操作系统中的技术，可以使用U盘或其他移动存储设备来加速系统的运行速度。该技术可以将U盘或其他移动存储...
echarts 实战应用
weixin_45932157的博客
07-26 303
echats 实战
echarts入门到实战
我们一起学前端
11-27 857
在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（作为前端程序员，数据可视化也是我们必备的一个技能，怎么获取这个技能呢，其实我们只需要掌握一个图表库即可。目前，最常用的图表库是echarts。xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。图表容器，样式，数据集，数据转换，坐标轴，视觉映射，图例，事件与行为。
echarts 图例组件legend配置
ngd-b的博客
08-05 6103
默认的图例数据会从系列中获取，如果需要设置不同的图例样式或者不需要展示某个系列图例则可设置数据。图例的数据字段name必须是系列中的系列名称或数据名,
ECharts上手例子
weixin_34128534的博客
11-01 141
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器 （IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度 个性化定制的数据可视化图表。官网：http://echarts.baidu.com/目前最新版本：4.2.0-rc.2 ...
Echarts可视化实战
qq_31297573的博客
09-16 545
Echarts可视化实战 获取HBase中的数据 按天获取HBase中course_clickcount表的数据 public Map<String, Long> query(String tableName, String condition) throws Exception { HashMap<String, Long> map = new HashMap<>(); HTable table = getTable(table
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Leviash

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值