本篇内容主要讲解“怎么用vue和echart实现双柱状图”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用vue和echart实现双柱状图”吧!
本文实例为大家分享了vue+echart实现双柱状图的具体代码，供大家参考，具体内容如下
效果图：
版本号建议安装"echarts": "^4.8.0”，其它版本init会报错
1、 首先需要安装echarts依赖包
计算
安全
数据库
网络和加速
企业服务
npm install --save echarts@4.8.02、 或者使用国内的淘宝镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
<template>
<div class="echarts_con">
<div
class="echarts_main"
ref="dialog_root"
title="节点指标"
@close="hideData()"
>
<!--负载情况-->
<div
ref="bar_dv"
:style="{
width: '100%',
minHeight: '300px',
}"
></div>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
// import myIcon from './image/hot_icon.png' //自定义图标
// import averageIcon from './image/hot_icon.png'
export default {
name: "Echarts",
data () {
return {
maxStr: 400,
yInterval: 80,
myData: [122, 45, 67, 78, 46],
averageData: [32, 34, 6, 73, 84, 40]
}
},
//外部传入数据的话要监听数据start
// props: {
// myData: {
// type: Array,
// default: []
// },
// averageData: {
// type: Array,
// default: []
// }
// },
// computed: {
// address () {
// const { myData, averageData } = this
// return {
// myData,
// averageData
// }
// }
// },
// watch: {
// address: {
// handler: function (val) {
// this.compare(val.myData, val.averageData)
// let newArr = val.myData.concat(val.averageData)
// let maxNum = Math.max(...newArr)
// this.maxStr = maxNum
// if (maxNum >= 500) {
// this.yInterval = 200
// } else {
// this.yInterval = 50
// }
// this.drawLine(val.myData, val.averageData)
// },
// deep: true
// }
// },
// mounted () {
// this.$nextTick(function () {
// this.drawLine();
// });
// },
//外部传入数据的话要监听数据end
mounted () {
this.drawLine(this.myData, this.averageData)
},
methods: {
//判断一一对应数据低于平均就提示
compare (arr1, arr2) {
if (arr1[0] < arr2[0]) {
this.isCompare = true
} else if (arr1[1] < arr2[1]) {
this.isCompare = true
} else if (arr1[2] < arr2[2]) {
this.isCompare = true
} else if (arr1[3] < arr2[3]) {
this.isCompare = true
} else {
this.isCompare = false
}
},
clickClose () {
this.isCompare = false
},
/*负载情况图标*/
drawLine (a, b) {
var myData = a;
var averageData = b;
let bar_dv = this.$refs.bar_dv;
let myChart = echarts.init(bar_dv);
var autoHeight = parseInt(this.maxStr / 100) * 10 + 100;
myChart.getDom().style.height = autoHeight + "px";
myChart.resize(); //自适应高度
// 绘制图表
myChart.setOption({
title: { text: '报表展示' },
grid: {
// left: 40,
containLable: true
},
tooltip: {},
xAxis: {
data: ["看过我的", "沟通过的", "收到简历", "曝光人数"],
axisLine: {
lineStyle: {
type: 'solid',
color: '#eeeeee', //x左边线的颜色
fontSize: 13,
width: '0.5' //坐标线的宽度
}
},
axisLabel: { //x轴字体
textStyle: {
color: '#333333',
fontSize: 13
}
},
},
yAxis: {
type: 'value',
min: 0,
max: this.maxStr,
interval: this.yInterval,
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff', //左边线的颜色
width: '0.5' //坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#333333',
fontSize: 13
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#eeeeee'],
width: 1,
type: 'solid'
}
}
},
legend: {
itemWidth: 11,
itemHeight: 12,
symbolKeepAspect: true,
textStyle: {
fontSize: 11,
lineHeight: 0,
backgroundColor: "rgba(11, 164, 19, 1)"
},
// icon: `image://${averageIcon}`,
data: [
{
name: '我的',
// icon: `image://${myIcon}`//自定义小图标
},
{
name: '行业平均',
// icon: `image://${averageIcon}`
}
],
align: 'left',
right: 40,
top: '0',
textStyle: {
fontSize: 12,
textAlign: 'center',
color: '#333333',
magrinRight: 3
},
},
series: [{
name: '我的',
type: 'bar',
data: myData,
barWidth: 16, //柱子宽度
barGap: '50%',//间距
label: {
show: true,
position: 'top',
textStyle: {
color: '#4695F3'
},
formatter: function (params) {
return params.value
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#A5CCF6'
}, {
offset: 1,
color: '#4695F3'
}]),
barBorderRadius: [4, 4, 0, 0],
}
}
},
{
name: '行业平均',
type: 'bar',
data: averageData,
barWidth: 16,
barGap: '50%',
label: {
show: true,
position: 'top',
textStyle: {
color: '#FE8401'
},
formatter: function (params) {
return params.value
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFB235'
}, {
offset: 1,
color: '#FE8401'
}]),
barBorderRadius: [4, 4, 0, 0],
},
emphasis: {
barBorderRadius: 30
},
}
}
]
}, true);
},
hideData () {
this.$emit("hideDialog")
},
confirm () {
this.hideData();
},
}
}
</script>
<style scoped>
.echarts_con {
width: 100%;
margin: 0 auto;
margin-top: 8px;
border-radius: 20px;
background: #fff;
padding-bottom: 35px;
}
.echarts_main {
width: 100%;
margin: 0 auto;
padding-top: 20px;
margin-bottom: -32px;
margin-right: 20px;
margin-left: 20px;
}
.bottom {
width: 90%;
margin: 0 auto;
background: #fef8e1;
border-radius: 6px;
height: 100%;
margin-top: 16px;
}
.bottom_con {
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
height: 34px;
line-height: 34px;
}
.bottom_text {
height: 34px;
line-height: 34px;
font-size: 13px;
font-family: PingFang, PingFang-SC;
font-weight: SC;
text-align: left;
color: #fa5d1d;
}
.right_close {
width: 13px;
height: 13px;
}
</style>到此，相信大家对“怎么用vue和echart实现双柱状图”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
