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
