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

Leviash

已于 2024-01-29 11:48:13 修改

阅读量728

点赞数 7

分类专栏：前端文章标签： echarts 数据可视化前端框架前端 html javascript chrome

于 2024-01-29 11:43:31 首次发布

本文链接：https://blog.csdn.net/qq_51588894/article/details/135499708

版权

前端专栏收录该内容

45 篇文章 1 订阅

订阅专栏

引言

在使用 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

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
【ECharts 实战】5分钟学会：巧设Legend与Tooltip，提升数据可视化体验

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

扫一扫