echarts折线图动态修改折线颜色

本文介绍如何在Echarts中动态修改折线图的线条颜色、线宽、数值点颜色以及图例颜色。通过调整series.itemStyle.normal属性,实现包括拐点、图例在内的整体样式更新,确保样式一致。

需求
选择每条线的颜色、粗细绘制折线图。
解决
动态修改option中对应的样式属性即可。查看echarts官方文档,进行了如下修改。

修改一(明显有问题可跳过,仅做记录。)

效果一:

在这里插入图片描述

配置一:

option = {
    ……
    "series": [
        {
            ……,
            "markPoint": {
                "data": [
                    {
                        "type": "max",
                        "name": "最大值"
                    },
                    {
                        "type": "min",
                        "name": "最小值"
                    }
                ],
                // 仅仅修改标注点颜色
                itemStyle: {
                  color: '4EC43E'
                }
            },
            // 仅仅修改折线段的颜色
            "lineStyle": {
                "color": "#4EC43E",
                "width": 2
            }
        },
        {
            ……,
            "markPoint": {
                "data": [
                    {
                        "type": "max",
                        "name": "最大值"
                    },
                    {
                        "type": "min",
                        "name": "最小值"
                    }
                ],
                // 仅仅修改标注点颜色
                itemStyle: {
                  color: 'DE1919'
                }
            },
            // 仅仅修改折线段的颜色
            "lineStyle": {
                "color": "#DE1919",
                "width": 6
            }
        }
    ]
};

问题一:

很明显,拐点处、图例处的颜色都没改到。

修改二(正解)

效果二:

在这里插入图片描述

配置二:

option = {
    ……
    "series": [
        {
            ……,
            "markPoint": {
                "data": [
                    {
                        "type": "max",
                        "name": "最大值"
                    },
                    {
                        "type": "min",
                        "name": "最小值"
                    }
                ]
            },
            "itemStyle": {
                "normal": {
                    "color": "#4EC43E",
                    "lineStyle": {
                        "color": "#4EC43E",
                        "width": 2
                    }
                }
            }
        },
        {
            ……,
            "markPoint": {
                "data": [
                    {
                        "type": "max",
                        "name": "最大值"
                    },
                    {
                        "type": "min",
                        "name": "最小值"
                    }
                ]
            },
            "itemStyle": {
                "normal": {
                    "color": "#DE1919",
                    "lineStyle": {
                        "color": "#DE1919",
                        "width": 6
                    }
                }
            }
        }
    ]
};

说明二:

设置series[i].itemStyle.normal即对当前折线对应的所有颜色一并修改。
包括折线颜色、宽度、数值点(圈圈)颜色、标注点(最大最小值)颜色、图例颜色。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值