ECharts 设置柱状图的每个柱子的颜色不一样，显示数据，并自定义单位，

xiaoerlang715

于 2019-06-10 16:17:27 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/xiaoerlang715/article/details/91382466

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用ECharts配置丰富的柱状图，包括自定义柱子颜色、调整柱子间隔、数据标签显示及单位设定。通过具体代码示例，读者可以了解如何在图表中实现美观且信息丰富的数据呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

series: [
{
type: 'bar',
barCategoryGap:'40%',
//设置柱子的颜色
itemStyle: {
normal: {
color: function(params) {
// build a color map as your need.
var colorList = [
'#ffb400','#00ff4e','#ff0000','#00ddff','#baff00',
'#00ff06'
];
return colorList[params.dataIndex]
}
}
},
//设置柱子的数据,并且居右边+单位
label: {
normal: {
show: true,
formatter: '{b}({c}万)',
position: "right",
textStyle: {
color: "#fff",
fontSize: 14
}
}
},
data:[
{
   value:10,name:'生产加工'
},
{
   value:'7',name:'主管部门'
},
{
   value:'5',name:'物资企业'
},
{
   value:'3',name:'加工企业'
},
{
   value:'2',name:'经销企业'
},
{
   value:'10',name:'其他'
}
],

}
]
};