ECharts 使用series.lineStyle.type设置虚线（两种）

我会带着你远行 2023-10-06 12:49 44阅读 0赞

### 1 使用详解 ###

**series.lineStyle.type**

说明：线条类型。

默认值：'solid'。

参数类型：string。

可选值：

（1）'solid'，实线。

（2）'dotted'，点型虚线。

（3）'dashed'，线性虚线。

### 2 原始效果图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

### 3 实现代码 ###

var option = {
        title: {
            text: '第一个 ECharts 实例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20],
            itemStyle:{
                normal:{
                    lineStyle:{
                        width:2,
                        type:'dotted'  //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
                    }
                }
            }, 
        }]
    };

### 4 最终效果图 ###

#### 4.1 最终效果图（dotted点型虚线）： ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1][]

#### 4.2 最终效果图（dashed线型虚线）： ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 2][]

[旭东怪的个人空间-旭东怪个人主页-哔哩哔哩视频哔哩哔哩旭东怪的个人空间，提供旭东怪分享的视频、音频、文章、动态、收藏等内容，关注旭东怪账号，第一时间了解UP注动态。人生低谷不可怕，可怕的是坚持不到人生转折点的那一天![1d5330f89298af44e002d6b2230b47659e28c05a.jpg][]https://space.bilibili.com/484264966?spm\_id\_from=333.1007.0.0][-_-_UP_1d5330f89298af44e002d6b2230b47659e28c05a.jpg_https_space.bilibili.com_484264966_spm_id_from_333.1007.0.0]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200710173429204.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200710173710963.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200713092746457.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[1d5330f89298af44e002d6b2230b47659e28c05a.jpg]: https://i1.hdslb.com/bfs/face/1d5330f89298af44e002d6b2230b47659e28c05a.jpg
[-_-_UP_1d5330f89298af44e002d6b2230b47659e28c05a.jpg_https_space.bilibili.com_484264966_spm_id_from_333.1007.0.0]: https://space.bilibili.com/484264966?spm_id_from=333.1007.0.0