echart vue3 柱状图自定义柱子颜色和文字颜色

二豆是富婆

于 2024-09-03 09:20:54 发布

阅读量44

点赞数

文章标签：信息可视化

本文链接：https://blog.csdn.net/zxt1195229475/article/details/141825528

版权

需求：

效果：

编辑数据格式：series

需求：

自定义echart柱状图的柱子颜色

并且每根柱子上数字的颜色要跟柱状图的颜色保持一致

效果：

数据格式：series

[
    {
        "name": "预算",
        "data": [
            {
                "itemStyle": {
                    "color": "#CDD2DB"
                },
                "label": {
                    "textStyle": {
                        "color": "#CDD2DB"
                    }
                },
                "value": "40.4"
            },
            {
                "itemStyle": {
                    "color": "#CDD2DB"
                },
                "label": {
                    "textStyle": {
                        "color": "#CDD2DB"
                    }
                },
                "value": "88.5"
            },
            {
                "itemStyle": {
                    "color": "#CDD2DB"
                },
                "label": {
                    "textStyle": {
                        "color": "#CDD2DB"
                    }
                },
                "value": "29.1"
            },
            {
                "itemStyle": {
                    "color": "#CDD2DB"
                },
                "label": {
                    "textStyle": {
                        "color": "#CDD2DB"
                    }
                },
                "value": "66.6"
            }
        ],
        "type": "bar",
        "barWidth": "10",
        "barMaxWidth": "10",
        "barMinWidth": "0",
        "barGap": "0",
        "showBackground": false,
        "itemStyle": {
            "normal": {
                "barBorderRadius": [
                    2,
                    2,
                    2,
                    2
                ],
                "label": {
                    "confine": true,
                    "show": true,
                    "position": "top",
                    "textStyle": {
                        "color": "#C09F88",
                        "fontSize": 10
                    }
                }
            }
        },
        "backgroundStyle": {
            "color": "rgba(255, 255, 255, 0.1)"
        }
    },
    {
        "name": "实际",
        "data": [
            {
                "itemStyle": {
                    "color": "#31D029"
                },
                "label": {
                    "textStyle": {
                        "color": "#31D029"
                    }
                },
                "value": "51.8"
            },
            {
                "itemStyle": {
                    "color": "#ED1A2C"
                },
                "label": {
                    "textStyle": {
                        "color": "#ED1A2C"
                    }
                },
                "value": "87.7"
            },
            {
                "itemStyle": {
                    "color": "#31D029"
                },
                "label": {
                    "textStyle": {
                        "color": "#31D029"
                    }
                },
                "value": "36.8"
            },
            {
                "itemStyle": {
                    "color": "#31D029"
                },
                "label": {
                    "textStyle": {
                        "color": "#31D029"
                    }
                },
                "value": "70.3"
            }
        ],
        "type": "bar",
        "barWidth": "10",
        "barMaxWidth": "10",
        "barMinWidth": "0",
        "barGap": "200%",
        "showBackground": false,
        "itemStyle": {
            "normal": {
                "barBorderRadius": [
                    2,
                    2,
                    2,
                    2
                ],
                "label": {
                    "confine": true,
                    "show": true,
                    "position": "top",
                    "textStyle": {
                        "color": "#C09F88",
                        "fontSize": 10
                    }
                }
            }
        },
        "backgroundStyle": {
            "color": "rgba(255, 255, 255, 0.1)"
        }
    }
]