上代码
<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
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦