本文主要是大略概述,用哪些方法,可以设置设置样式,改变图形元素或者文字的颜色、明暗、大小等。

本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。

  • 颜色主题(Theme)
  • 调色盘
  • 直接样式设置(itemStyle、lineStyle、areaStyle、label、…)
  • 视觉映射(visualMap) 其他关于样式的文章,参见:,数据的视觉映射

最简单的更改全局样式的方式,是直接采用颜色主题(theme)。例如,在 中,可以选择 “Theme”,直接看到采用主题的效果。

ECharts4 开始,除了一贯的默认主题外,新内置了两套主题,分别为 和 'dark'。可以这么来使用它们:

  1. var chart = echarts.init(dom, 'dark');

其他的主题,没有内置在 ECharts 中,需要自己加载。这些主题可以在 主题编辑器 里访问到。也可以使用这个主题编辑器,自己编辑主题。下载下来的主题可以这样使用:

如果主题保存为 JSON 文件,那么可以自行加载和注册,例如:

如果保存为 UMD 格式的 JS 文件,那么支持了自注册,直接引入 JS 文件即可:

  1. // HTML 引入 vintage.js 文件后(假设主题名称是 "vintage")
  2. var chart = echarts.init(dom, 'vintage');
  3. // ...

调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。可以设置全局的调色盘,也可以设置系列自己专属的调色盘。

一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,itemStylelabel 等可能出现在不同的地方。

直接样式设置的另一篇介绍,参见 。

在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 emphasis 属性来定制。 中的结构,和普通样式的结构相同,例如:

  1. option = {
  2. type: 'scatter',
  3. itemStyle: {
  4. // 点的颜色。
  5. color: 'red'
  6. },
  7. label: {
  8. show: true,
  9. // 标签的文字。
  10. formatter: 'This is a normal label.'
  11. },
  12. itemStyle: {
  13. // 高亮时点的颜色。
  14. color: 'blue'
  15. },
  16. label: {
  17. show: true,
  18. // 高亮时标签的文字。
  19. formatter: 'This is a emphasis label.'
  20. }
  21. }
  22. }

注意:在 ECharts4 以前,高亮和普通样式的写法,是这样的:

visualMap 组件 能指定数据到颜色、图形尺寸的映射规则,详见 。