echarts圖表中如何設置部分線段為虛線？
在ECharts圖表中，靈活控制線段樣式，例如將部分線段設置為虛線，可以提升圖表可讀性和表達力。本文將詳細講解如何實現這一功能。
我們以一個示例代碼為例，假設需要將名為“混鋼筋混凝土安裝1（15天）”的線段設置為虛線。
原始代碼結構：
let charts = { nodes: [ // ... 節點數據 ], linesData: [ { name: '降水1（10天）', coords: [[20, 700], [190, 700]], type: "dotted" }, { name: '開挖1n（5天）', coords: [[220, 700], [290, 700]] }, { name: '砂石墊層1n（5天）', coords: [[320, 700], [390, 700]] }, { name: '混凝土基礎1（10天）', coords: [[420, 700], [590, 700]] }, { name: '混鋼筋混凝土安裝1（15天）', coords: [[620, 700], [890, 700]] }, { name: '土方回填1n（3天）', coords: [[920, 700], [950, 700]] }, ] }; let option = { // ... 其他配置項 series: [{ type: "lines", lineStyle: { color: '#65B7E3', width: 2, }, data: charts.linesData, }], };
實現部分線段虛線：
關鍵在于對linesData數組中特定線段的lineStyle屬性進行單獨設置。 我們將’dashed’樣式應用于目標線段：
let charts = { nodes: [ // ... 節點數據 ], linesData: [ { name: '降水1（10天）', coords: [[20, 700], [190, 700]], type: "dotted" }, { name: '開挖1n（5天）', coords: [[220, 700], [290, 700]] }, { name: '砂石墊層1n（5天）', coords: [[320, 700], [390, 700]] }, { name: '混凝土基礎1（10天）', coords: [[420, 700], [590, 700]] }, { name: '混鋼筋混凝土安裝1（15天）', coords: [[620, 700], [890, 700]], lineStyle: { type: 'dashed' } }, { name: '土方回填1n（3天）', coords: [[920, 700], [950, 700]] }, ] }; let option = { // ... 其他配置項 series: [{ type: "lines", lineStyle: { color: '#65B7E3', width: 2, }, data: charts.linesData, }], };
通過在linesData數組中，為“混鋼筋混凝土安裝1（15天）”對象添加lineStyle: { type: ‘dashed’ }，我們就成功地將其設置為虛線，而其他線段保持原樣。 這種方法允許對每條線段進行獨立的樣式控制，實現靈活的圖表定制。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
