上代码
<template>
<div>
<!-- 承载图表的div -->
<div id="main" style="width: 100%;height:400px;"></div>
</div>
</template>
<script>
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);
}
}
}; </script>
<style scoped>
</style>
作者：神仙哥哥卿洋
链接：https://www.jianshu.com/p/2afc2b3627d7
随时随地看视频
