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"><divclass="echarts_main"ref="dialog_root"title="节点指标"@close="hideData()"><!--负载情况--><divref="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();// });// },//外部传入数据的话要监听数据endmounted () {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实现双柱状图相关推荐

Vue：echarts的柱状图怎样按照比例缩小？
Vue:echarts的柱状图怎样按照比例缩小? 资源: vue制作echart图表随着画面等比例放大缩小第二种方法:在div中使用echarts,利用div的参数来限制echarts生成的图表的大 ...
vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
vue页面参数传递(VUE+echart+map联动实例)
我们在使用vue的时候经常会遇到页面参数传递,相比之前JavaScript操作,js入参传参,js之间方法调用只要我们引入js就可以相互调用,但是vue里面的不太一样,主要涉及有三种方式,父子传参,子 ...
Vue：echarts的柱状图为什么X轴上的文字不显示？
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
python绘制直方图显示数字_Python实现绘制双柱状图并显示数值功能示例
本文实例讲述了Python实现绘制双柱状图并显示数值功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #! python3 import matplotlib.py ...
python画并列柱状图-Python实现绘制双柱状图并显示数值功能示例
本文实例讲述了Python实现绘制双柱状图并显示数值功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #! python3 import matplotlib.py ...
echarts legend颜色_echarts数据可视化图表（二）：双柱状图
echarts数据可视化图表(二):双柱状图效果图: html js var loadEcharts09 = function () { var myChartss = echarts.init(d ...
Vue + echart 实现中国地图和省市地图（可切换省份
vue + echart 实现中国地图和省市地图(可切换省份) - 伏沙金 - 博客园
双柱状图与双折线图混合
问题: 双柱状图的时候,折线图不能从柱状图的中心点开始解决方法:使用双x轴来控制折线的起始位置代码 var option = {backgroundColor:'#4a4a4a',tooltip: ...

vue+echart实现双柱状图

vue+echart实现双柱状图相关推荐

最新文章

热门文章