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

本文主要是介绍echart vue3 柱状图 自定义柱子颜色和文字颜色，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

需求：

效果：

​编辑数据格式：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)"}}
]

这篇关于echart vue3 柱状图 自定义柱子颜色和文字颜色的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---