vue+Echart实现立体柱状图
更新时间：2022年04月02日 13:07:03 作者：小怪兽，让我来保护你
这篇文章主要为大家详细介绍了vue+Echart实现立体柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Echart+Vue制作立体柱状图，供大家参考，具体内容如下
先来看一下制作完成后的效果：
废话不多说，直接上代码：
HTML代码：
<div class="lineOne"> <span class="spanTitle">使用时长排行</span> <div id="timeRange" style="width:100%;height:400px"> </div> </div>
JS部分：
timeRangeInit(xdata,ydata) {
let nc = document.getElementById("timeRange");
var myChart = echarts.init(nc);
myChart.setOption({
tooltip: {
trigger: "axis"
},
grid: {
top: "15%",
left: "8%",
right: "12%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
data: xdata,
name:'教室',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
symbol: ['none', 'arrow'],
symbolSize: [15, 17],
lineStyle: {
color: '#000000',
width: 2 // 改变坐标线的颜色
}
},
axisLabel: {
//调整x轴的lable
textStyle: {
fontSize: 12 ,// 让字体变大
}
}
},
yAxis: {
type: "value",
name:'时长（小时）',
splitLine: { //刻度线
show: false,
},
splitArea:{ //柱状图后面的背景色
show:true,
areaStyle: {
color: ["rgba(221,247,250,0.7)","rgba(245,249,232,0.7)"]
}
},
axisTick: {
show: false
},
axisLabel: {
//调整y轴的lable
textStyle: {
fontSize: 12 // 让字体变大
},
show: true
},
axisLine: {
symbol: ['none', 'arrow'],
symbolSize: [15, 17],
lineStyle: {
color: '#000000',
width: 2 // 改变坐标线的颜色
}
}
},
series: [
{
name: "时长统计",
type: "bar",
showSymbol: false,
hoverAnimation: false,
data: ydata,
barWidth: 17, //柱图宽度
itemStyle: { //左面
normal: {
color:function(params) {
let colorList = ["#EA5353","#DB8D4D","#9DD530","#38CFCA","#6C54E2","#749f83","#ca8622","#bda29a","#6e7074","#546570"];
return colorList[params.dataIndex];
},
barBorderRadius:[0,0,0,180],
}
}
},{
name:'a',
tooltip:{
show:false
},
type: 'bar',
barWidth:17,
itemStyle:{ //右面
normal:{
color:function(params) {
let colorList = ["#FA6363","#F1A363","#AEE93C","#41EBE5","#866FF5","#749f83","#ca8622","#bda29a","#6e7074","#546570"];
return colorList[params.dataIndex];
},
barBorderRadius:[0,0,180,0]
}
},
data: ydata,
barGap:0
},{
name:'b',
tooltip:{
show:false
},
type: 'pictorialBar',
itemStyle: { //顶部
normal: {
color:function(params) {
let colorList = ["#FC9F9F","#F7B177","#BBF64A","#4DF4EE","#947FFA","#749f83","#ca8622","#bda29a","#6e7074","#546570"];
return colorList[params.dataIndex];
},
borderColor:'',
borderWidth:0.01,
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color :'black',
fontSize: 16,
fontFamily:'微软雅黑',
}
}
}
},
symbol: 'rect',
symbolRotate:45,
symbolSize: ['24','24'],
symbolOffset:['0','-11'],
symbolPosition: 'end',
data: ydata,
z:3
}
]
});
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
随着现在vue3越来越普及，相应的面试题也多了起来。说到vue3的面试题，有一个最经典的就是对于实现ref和reactive这两个方法的底层原理，本文就来和大家简单讲讲吧2023-04-04
这篇文章主要介绍了Vue实现渲染数据后控制滚动条位置，本文通过图文并茂的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue自定义filters过滤器的相关知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-04-04
vue大文件分片上传之simple-uploader.js的使用
本文主要介绍了vue大文件分片上传之simple-uploader.js的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要为大家详细介绍了vue实现图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了vue中关于_ob_:observer的处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
vue项目出现ERESOLVE could not resolve问题及解决
这篇文章主要介绍了vue项目出现ERESOLVE could not resolve问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在Vue中，动画效果是非常有用的，它可以使用户界面变得更加生动、有趣，本文中我们将学习如何在Vue中进行自定义动画与动画效果设计，感兴趣的可以了解一下2023-06-06
Vue中el-form标签中的自定义el-select下拉框标签功能
这篇文章主要介绍了Vue中el-form标签中的自定义el-select下拉框标签功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章主要介绍了vue实现商品列表的无限加载思路和步骤详解,基础思路是触底条件满足之后 page++,拉取下一页数据,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下,2024-06-06
最新评论