在 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>