如何在echarts中实现部分线段的虚线效果？-html教程-PHP中文网

如何在echarts中实现部分线段的虚线效果？

霞舞

发布： 2025-03-22 08:48:22

原创

319人浏览过

如何在echarts中实现部分线段的虚线效果？

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: '开挖1\n（5天）', coords: [[220, 700], [290, 700]] },
        { name: '砂石垫层1\n（5天）', coords: [[320, 700], [390, 700]] },
        { name: '混凝土基础1（10天）', coords: [[420, 700], [590, 700]] },
        { name: '混钢筋混凝土安装1（15天）', coords: [[620, 700], [890, 700]] },
        { name: '土方回填1\n（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' }，即可使其在图表中显示为虚线，而其他线段保持原有样式。这种方法能够精确控制每个线段的样式，灵活满足各种图表需求。

以上就是如何在echarts中实现部分线段的虚线效果？的详细内容，更多请关注php中文网其它相关文章！