echarts部分線段虛線效果實現詳解
在使用ECharts創建圖表時，常常需要對圖表元素進行個性化設置。例如，在繪制線段圖時，可能需要部分線段顯示為虛線，而其他線段保持實線。本文將詳細講解如何在ECharts中實現此效果，并提供代碼示例。
我們先來看一個實際案例。用戶已有一個基本的ECharts配置，但希望特定線段顯示為虛線。其代碼如下：
let charts = { nodes: [ { name: '1', value: [0, 700] }, { name: '2', value: [200, 700] }, { name: '4', value: [300, 700] }, { name: '5', value: [400, 700] }, { name: '9', value: [600, 700] }, { name: '15', value: [900, 700] }, { name: '17', value: [960, 700] }, ], 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", polyline: false, coordinateSystem: "cartesian2d", symbol: ['', 'arrow'], symbolSize: 10, label: { show: true, position: "middle", fontSize: 16, color: '#333', formatter: function (args) {}, }, lineStyle: { color: '#65B7E3', width: 2, }, data: charts.linesData, }, ], };
用戶希望將 ‘混鋼筋混凝土安裝1（15天）’ 這條線段設置為虛線。
解決方案
為了實現部分線段的虛線效果，我們需要在 charts.linesData 數組中，對需要設置為虛線的線段對象添加 lineStyle 屬性，并設置 type 為 ‘dashed’。修改后的代碼如下：
charts.linesData = [ // ...其他線段... { name: '混鋼筋混凝土安裝1（15天）', coords: [[620, 700], [890, 700]], lineStyle: { type: 'dashed' } }, // ...其他線段... ];
通過為指定的線段數據添加 lineStyle: { type: ‘dashed’ }，即可使其在圖表中顯示為虛線，而其他線段保持原有樣式。 這種方法能夠精確控制每個線段的樣式，靈活滿足各種圖表需求。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
