vue echart图表,vue echarts图表
这篇文章主要为大家详细介绍了vue echart实现双柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue echart实现双柱状图的具体代码，供大家参考，具体内容如下
效果图：
一、安装
版本号建议安装"埃查尔兹":^4.8.0,其它版本初始化会报错
1、 首先需要安装展示依赖包
新公共管理安装-保存echarts@4.8.0
2、 或者使用国内的淘宝镜像：
NPM安装-g cnpm-registry=https://注册表。NPM。淘宝。（同organic）有机
模板
div class=echarts_con
差异
echarts_main
ref=dialog_root
title=节点指标
@close=hideData()
！-负载情况-
差异
ref=bar_dv
:style={
宽度："100%",
最小高度："300像素",
}
/div
/div
/div
/模板
脚本
从"电子海图"导入电子海图
//从""导入我的图标./image/hot_icon.png //自定义图标
//从""导入平均图标./image/hot_icon.png
导出默认值{
名称："电子海图",
data () {
返回{
maxStr: 400，
yInterval: 80，
我的数据：[122,45,67,78,46],
平均数据：[32,34,6,73,84,40]
}
},
//外部传入数据的话要监听数据开始
//道具：{
//myData: {
//类型：数组，
//默认值：[]
//},
//averageData: {
//类型：数组，
//默认值：[]
//}
//},
//计算的：{
//address () {
//const { myData，averageData }=this
//返回{
//myData，
//averageData
//}
//}
//},
//观察：{
//地址：{
//handler: function (val) {
//this.compare(val.myData，val.averageData)
//设newArr=val。我的数据。concat(val。平均数据)
//let maxNum=Math.max(.newArr)
//this.maxStr=maxNum
//if (maxNum=500) {
//this.yInterval=200
//}其他{
//this.yInterval=50
//}
//this.drawLine(val.myData，val.averageData)
//},
//deep: true
//}
//},
//mounted () {
//这个. nextTick(function () {
//这个。drawline()；
//});
//},
//外部传入数据的话要监听数据目标
已安装(){
this.drawLine(this.myData，this.averageData)
},
方法：{
//判断一一对应数据低于平均就提示
比较(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
}否则{
this.isCompare=false
}
},
单击关闭(){
this.isCompare=false
},
/*负载情况图标*/
绘制线(a，b) {
var my data=a；
var平均数据=b；
设bar_dv=this .$ refs.bar _ dv
让我的图表=echarts。init(bar _ dv)；
var auto height=parse int(this。maxstr/100)* 10 100；
我的图表。getdom()样式。height=自动高度 px ；
我的图表。resize()；//自适应高度
//绘制图表
myChart.setOption({
标题：{文本： 报表展示 },
网格：{
//左：40,
可包含：真
},
工具提示：{},
xAxis: {
数据：[看过我的, 沟通过的, 收到简历, 曝光人数],
轴线：{
线型：{
类型："实心",
color: #eeeeee ，//x左边线的颜色
fontSize: 13，
宽度： 0.5 //坐标线的宽度
}
},
axisLabel: { //x轴字体
textStyle: {
颜色： #333333 ,
字体大小：13
}
},
},
亚西斯：{
类型："值",
最小值：0,
max: this.maxStr，
区间：this.yInterval，
轴线：{
线型：{
类型："实心",
颜色： #fff ，//左边线的颜色
宽度： 0.5 //坐标线的宽度
}
},
axisLabel: {
textStyle: {
颜色： #333333 ,
字体大小：13
}
},
分割线：{
秀：真的，
线型：{
颜色：[ # eeeee ]，
宽度：1,
类型："实心"
}
}
},
图例：{
项目宽度：11,
项目高度：12,
symbolKeepAspect: true，
textStyle: {
fontSize: 11，
行高：0,
背景色： rgba(11，164，19，1)
},
//icon: `image://${averageIcon} `，
数据：[
{
名称： 我的，
//icon: `image://${myIcon}`//自定义小图标
},
{
名称： 行业平均，
//icon:` image://${ average icon }
}
],
对齐："左",
右：40,
顶部："0",
textStyle: {
fontSize: 12，
文本对齐："居中",
颜色： #333333 ,
马格林赖特：3
},
},
系列：[{
名称： 我的，
类型："条形",
数据：myData，
条宽：16,//柱子宽度
barGap: 50% ，//间距
标签:{
秀：真的，
位置："顶部",
textStyle: {
颜色： #4695F3
},
格式化程序：函数（参数){
返回参数值
}
},
项目样式：{
正常：{
颜色：新款echarts。图形。线性梯度(0，0，0，1，[{
偏移量：0,
颜色： #A5CCF6
}, {
偏移量：1,
颜色： #4695F3
}]),
barBorderRadius: [4，4，0，0]，
}
}
},
{
名称： 行业平均，
类型："条形",
数据：平均数据，
条宽：16,
barGap:“50%”，
标签:{
秀：真的，
位置："顶部",
textStyle: {
颜色： #FE8401
},
格式化程序：函数（参数){
返回参数值
}
},
项目样式：{
正常：{
颜色：新款echarts。图形。线性梯度(0，0，0，1，[{
偏移量：0,
颜色： #FFB235
}, {
偏移量：1,
颜色： #FE8401
}]),
barBorderRadius: [4，4，0，0]，
},
重点：{
barBorderRadius: 30
},
}
}
]
},真);
},
hideData () {
这个emit(hideDialog )
},
确认(){
这个。hidedata()；
},
}
}
/脚本
样式范围。echarts_con {
宽度：100%;
边距：0自动；
边距-顶部：8px
边框半径：20px
背景：# fff
垫底：35px
}。echarts_main {
宽度：100%;
边距：0自动；
padding-top:20px；
边距-底部：-32px；
右边距：20px
左边距：20px
}。底部{
宽度：90%;
边距：0自动；
背景：# fef8e1
边框-半径：6px
身高：100%;
边距-顶部：16px
}。底部图标
宽度：90%;
边距：0自动；
显示器：flex
justify-content:space-between；
对齐-项目：居中；
高度：34px
行高：34px
}。bottom_text {
高度：34px
行高：34px
字体大小：13px
字体系列：方平，方平-SC；
font-weight:SC；
文本对齐：左对齐；
颜色：# fa 5d 1d
}。右_关闭{
宽度：13px
高度：13px
}
/风格
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。