vue+echart实现双柱状图
更新时间:2021年9月5日 16:00 点击:2175
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
上一篇: vue实现底部弹窗多选
下一篇: vue实现横向斜切柱状图
相关文章
- 这篇文章主要介绍了matplotlib bar()实现百分比堆积柱状图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-24
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01