vue+echart实现双柱状图
更新时间：2021年09月05日 10:47:58 作者：知命者夏洛特
这篇文章主要为大家详细介绍了vue+echart实现双柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue+echart实现双柱状图的具体代码，供大家参考，具体内容如下
效果图：
一、安装
版本号建议安装"echarts": "^4.8.0”，其它版本init会报错
1、 首先需要安装echarts依赖包
npm install --save echarts@4.8.0
2、 或者使用国内的淘宝镜像：
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue3 TypeScript 实现useRequest详情
本文介绍了Vue3 TypeScript实现useRequest详情，useRequest可能是目前社区中最强大，最接地气的请求类 Hooks了。可以覆盖99%的网络请求场景，无论是读还是写，无论是普通请求还是分页请求，无论是缓存还是防抖节流，通通都能支持，关于其介绍需要的小伙伴可以参考一下2022-05-05
众所都知vue是一个单页面应用,下面这篇文章主要给大家介绍了关于vue单页面改造多页面应用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了在Vue中使用Select选择器拼接label的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要为大家详细介绍了vue实现手机验证码登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要给大家介绍了关于Vue中extends继承和组件复用性的相关资料,组件(Component)是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Vue 实现手动刷新组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了vue实现绑定事件的方法实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue路由守卫+登录态管理,结合实例形式分析了vue路由守卫与登录态管理相关操作步骤与实现技巧,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了VUE中的filters过滤器使用方法，文章主要通过描述全局过滤器、全局过滤器之单一挂载、全局过滤器之批量挂载 、组件过滤器展开内容，具有一定的参考价值组要的小伙伴可以参考一下2022-03-03
这篇文章主要介绍了vue中的Key值重复问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论