ECharts 区域样式
在《ECharts 文本样式》小节，我们学习了如何对图表中的文本样式进行美化，需要美化的不只是文本，在我们图表中还有其他的需要我们用样式美化，以便于能更好的观察数据以及数据的变化，比如：为折线图背景之类的。下面我们就对 ECharts 区域样式进行解读，当然我们还会通过一些实例来帮助我们理解。
在 ECharts 中，图表、组件最终会被渲染成线段、多边形、文本的集合，多边形在不同组件中虽然被赋予不同的语义，但它们都有相似的表现，ECharts 为此提供了一套通用的配置集合，称之为区域样式 —— areaStyle。
areaStyle 基在 中，其他组件继承扩展，例如 、、 等。本文不对具体组件中的定义做过多说明，而侧重于 areaStyle 对象通用的基础。
areaStyle 的通用：
color 传入色值字符串，格式 RGB 如 rgb(255, 255, 255)、RGBA 如 rgb(255, 255, 255, 0.5)、十六进制如 #fff 等，示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_708_2@: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: { type: 'value' },
series: [
{
data: [, , , , , , ],
type: 'line',
boundaryGap: false,
areaStyle: { color: '#666' },
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例：
此外，color 还传入渐变配置对象，实现渐变，示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_708_2@: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: { type: 'value' },
series: [
{
data: [, , , , , , ],
type: 'line',
boundaryGap: false,
areaStyle: {
// 传入渐变对象实例
color: new echarts.graphic.LinearGradient(, , , , [
{
offset: ,
color: 'rgb(0, 255, 102)',
},
{
offset: ,
color: 'rgb(0, 102, 102)',
},
]),
},
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例：
渐变可通过线性渐变类 、径向渐变类 声明。
color 还传入 HTMLImageElement 对象，实现背景图像配置，示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<img id="img" src="../assets/imooc-.png" alt="" style="width: ;" />
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_708_2@: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: { type: 'value' },
series: [
{
data: [, , , , , , ],
type: 'line',
boundaryGap: false,
areaStyle: {
color: { image: document.getElementById('img'), repeat: 'repeat' },
},
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例：
上例 color 对象接受两个配置：
除上述情况外，部分特殊组件的 areaStyle.color 还传入数组，配置多个背景。例如直角坐标轴组件的 ，示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
< charset="utf-8" />
< http-equiv="X-UA-Compatible" content="IE=edge" />
< name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Echarts Example</title>
</head>
<body>
<img id="img" src="../assets/imooc-.png" alt="" style="width: ;" />
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_708_2@: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
splitArea: {
show: true,
areaStyle: {
color: ['#009966', 'transparent', '#66CCFF', 'transparent'],
},
},
},
yAxis: { type: 'value' },
series: [
{
data: [, , , , , , ],
type: 'line',
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
示例：
复数背景色配置的组件汇总如下：
另外，本文讨论的是 areaStyle 的基类，也就是最基础的集。各个组件在继承、实现时会因组件的特性而略有变化，所以实际应用中可查阅配置文档，根据文档的说明进行开发。
602392714
清零编程群