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
}
]
});
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了浅谈vue项目,访问路径#号的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
在使用el-table的时候经常会涉及到表格的列合并，包括表格操作列的合并,下面这篇文章主要给大家介绍了关于el-table表格动态合并行及合并行列的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了vue.js动态数据绑定学习笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家介绍了TDesign在vitest的实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue使用技巧及vue项目中遇到的问题,本文给大家带来的只是一部分，后续还会持续更新，感兴趣的朋友跟随脚本之家小编一起学习吧2018-06-06
这篇文章主要为大家详细介绍了基于Vue实现支持按周切换的日历，根据实际开发情况按每年、每月、每周进行切换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
本篇文章主要介绍了vue 1.x 交互实现仿百度下拉列表示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了详解Vue数据驱动原理的相关资料，帮助大家更好的理解和学习vue框架的相关知识，感兴趣的朋友可以了解下2020-11-11
越来越多的人在用Vue，刚开始接触vue的话常接触的指令就几个，统一归纳一下。感兴趣的朋友跟随小编一起看看吧2018-11-11
vuejs+element-ui+laravel5.4上传文件的示例代码
本篇文章主要介绍了vuejs+element-ui+laravel5.4上传文件的示例代码，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
最新评论