极客观点
项目管理
HarmonyOS
图表的文本数据本来是一层白色的轮廓的,因为图表底色是白色的,因此在 canvas 下看不到这个轮廓。但是转化为视频后,会在这个白色的轮廓的最外边缘多出黑色的边缘,导致轮廓在视频中可以看到。请问一下为什么转化为视频后轮廓外沿会有黑影?而且如果把 label 的 textBorderColor 设置为 'black',就会消除这个黑影,而设置 textBorderWidth 为 0 并不会消除这个黑影。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=2.0, minimum-scale=0.5"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="renderer" content="webkit" />
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.common.js"></script>
</head>
<body>
<video style="width: 100%; height: 200px;" id="video" autoplay>
/>
</video>
<button onclick="setCanvas()">设置 canvas 作为视频源</button>
<div id="canvas" style="width: 600px; height: 300px"></div>
<script>
const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const echart = echarts.init(canvas, null, {
devicePixelRatio: 2,
});
var data = [];
for (let i = 0; i < 5; ++i) {
data.push(Math.round(Math.random() * 200));
}
const realtimeSortOptions = {
xAxis: {
max: "dataMax",
},
yAxis: {
type: "category",
data: ["A", "B", "C", "D", "E"],
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
max: 2, // only the largest 3 bars will be displayed
// animation : false
},
series: [
{
realtimeSort: true,
name: "X",
type: "bar",
data: data,
label: {
show: true,
position: "right",
valueAnimation: true,
textBorderWidth: 0
},
},
],
legend: {
show: true,
},
animationDuration: 3000,
animationDurationUpdate: 3000,
animationEasing: "linear",
animationEasingUpdate: "linear",
};
echart.setOption(realtimeSortOptions);
function update() {
var data = realtimeSortOptions.series[0].data;
for (var i = 0; i < data.length; ++i) {
if (Math.random() > 0.9) {
data[i] += Math.round(Math.random() * 2000);
} else {
data[i] += Math.round(Math.random() * 200);
}
}
echart.setOption(realtimeSortOptions);
}
setInterval(function () {
update();
}, 3000);
function setCanvas() {
const canvas = echart.getDom().querySelector('canvas')
const width = canvas.style.width
const height = canvas.style.height
video.style.width = width
video.style.height = height
const stream = canvas.captureStream()
video.srcObject = stream
}
</script>
</body>
</html>
如果将
textBorderColor设置为黑色（'black'），那么黑色边框会覆盖文字轮廓周围的模糊效果或透明部分，从而 视觉上 消除了黑影的出现而设置
textBorderWidth为 0 仅仅只控制了文本边框的宽度，并 不涉及 颜色，转换时可能仍然会显示黑影也就是说黑色轮廓是 始终存在 的，只是前者从视觉上看不清了
至于出现黑色轮廓的原因，我想应该是
ECharts默认启用了文字阴影效果，导致文本周围出现黑色边框可以尝试配置全局文字阴影为透明：
或者单独设置文字阴影：