I’m trying to adjust the textContent.width property so that it responds as follows:
When the screen size increases (CTRL +) the overflow: truncate and ellipsis: “...” appear gradually so as not to leave the element (vBox). And when it’s the other way around (CTRL -), the text appears normally inside vBox. In other words, the text must always adapt to the screen resize.
In other words, the textContent must match the size of the vBox in both cases. I managed to make the vBox responsive, but I need to adjust the text inside it as well.
document.addEventListener("DOMContentLoaded", () => {
// rounded rectangle
const valueBox = echarts.graphic.extendShape({
type: "vBox",
shape: {
r: 5
},
style: {
lineWidth: .5,
stroke: "#000",
lineDash: 'solid',
shadowBlur: 7.5,
shadowColor: '#000',
shadowOffsetX: 3,
shadowOffsetY: 3
},
buildPath: (ctx, shape) => {
echarts.graphic.Rect.prototype.buildPath.call(this, ctx, shape);
}
});
// register shape
echarts.graphic.registerShape("vBox", valueBox);
// init
const chartUse = echarts.init(document.getElementsByClassName("chart")[0]);
// dimensions
const dimensionsInit = [chartUse.getWidth(), chartUse.getHeight()];
window.addEventListener("resize", () => {
// plot resize
chartUse.resize();
// graphic resize
const dimensionsResize = [chartUse.getWidth(), chartUse.getHeight()];
chartUse.setOption({
graphic: [
{
children: [
{
shape: {
x: (dimensionsResize[0] - dimensionsResize[0] / 5) / 2, // Centraliza horizontalmente
y: (dimensionsResize[1] - dimensionsResize[1] / 5) / 2, // Centraliza verticalmente
width: dimensionsResize[0] / 5,
height: dimensionsResize[1] / 5
},
textContent: {
width: dimensionsResize[0],
overflow: 'truncate',
ellipsis: '...',
align: "center",
style: {
rich: {
text: {
lineHeight: dimensionsResize[1] / 28,
fill: '#000',
fontSize: dimensionsResize[0] / 70
}
}
}
},
textConfig: {
position: 'inside'
}
}
]
}
]
});
});
function chartFrameSwitch0 () {
const gradColor1 = new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{ offset: .5, color: "#fafac0" },
{ offset: 1, color: "#008cba" }
])
const graphic0 = [
{
type: "group",
children: [
{
type: 'vBox',
shape: {
x: (dimensionsInit[0] - dimensionsInit[0] / 5) / 2, // Centraliza horizontalmente
y: (dimensionsInit[1] - dimensionsInit[1] / 5) / 2, // Centraliza verticalmente
width: dimensionsInit[0] / 5,
height: dimensionsInit[1] / 5
},
style: {
fill: gradColor1,
lineCap: "x",
lineWidth: 2,
stroke: '#000'
},
textContent: {
style: {
text: "{text|Overflowwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwn50%}",
width: ( (dimensionsInit[0] / 10) - (dimensionsInit[0] / 10) * .15 ),
overflow: 'truncate',
stroke: '#fff',
align: "center",
rich: {
text: {
lineHeight: dimensionsInit[1] / 28,
fill: '#000',
fontSize: dimensionsInit[0] / 70
}
}
}
},
textConfig: {
position: "inside"
}
}
]
}
];
const option = {
graphic: graphic0
};
chartUse.setOption(option);
}
chartFrameSwitch0();
});<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<title>Custom Shape Example</title>
</head>
<div class="chart" style="width: 100%; height: 100vh;"></div>So how do you make the text inside a graphic component always responsive to its size?
This is the way I found, I don’t know if there is another solution that is more robust than this and perhaps simpler.
Note that you will need to run this code in an IDE and process it in the browser to check for this resizing problem.