vue echarts实现柱状图动态展示
程序员文章站
2022-06-18 13:57:45
本文实例为大家分享了vue echarts实现柱状图动态展示的具体代码，供大家参考，具体内容如下轮播图形式展现
...
本文实例为大家分享了vue echarts实现柱状图动态展示的具体代码，供大家参考，具体内容如下
轮播图形式展现
<template>
<div class="dan">
<div id="scalesize" :style="{width: '100%', height: '100%'}"></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-4h59.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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。