echarts实现立体柱状图,vue echart图表
这篇文章主要为大家详细介绍了vue Echart实现立体柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Echart Vue制作立体柱状图，供大家参考，具体内容如下
先来看一下制作完成后的效果：
废话不多说，直接上代码：
超文本标记语言代码：
div class=lineOne
span class=spanTitle 使用时长排行/span
div id= time range style= width:100%；高度：400像素
/div
/div
射流研究…部分：
timeRangeInit(xdata，ydata) {
设NC=文档。getelementbyid(“时间范围”)；
var myChart=echarts。init(NC)；
myChart.setOption({
工具提示：{
触发器："轴"
},
网格：{
顶部："15%",
左："8%",
对："12%",
底部："3%",
containLabel: true
},
xAxis: {
类型："类别",
数据：xdata，
名称：教室，
分割线：{
显示：假
},
轴棒：{
显示：假
},
轴线：{
符号：[无,箭头],
symbolSize: [15，17]，
线型：{
颜色： #000000 ,
宽度：2 //改变坐标线的颜色
}
},
axisLabel: {
//调整x轴的标签
textStyle: {
fontSize: 12，//让字体变大
}
}
},
亚西斯：{
类型："值",
名称：时长（小时),
分割线：{ //刻度线
秀：假的，
},
splitArea:{ //柱状图后面的背景色
秀：真的，
区域样式：{
颜色：[rgba(221，247，250，0.7)， rgba(245，249，232，0.7)]
}
},
轴棒：{
显示：假
},
axisLabel: {
//调整y轴的标签
textStyle: {
fontSize: 12 //让字体变大
},
显示：真实
},
轴线：{
符号：[无,箭头],
symbolSize: [15，17]，
线型：{
颜色： #000000 ,
宽度：2 //改变坐标线的颜色
}
}
},
系列：[
{
名称： 时长统计，
类型："条形",
假的，
悬停动画：假
数据：ydata，
条宽：17,//柱图宽度
项目样式：{ //左面
正常：{
颜色：函数（参数){
let colorList=[#EA5353 ， #DB8D4D ， #9DD530 ， #38CFCA ， #6C54E2 ， #749f83 ， #ca8622 ， #bda29a ， #6e7074 ， # 546570 ]；
返回颜色列表[参数。数据索引]；
},
barBorderRadius:[0，0，0，180]，
}
}
},{
姓名：甲，
工具提示：{
显示：假
},
类型："条形",
条宽：17,
项目样式：{ //右面
正常：{
颜色：函数（参数){
let colorList=[#FA6363 ， #F1A363 ， #AEE93C ， #41EBE5 ， #866FF5 ， #749f83 ， #ca8622 ， #bda29a ， #6e7074 ， # 546570 ]；
返回颜色列表[参数。数据索引]；
},
barBorderRadius:[0，0，180，0]
}
},
数据：ydata，
barGap:0
},{
姓名： b ，
工具提示：{
显示：假
},
键入：图片栏，
项目样式：{ //顶部
正常：{
颜色：函数（参数){
let colorList=[#FC9F9F ， #F7B177 ， #BBF64A ， #4DF4EE ， #947FFA ， #749f83 ， #ca8622 ， #bda29a ， #6e7074 ， # 546570 ]；
返回颜色列表[参数。数据索引]；
},
边框颜色：,
边框宽度：0.01,
标签:{
show: true，//开启显示
位置："顶部",//在上方显示
textStyle: { //数值样式
颜色：黑色，
fontSize: 16，
fontFamily:微软雅黑，
}
}
}
},
符号："矩形",
symbolRotate:45，
symbolSize: [24 ， 24]，
symbolOffset:[0 ，-11]，
符号位置："结束",
数据：ydata，
z:3
}
]
});
},
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。