这篇文章主要介绍“vue echarts实现的柱状图动态效果代码分享”，在日常操作中，相信很多人在vue echarts实现的柱状图动态效果代码分享问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue echarts实现的柱状图动态效果代码分享”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
本文实例为大家分享了vue echarts实现柱状图动态展示的具体代码，供大家参考，具体内容如下
轮播图形式展现
计算
安全
数据库
网络和加速
企业服务
<template>
<div class="dan">
<div id="scalesize" :></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
texts: 111
};
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("scalesize"));
var fanfa = [
{
name: "育苗基地",
type: "bar",
barWidth: "15%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#fccb05"
},
{
offset: 1,
color: "#f5804d"
}
]),
barBorderRadius: 12
}
},
data: [100, 120, 160, 180, 220, 400]
},
{
name: "种植基地",
type: "bar",
barWidth: "15%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#8bd46e"
},
{
offset: 1,
color: "#09bcb7"
}
]),
barBorderRadius: 11
}
},
data: [270, 320, 420, 650, 821,907]
},
{
name: "托管面积",
type: "bar",
barWidth: "15%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#248ff7"
},
{
offset: 1,
color: "#6851f1"
}
]),
barBorderRadius: 11
}
},
data: [140, 180, 215, 320, 396, 520]
},
{
name: "联建基地",
type: "bar",
barWidth: "15%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#B88080"
},
{
offset: 1,
color: "#983A3A"
}
]),
barBorderRadius: 11
}
},
data: [140, 180, 215, 320, 396, 420]
}
];
myChart.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "2%",
right: "4%",
bottom: "14%",
top: "16%",
containLabel: true
},
legend: {
data: ["育苗基地", "种植基地", "托管面积", "联建基地"],
right: 10,
top: 12,
textStyle: {
color: "#fff"
},
itemWidth: 12,
itemHeight: 10
// itemGap: 35
},
xAxis: {
type: "category",
data: [
"2014",
"2015",
"2016",
"2017",
"2018",
"2019"
],
axisLine: {
lineStyle: {
color: "white"
}
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: "Microsoft YaHei"
}
}
},
yAxis: {
type: "value",
axisLine: {
show: false,
lineStyle: {
color: "white"
}
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.3)"
}
},
axisLabel: {}
},
dataZoom: [
{
show: true,
height: 12,
xAxisIndex: [0],
bottom: "8%",
handleIcon:
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h69.8c2.2,0,4,1.8,4,4V413z",
handleSize: "110%",
handleStyle: {
color: "#d3dee5"
},
textStyle: {
color: "#fff"
},
borderColor: "#90979c"
},
{
type: "inside",
show: true,
height: 15,
start: 1,
end: 35
}
],
series: fanfa
});
let app = {
currentIndex: -1
};
setInterval(function() {
let dataLen = fanfa[1].data.length;
// 取消之前高亮的图形
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
//console.log(app.currentIndex);
// 高亮当前图形
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: app.currentIndex
});
// 显示 tooltip
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: app.currentIndex
});
}, 1000);
window.onresize = myChart.resize;
}
}
};
</script>
<style lang="less" scoped>
.dan {
height: 90%;
}
</style>到此，关于“vue echarts实现的柱状图动态效果代码分享”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
