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
}
]
});
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
总的来说这并不是一道难题，那为什么要拿出这道题介绍？拿出这道题真正想要传达的是解题的思路，以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路，Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架，主要作用就是实现AJAX异步通信2023-02-02
这篇文章主要介绍了Vue.js 2.0 移动端拍照压缩图片预览及上传实例，本来移动端开发H5应用，准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用2017-04-04
Vue.js计算机属性computed和methods方法详解
这篇文章主要为大家详细介绍了Vue.js计算机属性computed和methods方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要给大家介绍了关于vue中实现页面刷新以及局部刷新的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了详解Vue-cli3.X使用px2rem遇到的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家介绍了petite vue的使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
在 VUE 项目开发时,遇到个问题,正常设置使用 Axios 库请求数据时,报错提示跨域问题,那在生产坏境下,该去怎么解决呢？下面小编就来和大家详细讲讲2024-01-01
这篇文章主要给大家介绍一下vue实现在页面上添加水印的实例,文中有详细的代码示例供大家参考,具有一定的参考价值,感兴趣的小伙伴跟着小编一起来看看吧2023-12-12
混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项2022-08-08
二维码是一种广泛应用于各种场合的编码方式，它可以将信息编码成一张二维图案，方便快捷地传递信息，在Vue.js中，我们可以使用一些库和组件来实现二维码的生成和扫描，本文将介绍如何在Vue中实现二维码的生成和扫描的方法2023-06-06
最新评论