话不多说,上效果图
代码如下:
<template>
<div class="bar" ref="bar" style="width:100%;height:100%"></div>
</template>
<script>
export default {
data() {
return {};
},
props:['data'],
mounted(){
this.$nextTick(()=>{
this.drawBar()
})
},
methods: {
drawBar() {
let MyEchart = this.$echarts.init(this.$refs.bar);
MyEchart.setOption({
xAxis: {
type: "category",
data: this.data[0],
},
yAxis: {
type: "value",
},
series: [
{
data: this.data[1],
type: "bar",
label:{ //每个柱条上方有对应的数字
show:true,
position: 'top',
color:'#000',
},
itemStyle:{ //编辑柱条颜色,也可以是单一字符串如:'pink'
color:function(params) {
//给出颜色组
var colorList =['#1363F1', '#44E448', '#EC6941', '#C7E0FE', '#EEBB1E', '#654B4B', '#3E9DE7', '#247220', '#D8225A', '#D9ED4F', '#E48E64', '#F697D4', '#8957A1', '#C38E32']
return colorList[params.dataIndex]
},
}
},
],
});
},
},
};
</script>
<style>
</style>