在 Echarts 中旋转图表标题？

Question

在Apache Echarts中，有没有办法旋转图表的标题文本，使其在一侧垂直，而不是在顶部水平？ 顶部的标题有时会占用重要的图表空间，在某些情况下我的系列可能会重叠。 我想在空间紧缩时指示 Echarts 将标题移到垂直 position 的左侧（就像在图书馆阅读书脊上的标题）。 标签似乎有几个“旋转”选项，但标题没有。

Answer 1

如果您使用默认的canvas 渲染器，我不确定您是否可以旋转主标题。 在这种情况下，您可能想像这样使用yAxis的名称：

 const myChart = echarts.init(document.getElementById('main')); let option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', name: 'This is my title', nameLocation: 'center', nameRotate: 90, nameGap: 45, nameTextStyle: { color: 'black', fontSize: 18, fontWeight: 'bold' } }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] }; myChart.setOption(option);

 #main { width: 100%; height: 350px; }

 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script> <div id="main"></div>

或者，您可以使用SVG 渲染器并添加一点 CSS 来转换主标题（这是一个<text>元素）：

 const myChart = echarts.init(document.getElementById('main'), null, { renderer: 'svg' }); let option = { title: { text: 'This is my title' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] }; myChart.setOption(option);

 #main { width: 100%; height: 350px; } svg g text:last-child { transform: rotate(-90deg) translateX(-250px); }

 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script> <div id="main"></div>