Apacheechartsheatmapchart.Howtoaddtextinthelegendandremovenumbers
创始人
2024-09-05 18:01:05
0次

要在 echarts 热力图的图例中添加文本并移除数字,可以使用 formatter 属性。在 formatter 函数中,可以编写自定义的文本格式,并通过具体的操作实现目标效果。

以下是示例代码:

// 数据
var data = [
  [0, 0, 5],
  [0, 1, 1],
  [0, 2, 0],
  [1, 0, 1],
  [1, 1, 10],
  [1, 2, 0],
  [2, 0, 0],
  [2, 1, 0],
  [2, 2, 20]
];

// 配置项
var option = {
  // 图例
  legend: {
    data: ['有人', '无人'],
    // 格式化图例
    formatter: function (name) {
        if (name === '有人') {
            return name + ':Yes';
        } else if (name === '无人') {
            return name + ':No';
        }
    }
  },
  // 热力图
  series: {
    type: 'heatmap',
    data: data,
    label: {
      show: true
    },
    // 移除数字
    itemStyle: {
      emphasis: {
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      }
    }
  }
};

在上面的代码中,我们定义了一个数组 data 来存储热力图的数据。然后,在配置项中,我们设置了图例的 data 属性为一个包含文本的数组,并使用 formatter 函数来自定义图例的格式。

具体来说,我们针对图例中的每个数据项,通过判断其名称,来返回我们自定义的文本。比如,当名称为 '有人' 时,我们返回的文本为 '有人:Yes',表示该颜色代表有人。类似

相关内容

热门资讯

前端-session、jwt 目录:   (1)session (2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
nodejs:本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本,node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构:jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路,走一条最大的...
常用的DOS命令 常用的DOS命令 DOS(Disk Operating System,磁...
<C++> 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数,cons...