Apache Echarts 自学笔记 6. 概念篇 - 【ECharts 中的样式简介】 6.1 颜色主题(Theme)

桃扇骨 2024-03-27 16:46 51阅读 0赞

#### Apache Echarts 自学笔记 ####

> 学习资料：【Echarts官网：https://echarts.apache.org/】
> 
> ![在这里插入图片描述][5648014f77de476782a90f2039476aee.png_pic_center]
> 
> 如侵立删

##### 6. 概念篇 - 【ECharts 中的样式简介】 #####

几种方式：

*  颜色主题(Theme)
 *  调色盘
 *  直接样式设置(itemStyle、lineStyle、areaStyle、label、…)
 *  视觉映射(visualMap)

###### 6.1 颜色主题(Theme) ######

最简单的更改全局样式的方式，是直接采用颜色主题（theme）。

ECharts5 除了一贯的默认主题外，还内置了`'dark'`主题。可以像这样切换成深色模式：

默认样式：

![在这里插入图片描述][4538f83d39d04965989137d98b2c5a03.png_pic_center]

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

![在这里插入图片描述][1b00a75e727f4ebcad18ec1913b66773.png_pic_center]

其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 [主题编辑器][Link 1] 里访问到。

![在这里插入图片描述][39b45e43b7b04281a26002d28ad71781.png_pic_center]

也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：

![在这里插入图片描述][9ca0d747eebe4c629491db889b290841.png_pic_center]

如果主题保存为 JSON 文件，则需要自行加载和注册，例如：

// 假设主题名称是 "vintage"
    fetch('theme/vintage.json')
      .then(r => r.json())
      .then(theme => {
        echarts.registerTheme('vintage', theme);
        var chart = echarts.init(dom, 'vintage');
      })

![在这里插入图片描述][e0e3fa068b1e4551b7676f44f669b3c4.png_pic_center]

使用$getJSON() 异步操作。

如果保存为 UMD 格式的 JS 文件，文件内部已经做了自注册，直接引入 JS 即可：

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

![在这里插入图片描述][b91826b2a6f441ed8cf59fd04e9555ff.png_pic_center]

[5648014f77de476782a90f2039476aee.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/3f3085409721403dac5b3550088f2764.png
[4538f83d39d04965989137d98b2c5a03.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/6aa25b659fba41dfa3053f124feb0423.png
[1b00a75e727f4ebcad18ec1913b66773.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/c38ae8960f994b90b97c3851a7b22e39.png
[Link 1]: https://echarts.apache.org/theme-builder.html
[39b45e43b7b04281a26002d28ad71781.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ec4dbec980d54727b359a56aca987182.png
[9ca0d747eebe4c629491db889b290841.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e64e8cd0ada548b48bd2f46405f8a990.png
[e0e3fa068b1e4551b7676f44f669b3c4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/238e0192d296429c92a92cfdc3924baf.png
[b91826b2a6f441ed8cf59fd04e9555ff.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/54a3885f49534790844ddb434ab2af15.png