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

Leviash

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

阅读量1.6k

点赞数 7

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

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

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

版权

引言

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