【HZHE003】黄子涵学习Echarts
概念篇
ECharts 中的样式简介
本文主要是大略概述，用哪些方法，可以在 Apache EChartsTM 中设置样式，改变图形元素或者文字的颜色、明暗、大小等。
本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。
- 颜色主题（Theme）
- 调色盘
- 直接样式设置（itemStyle、lineStyle、areaStyle、label、...）
- 视觉映射（visualMap）
颜色主题（Theme）
最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 示例集合 中，可以通过切换深色模式，直接看到采用主题的效果。
ECharts5 除了一贯的默认主题外，还内置了'dark'主题。可以像这样切换成深色模式：
黄子涵学习Echarts
其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 主题编辑器 里访问到。
也可以使用这个主题编辑器，自己编辑主题。
下载下来的主题可以这样使用：
JS文件方式
如果主题保存为 JS 文件，例如：
- 下载或复制以下的主题保存至
*.js文件； - 将该文件在
HTML中引用； - 使用
echarts.init(dom, 'westeros')创建图表，第二个参数即为*.js文件中注册的主题名字。
黄子涵学习Echarts
JSON 文件（暂时还不会）
如果主题保存为 JSON 文件，则需要自行加载和注册，例如：
- 下载或复制以下的主题保存至
*.json文件； - 读取该 JSON 文件，并使用
obj = JSON.parse(data)将其转换成对象； - 调用
echarts.registerTheme('walden', obj)注册主题； - 使用
echarts.init(dom, 'walden')创建图表，第二个参数即为刚才注册的主题名字。
// 假设主题名称是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {
echarts.registerTheme('vintage', JSON.parse(themeJSON));
var chart = echarts.init(dom, 'vintage');
});
UMD 格式的 JS 文件
如果保存为 UMD 格式的 JS 文件，文件内部已经做了自注册，直接引入 JS 即可：
黄子涵学习Echarts
调色盘
调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。 可以设置全局的调色盘，
黄子涵学习Echarts
也可以设置系列自己专属的调色盘。
黄子涵学习Echarts
直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...
直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中，很多地方可以设置 itemStyle、lineStyle、areaStyle、label等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。
一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，itemStyle、label 等可能出现在不同的地方。
在下面例子中我们给气泡图设置了阴影，渐变色等复杂的样式，你可以修改代码中的样式看修改后的效果：
实例代码
黄子涵学习Echarts
实例效果
直接的样式设置
高亮的样式：emphasis
在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 emphasis 属性来定制。emphasis 中的结构，和普通样式的结构相同，例如：
option = {
series: {
type: 'scatter',
// 普通样式。
itemStyle: {
// 点的颜色。
color: 'red'
},
label: {
show: true,
// 标签的文字。
formatter: 'This is a normal label.'
},
// 高亮样式。
emphasis: {
itemStyle: {
// 高亮时点的颜色。
color: 'blue'
},
label: {
show: true,
// 高亮时标签的文字。
formatter: 'This is a emphasis label.'
}
}
}
};
通过 visualMap 组件设定样式
visualMap 组件 组件 能指定数据到颜色、图形尺寸的映射规则，详见 数据的视觉映射。