1. 直接的样式设置是比较常用设置方式。纵观ECharts的option中, 很多地方可以设置itemStyle、lineStyle、areaStyle、label等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。
2. 一般来说, ECharts的各个系列和组件, 都遵从这些命名习惯, 虽然不同图表和组件中, itemStyle、label等可能出现在不同的地方。
3. 图形样式series-type.itemStyle
3.1. series-type.itemStyle.color = 'auto'图形的颜色, 默认从全局调色盘option.color获取颜色。支持使用rgb(255,255,255), rgba(255,255,255,1), #fff等方式设置为纯色, 也支持设置为渐变色和纹理填充, 具体见option.color。Color类型。
3.2. series-type.itemStyle.borderColor = '#000'图形的描边颜色。Color类型。
3.3. series-type.itemStyle.borderWidth图形的描边宽度, 默认不描边。number类型。
3.4. series-type.itemStyle.borderType = 'solid'图形的描边类型, 默认为实线, 支持'dashed'和'dotted'。string类型。
3.5. series-type.itemStyle.borderRadius图形的圆角半径, 单位px, 支持传入数组分别指定4个圆角半径。number和Array类型。如:
borderRadius: 5, // 统一设置四个角的圆角大小
borderRadius: [5, 5, 0, 0] // (顺时针左上, 右上, 右下, 左下)
3.6. series-type.itemStyle.shadowBlur图形阴影的模糊大小。该属性配合shadowColor, shadowOffsetX, shadowOffsetY一起设置图形的阴影效果。number类型。
3.7. series-type.itemStyle.shadowColor阴影颜色。支持的格式同color。Color类型。
3.8. series-type.itemStyle.shadowOffsetX阴影水平方向上的偏移距离。number类型。
3.9. series-type.itemStyle.shadowOffsetY阴影垂直方向上的偏移距离。number类型。
3.10. series-type.itemStyle.opacity = 1图形透明度。支持从0到1的数字, 为0时不绘制该图形。number类型。
3.11. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图形样式配置</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
<div id="main" style="width: 600px; height:400px; border: 1px solid;"></div>
<script type="text/javascript">
// 基于准备好的dom, 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
// 为图表配置标题
title: {
text: '图形样式配置'
},
// 配置提示信息
tooltip: {},
// 图例组件
legend: {
data: ['访问来源']
},
// 系列列表
series: [
{
name: '访问来源', // 系列名称
type: 'pie', // 系列图表类型
radius: '55%', // 饼图的半径, 直径为可视区尺寸(容器高宽中较小一项)的55%长度。
roseType: 'area', // 把饼图显示成南丁格尔图
data: [ // 系列中的数据内容
{ value: 235, name: '视频广告', itemStyle: { color: '#FF0000' } },
{ value: 274, name: '联盟广告', itemStyle: { color: '#00FF00' } },
{ value: 310, name: '邮件营销', itemStyle: { color: '#0000FF' } },
{ value: 335, name: '直接访问', itemStyle: { color: '#000000' } },
{ value: 400, name: '搜索引擎', itemStyle: { color: '#800000' } }
],
itemStyle: { // 图形样式配置。
borderColor: '#000', // 描边颜色。
borderWidth: 5, // 描边宽度, 默认不描边。
borderType: 'dotted', // 描边类型, 默认为实线, 支持'dashed'和'dotted'。
borderRadius: 10, // 圆角半径, 单位px, 支持传入数组分别指定4个圆角半径。
shadowBlur: 200, // 图形阴影的模糊大小。
shadowColor: 'rgba(64, 158, 255, 0.9)', // 阴影颜色。
shadowOffsetX: 100, // 阴影水平方向上的偏移距离。
shadowOffsetY: 30 // 阴影垂直方向上的偏移距离。
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
3.12. 效果图
4. 线条样式series-line.lineStyle
4.1. series-line.lineStyle.color = 'auto'线的颜色。支持使用rgb(255,255,255), rgba(255,255,255,1), #fff等方式设置为纯色, 也支持设置为渐变色和纹理填充, 具体见option.color。Color类型。
4.2. series-line.lineStyle.width = 2线宽。number类型。
4.3. series-line.lineStyle.type = 'solid'线的类型。可选的值有'solid'、'dashed'和'dotted'。自v5.0.0开始, 也可以是number或者number数组, 用以指定线条的dash array, 配合dashOffset可实现更灵活的虚线效果。string、number或Array类型。
4.4. series-line.lineStyle.dashOffset用于设置虚线的偏移量。number类型。
4.5. series-line.lineStyle.cap = 'butt'用于指定线段末端的绘制方式, 可以是: 'butt'线段末端以方形结束; 'round'线段末端以圆形结束; 'square'线段末端以方形结束, 但是增加了一个宽度和线段相同, 高度是线段厚度一半的矩形区域。默认值为'butt'。string类型。
4.6. series-line.lineStyle.shadowBlur图形阴影的模糊大小。该属性配合shadowColor, shadowOffsetX, shadowOffsetY一起设置图形的阴影效果。number类型。
4.7. series-line.lineStyle.shadowColor阴影颜色。支持的格式同color。Color类型。
4.8. series-line.lineStyle.shadowOffsetX阴影水平方向上的偏移距离。number类型。
4.9. series-line.lineStyle.shadowOffsetY阴影垂直方向上的偏移距离。number类型。
4.10. series-line.lineStyle.opacity图形透明度。支持从0到1的数字, 为0时不绘制该图形。number类型。
4.11. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>线条样式配置</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
<div id="main" style="width: 600px; height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom, 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
// 为图表配置标题
title: {
text: '线条样式配置'
},
// 配置提示信息
tooltip: {},
// 图例组件
legend: {
data: ['2020']
},
// 配置要在X轴显示的项
xAxis: {
type: "category", // 类目
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
// 配置要在Y轴显示的项
yAxis: {
type: 'value' // 在实际的应用中, 如果是'value'类型, 也可以省略不写。
},
// 系列列表
series: [
{
name: '2020', // 系列名称
type: 'line', // 系列图表类型
data: [89.3, 92.1, 94.4, 85.4], // 系列中的数据内
lineStyle: { // 线条样式配置。
color: '#F00', // 线的颜色。
width: 8, // 线宽。
type: [15, 20], // 线的类型。
dashOffset: 10, // 用于设置虚线的偏移量。
cap: 'round', // 线段末端以圆形结束。
shadowBlur: 20, // 图形阴影的模糊大小。
shadowColor: 'rgb(0, 255, 0)', // 阴影颜色。
shadowOffsetX: 100, // 阴影水平方向上的偏移距离。
shadowOffsetY: 30, // 阴影垂直方向上的偏移距离。
opacity: 0.9 // 图形透明度
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
4.12. 效果图
5. 区域填充样式series-line.areaStyle
5.1. 区域填充样式, 设置后显示成区域面积图。
5.2. series-line.areaStyle.color = "#000"填充的颜色。支持使用rgb(255,255,255), rgba(255,255,255,1), #fff等方式设置为纯色, 也支持设置为渐变色和纹理填充, 具体见option.color。Color类型。
5.3. series-line.areaStyle.origin = 'auto'图形区域的起始位置。默认情况下, 图形会从坐标轴轴线到数据间进行填充。如果需要填充的区域是坐标轴最大值到数据间, 或者坐标轴最小值到数据间, 则可以通过这个配置项进行设置。可选值包括'auto'(默认值)填充坐标轴轴线到数据间的区域; 'start'填充坐标轴底部(非inverse情况是最小值)到数据间的区域; 'end'填充坐标轴顶部(非inverse情况是最大值)到数据间的区域。string类型。
5.4. series-line.lineStyle.shadowBlur图形阴影的模糊大小。该属性配合shadowColor, shadowOffsetX, shadowOffsetY一起设置图形的阴影效果。number类型。
5.5. series-line.lineStyle.shadowColor阴影颜色。支持的格式同color。Color类型。
5.6. series-line.lineStyle.shadowOffsetX阴影水平方向上的偏移距离。number类型。
5.7. series-line.lineStyle.shadowOffsetY阴影垂直方向上的偏移距离。number类型。
5.8. series-line.lineStyle.opacity图形透明度。支持从0到1的数字, 为0时不绘制该图形。number类型。
5.9. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>区域填充样式</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
<div id="main" style="width: 600px; height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom, 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
// 为图表配置标题
title: {
text: '区域填充样式'
},
// 配置提示信息
tooltip: {},
// 图例组件
legend: {
data: ['2022']
},
// 配置要在X轴显示的项
xAxis: {
type: "category", // 类目
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
// 配置要在Y轴显示的项
yAxis: {},
// 系列列表
series: [
{
name: '2022', // 系列名称
type: 'line', // 系列图表类型
data: [97.7, 83.1, 92.5, 78.1], // 系列中的数据内容
stack: '销量',
areaStyle: {
color: '#ff0',
origin: 'end',
opacity: 0.1
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
5.10. 效果图
6. 图形上的文本标签series-type.label
6.1. 图形上的文本标签, 可用于说明图形的一些数据信息, 比如值, 名称等。
6.2. series-type.label.show是否显示标签。boolean类型。
6.3. series-type.label.distance = 5距离图形元素的距离。number类型。
6.4. series-type.label.rotate标签旋转。从-90度到90度。正值是逆时针。number类型。
6.5. series-type.label.offset是否对文字进行偏移。默认不偏移。例如: [30, 40]表示文字在横向上偏移30, 纵向上偏移40。Array类型。
6.6. series-type.label.color文字的颜色。Color类型。
6.7. series-type.label.fontStyle文字字体的风格。可选: 'normal'、'italic'和'oblique'。string类型。
6.8. series-type.label.fontWeight文字字体的粗细。可选: 'normal'、'bold'、'bolder'、'lighter'和100 | 200 | 300 | 400...。string和number类型。
6.9. series-type.label.fontFamily文字的字体系列。还可以是'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...。string类型。
6.10. series-type.label.fontSize文字的字体大小。number类型。
6.11. series-type.label.align文字水平对齐方式, 默认自动。可选: 'left'、'center'和'right'。string类型。
6.12. series-type.label.verticalAlign文字垂直对齐方式, 默认自动。可选: 'top'、'middle'和'bottom'。string类型。
6.13. series-type.label.lineHeight行高。number类型。
6.14. series-type.label.backgroundColor文字块背景色。string类型。
6.15. series-type.label.borderColor文字块边框颜色。Color类型。
6.16. series-type.label.borderWidth文字块边框宽度。number类型。
6.17. series-type.label.borderType文字块边框描边类型。可选: 'solid'、'dashed'和'dotted'。自v5.0.0开始, 也可以是number或者number数组, 用以指定线条的dash array, 配合borderDashOffset可实现更灵活的虚线效果。string、number和Array类型。
6.18. series-type.label.borderDashOffset用于设置虚线的偏移量, 可搭配borderType指定dash array实现灵活的虚线效果。number类型。
6.19. series-type.label.borderRadius文字块的圆角。number和Array类型。
6.20. series-type.label.padding文字块的内边距。number和Array类型。
6.21. series-type.label.shadowColor文字块的背景阴影颜色。Color类型。
6.22. series-type.label.shadowBlur文字块的背景阴影长度。number类型。
6.23. series-type.label.shadowOffsetX文字块的背景阴影X偏移。number类型。
6.24. series-type.label.shadowOffsetY文字块的背景阴影Y偏移。number类型。
6.25. series-type.label.width文本显示宽度。number类型。
6.26. series-type.label.height文本显示高度。number类型。
6.27. series-type.label.textBorderColor文字本身的描边颜色。Color类型。
6.28. series-type.label.textBorderWidth文字本身的描边宽度。number类型。
6.29. series-type.label.textBorderType文字本身的描边类型。可选: 'solid'、'dashed'和'dotted'。自v5.0.0开始, 也可以是number或者number数组, 用以指定线条的dash array, 配合textBorderDashOffset可实现更灵活的虚线效果。string、number和Array类型。
6.30. series-type.label.textBorderDashOffset用于设置虚线的偏移量, 可搭配textBorderType指定dash array实现灵活的虚线效果。number类型。
6.31. series-type.label.textShadowColor文字本身的阴影颜色。Color类型。
6.32. series-type.label.textShadowBlur文字本身的阴影长度。number类型。
6.33. series-type.label.textShadowOffsetX文字本身的阴影X偏移。number类型。
6.34. series-type.label.textShadowOffsetY文字本身的阴影Y偏移。number类型。
6.35. series-type.label.overflow文字超出宽度是否截断或者换行。配置width时有效。'truncate' 截断, 并在末尾显示ellipsis配置的文本, 默认为...; 'break'换行; 'breakAll'换行, 跟'break'不同的是, 在英语等拉丁文中, 'breakAll'还会强制单词内换行。string类型。
6.36. series-type.label.position标签的位置。支持: top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight。也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。string和Array类型。
6.37. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图形上的文本标签</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
<div id="main" style="width: 600px; height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom, 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
// 为图表配置标题
title: {
text: '图形上的文本标签'
},
// 配置提示信息
tooltip: {},
// 图例组件
legend: {
data: ['2020']
},
// 配置要在X轴显示的项
xAxis: {
type: "category", // 类目
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
// 配置要在Y轴显示的项
yAxis: {
type: 'value' // 在实际的应用中, 如果是'value'类型, 也可以省略不写。
},
// 系列列表
series: [
{
name: '2020', // 系列名称
type: 'line', // 系列图表类型
data: [89.3, 92.1, 94.4, 85.4], // 系列中的数据内
label: {
show: true, // 是否显示标签
distance: 30, // 距离图形元素的距离
rotate: 30, // 标签旋转
offset: [30, 40], // 是否对文字进行偏移
color: '#0f0', // 文字的颜色。
fontStyle: 'oblique', // 文字字体的风格。
fontWeight: 'bolder', // 文字字体的粗细。
fontFamily: 'sans-serif', // 文字的字体系列。
fontSize: 20, // 文字的字体大小。
align: 'right', // 文字水平对齐方式, 默认自动。
verticalAlign: 'bottom', // 文字垂直对齐方式, 默认自动。
lineHeight: 60, // 行高。
backgroundColor: 'red', // 文字块背景色。
borderColor: '#00f', // 文字块边框颜色。
borderWidth: 3, // 文字块边框宽度。
borderType: [5, 1], // 文字块边框描边类型。
borderDashOffset: 5, // 用于设置虚线的偏移量
borderRadius: [5, 10, 5, 10], // 文字块的圆角。
padding: [0, 9, 0, 0], // 文字块的内边距。
position: 'bottom' // 标签的位置。
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
6.38. 效果图