echarts实现柱形图的每个柱子不同颜色并带图例.pdfVIP

echarts实现柱形图的每个柱⼦不同颜⾊并带图例 这⾥写⾃定义⽬录标题 啊，最近⼯ ⼀直在做图表，没有UI，⾃⼰瞎做，做出来⼀版给⽼⼤看，⽼⼤说不⾏，好，我改。第⼆版做出来后，⽼⼤说，你这个柱状图 把他变成每个柱⼦颜⾊不⼀样，再加⼀个图例，可是我这只有⼀层数据，⼀个横坐标⼀个纵坐标就可以解决了，为什么让我加图例，我去看 了看echarts官⽅，⼀层数据确实没有办法加图例，咋办啊，拆吧。 原图 讲真，原图没了，给看看差不多的例⼦吧 就这样吧 然后新的图长这样 （不知道算不算泄露公司机密，我马赛克⼀下吧） 思路就是把⼀层数据的data数组变成⼀层数据的多个data数组，⼀个数组只有⼀个数据，不过这样要牺牲横坐标，横坐标就设置⼀个空数据 或者其他你想使⽤的数据即可 代码奉上 var options = { divideData(){ //数据什么的都是瞎编的，依据⾃⼰的情况就可以了 return [{name:aaa,value:100},{name:bbb,value: 00},{name:bbb,value: 00},{name:bbb,value: 00},{name:bbb,value: 00},{name:bbb,value: 00}, {name:bbb,value: 00},{name:bbb,value: 00},{name:bbb,value: 00}].map((ele) ={ return { type: bar, name: ele[name], //重点 data的设置，⼀次⼀个数据 data: [ele[value]], label:{ show :true, formatter: {c}\n{a}, position:top } } }) }, title: { text : this.title, x :center }, tooltip:{}, xAxis:{ data:[], }, yAxis:{ type:value, axisLabel: { textStyle: { color: #999 } } }, dataZoom: [ { type: inside } ], legend : { top: 0, left :100 }, series: this.divideData() }