ECharts 中的样式简介

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

之所以用“样式”这种可能不很符合数据可视化思维的词,是因为,比较通俗易懂。

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

颜色主题(Theme)

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

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

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

或者

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

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

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

  1. // 假设主题名称是 "vintage"
  2. $.getJSON('xxx/xxx/vintage.json',function(themeJSON){
  3. echarts.registerTheme('vintage', JSON.parse(themeJSON))
  4. var chart = echarts.init(dom,'vintage');
  5. });

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

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

调色盘

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

  1. option ={
  2. // 全局调色盘。
  3. color:['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'],
  4. series:[{
  5. type:'bar',
  6. // 此系列自己的调色盘。
  7. color:['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab','#91ca8c','#f49f42'],
  8. ...
  9. },{
  10. type:'pie',
  11. // 此系列自己的调色盘。
  12. color:['#37A2DA','#32C5E9','#67E0E3','#9FE6B8','#FFDB5C','#ff9f7f','#fb7293','#E062AE','#E690D1','#e7bcf3','#9d96f5','#8378EA','#96BFFF'],
  13. ...
  14. }]
  15. }

直接的样式设置 itemStyle, lineStyle, areaStyle, label, …

直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中,很多地方可以设置 itemStylelineStyleareaStylelabel 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

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

直接样式设置的另一篇介绍,参见 个性化图表的样式

高亮的样式:emphasis

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

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

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

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

这种写法 仍然被兼容,但是,不再推荐。事实上,多数情况下,使用者只会配置普通状态下的样式,而使用默认的高亮样式。所以在 ECharts4 中,支持不写 normal 的配置方法(即本文开头的那种写法),使得配置项更扁平简单。

通过 visualMap 组件设定样式

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