ECharts 文本样式
在 ECharts 图表中除了核心的各式各样的图表，剩下的应该就是那些文本了，的描述也是直接关系到整个图表的意义，的样式有同样决定了图表的美观程度，优秀的图表类型选择合适的文本样式才能组成最漂亮的图表。这个小节我们就从各个方面去看一下如何对图表中的文本进行美化吧。
在 ECharts 的各个组件、图表中，充斥着许多与文本相关的配置，比如 title 组件的 textStyle、subTextStyle ； legend 组件的 textStyle ；line 图表的 label 等等。可以说，但凡与文本有关的，都可以参考本文的配置说明。
针对文本项，ECharts 提供了一套通用的配置，包含：
与 CSS 中的 font-family 相似，ECharts 的 fontFamily 同样浏览器中包含的所有字体类型，也同样可以设置为字体。基于这种能力，可以实现在 ECharts 文本组件上勾画图标，示例：
<!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>
<link href="//cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
</head>
<body>
<!-- 强制触发浏览器加载字体 -->
<i class="fa fa-user" style="font-size: ;"></i>
<div id="main" style="width: px;height: px"></div>
<script src="//cdn.bootcss.com/echarts/4.5.0/echarts.common.js">@H__521@</script>
<script type="text/javascript">@H__521@
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_814_2@: {
feature: {
saveAsImage: {},
},
},
title: {
// 字体需要使用 unicode 编码格式表示
// 如本例中的 `\uf007`
text: '字体测试 \uf007',
textStyle: {
fontSize: ,
// 若字体中带有空格，需要使用 `"` 包围
fontFamily: '"Font Awesome 5 Free"',
},
},
};
// 如果渲染时字体还没加载完，字体会被为空
// 所以这里需要延迟渲染
setTimeout(() => {
myChart.setOption(option);
}, );
</script>
</body>
</html>
实例：
需要注意几个关键点：
可通过 textBorderColor、textBorderWidth 实现描边，示例：
<!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">@H__521@</script>
<script type="text/javascript">@H__521@
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_814_2@: {
feature: {
saveAsImage: {},
},
},
title: {
text: '字体测试\n第二行',
left: '30%',
top: '30%',
textStyle: {
fontSize: ,
textBorderWidth: ,
textBorderColor: '#ddd',
lineHeight: ,
},
},
};
// 如果渲染时字体还没加载完，字体会被为空
// 所以这里需要延迟渲染
setTimeout(() => {
myChart.setOption(option);
}, );
</script>
</body>
</html>
示例：
与 rect 类型的组件相似，文本组件也阴影，可通过 textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY 控制，示例：
<!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">@H__521@</script>
<script type="text/javascript">@H__521@
var myChart = echarts.init(document.getElementById('main'));
var option = {
tool@R_814_2@: {
feature: {
saveAsImage: {},
},
},
title: {
text: 'title shadow 测试',
left: '30%',
top: '30%',
textStyle: {
fontSize: ,
textShadowColor: '#000',
textShadowBlur: ,
textShadowOffsetX: ,
textShadowOffsetY: ,
},
},
};
myChart.setOption(option);
</script>
</body>
</html>
示例：
602392714
清零编程群