echarts 柱状图圆柱_Echarts柱状图每根柱子设置不同柱子颜色

送一张我最近很喜欢的手机壁纸给大家

先来直接看下实现效果

截图效果

上代码

export default {

name: "Bar",

data() {

return {};

},

mounted() {

this.drawBar();

},

methods: {

drawBar: function() {

// 基于准备好的dom，初始化echarts实例

let myChart = this.$echarts.init(document.getElementById("main"));

let option = {

//标题配置信息

title: {

text: "这个是主标题",

textStyle: {

color: "#B03A5B",

fontWeight: "bolder"

},

subtext: "这个是副标题",

subtextStyle: {

color: "#1AAC1A",

fontWeight: "bolder"

},

left: "center"

},

xAxis: {

type: "category",

data: [

"Mon",

"Tue",

"Wed",

"Thu",

"Fri",

"Sat",

"Sun",

"Mon1",

"Tue1",

"Wed1",

"Thu1",

"Fri1",

"Sat1",

"Sun1"

],

itemStyle: {

narmal: {

color: "orange"

}

}

},

yAxis: {

type: "value"

},

series: [

{

data: [

120,

200,

150,

80,

70,

110,

130,

80,

90,

55,

100,

88,

20,

130

],

type: "bar",

barWidth: "70%",

itemStyle: {

normal: {

//每根柱子颜色设置

color: function(params) {

let colorList = [

"#c23531",

"#2f4554",

"#61a0a8",

"#d48265",

"#91c7ae",

"#749f83",

"#ca8622",

"#bda29a",

"#6e7074",

"#546570",

"#c4ccd3",

"#4BABDE",

"#FFDE76",

"#E43C59",

"#37A2DA"

];

return colorList[params.dataIndex];

}

}

},

//柱状图上显示数据

label: {

show: "true",

position: "top",

color: "#FFF",

fontWeight: "bolder",

backgroundColor: "auto",

fontSize: "20"

},

//平均值

markLine: {

data: [{ type: "average", name: "平均值" }]

}

}

]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

}

}

};

代码里有注释，不明白或者有其他疑问的小伙伴可以私信我哦

这里卿洋

愿喜❤️