Vue Echarts实现带滚动效果的柱形图
作者：今天代码敲了吗
这篇文章主要为大家详细介绍了Vue Echarts实现带滚动效果的柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue Echarts实现带滚动效果柱形图的具体代码，供大家参考，具体内容如下
代码
<template>
<div class="timeLineview">
<div v-bind:style="{ height: heightData + 'px' }" ref="categoryChart"></div>
<div v-bind:style="{ height: noHeight + 'px' }" class="nomore">
{{ noData }}
</div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
components: {},
name: "timeLine",
props: {
question: {}
},
data() {
return {
datainfo: [],
datatitle: [],
chart: null,
heightData: 300,
noHeight: 0,
noData: ""
};
},
methods: {
resize() {
this.chart.resize();
},
find() {
//获取数据
if (this.question) {
for (let index = 0; index < this.question.length; index++) {
if (this.question[index].statValue > 0) {
//y轴
this.datainfo.push(this.question[index].statValue);
//X轴
this.datatitle.push(this.question[index].statLabel);
}
}
}
this.chart = echarts.init(this.$refs.categoryChart);
const option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
title: {},
legend: {},
dataZoom: [
{
type: "slider",
start: 0,
end: (100 / this.datainfo.length) * 5 //显示五个
},
{
type: "inside",
start: 0,
end: (100 / this.datainfo.length) * 5//显示五个
}
],
xAxis: {
data: this.datatitle
},
yAxis: { minInterval: 1 }, //显示为整数 最小间距1
series: [
{
type: "bar",
name: "数量",
data: this.datainfo,
itemStyle: {
color: "#77bef7"
}
}
]
};
this.chart.setOption(option);
if (this.datainfo.length > 0) {
this.heightData = 300;
} else {
this.heightData = 0;
this.noHeight = 300;
this.noData = "暂无数据";
}
}
},
mounted() {
this.find();
},
created() {}
};
</script>
<style lang="less" scoped>
.nomore {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
}
</style>效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。