ECharts 中的样式简介
时间: 2022-05-15 15:39:08
(部分内容来自网络,其真实性存疑,为了避免对您造成误导,请谨慎甄别。)
本文主要是大略概述,用哪些方法,可以在 Apache EChartsTM 中设置样式,改变图形元素或者文字的颜色、明暗、大小等。
本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。
颜色主题(Theme)
调色盘
直接样式设置(itemStyle、lineStyle、areaStyle、label、...)
视觉映射(visualMap)
颜色主题(Theme)
最简单的更改全局样式的方式,是直接采用颜色主题(theme)。例如,在 示例集合 中,可以通过切换深色模式,直接看到采用主题的效果。
ECharts5 除了一贯的默认主题外,还内置了'dark'
主题。可以像这样切换成深色模式:
var chart = echarts.init(dom, 'dark');
其他的主题,没有内置在 ECharts 中,需要自己加载。这些主题可以在 主题编辑器 里访问到。也可以使用这个主题编辑器,自己编辑主题。下载下来的主题可以这样使用:
如果主题保存为 JSON 文件,则需要自行加载和注册,例如:
// 假设主题名称是 "vintage"$.getJSON('xxx/xxx/vintage.json', function(themeJSON) { echarts.registerTheme('vintage', JSON.parse(themeJSON)); var chart = echarts.init(dom, 'vintage');});
如果保存为 UMD 格式的 JS 文件,文件内部已经做了自注册,直接引入 JS 即可:
// HTML 引入 vintage.js 文件后(假设主题名称是 "vintage")var chart = echarts.init(dom, 'vintage');// ...
调色盘
调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。 可以设置全局的调色盘,也可以设置系列自己专属的调色盘。
option = { // 全局调色盘。 color: [ '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3' ], series: [ { type: 'bar', // 此系列自己的调色盘。 color: [ '#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42' ] // ... }, { type: 'pie', // 此系列自己的调色盘。 color: [ '#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C', '#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF' ] // ... } ]};
直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...
直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中,很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。
一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,itemStyle
、label
等可能出现在不同的地方。
在下面例子中我们给气泡图设置了阴影,渐变色等复杂的样式,你可以修改代码中的样式看修改后的效果:
option = {
backgroundColor: {
type: 'radial',
x: 0.3,
y: 0.3,
r: 0.8,
colorStops: [
{
offset: 0,
color: '#f7f8fa'
},
{
offset: 1,
color: '#cdd0d5'
}
]
},
grid: {
left: 10,
containLabel: true,
bottom: 10,
top: 10,
right: 30
},
xAxis: {
splitLine: {
show: false
}
},
yAxis: {
splitLine: {
show: false
},
scale: true
},
series: [
{
name: '1990',
data: data[0],
type: 'scatter',
symbolSize: function(data) {
return Math.sqrt(data[2]) / 5e2;
},
emphasis: {
focus: 'series',
label: {
show: true,
formatter: function(param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: {
type: 'radial',
x: 0.4,
y: 0.3,
r: 1,
colorStops: [
{
offset: 0,
color: 'rgb(251, 118, 123)'
},
{
offset: 1,
color: 'rgb(204, 46, 72)'
}
]
}
}
},
{
name: '2015',
data: data[1],
type: 'scatter',
symbolSize: function(data) {
return Math.sqrt(data[2]) / 5e2;
},
emphasis: {
focus: 'series',
label: {
show: true,
formatter: function(param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(25, 100, 150, 0.5)',
shadowOffsetY: 5,
color: {
type: 'radial',
x: 0.4,
y: 0.3,
r: 1,
colorStops: [
{
offset: 0,
color: 'rgb(129, 227, 238)'
},
{
offset: 1,
color: 'rgb(25, 183, 207)'
}
]
}
}
}
]
};
高亮的样式:emphasis
在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 emphasis 属性来定制。emphsis 中的结构,和普通样式的结构相同,例如:
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 组件 能指定数据到颜色、图形尺寸的映射规则,详见 数据的视觉映射。