目录
需求:
自定义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)"
}
}
]