echarts版本为5.3.2,实现立体柱状效果,柱体出现时显示上升动画,柱体上方数字也从0开始动画
实现效果:
实现代码如下:
<template>
<div class="litiEcharts" ref="litiEcharts"></div>
</template>
<script>
export default {
data() {
return {
options: {},
echarts: null,
};
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
const _this = this;
this.echarts = this.$echarts.init(this.$refs.litiEcharts);
const colorArr2 = ["rgba(11, 83, 128)", "rgba(2, 143, 224)", "rgba(11, 83, 128)"];
const data = [26, 14, 35, 10, 20];
var xdata = ["2018", "2019", "2020", "2021", "2022"];
const data2 = [0, 0, 0, 0, 0];
var barWidth = 15;
var color2 = {
type: "linear",
x: 0,
x2: 0,
y: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#ffffff00",
},
{
offset: 0.3,
color: "#208fdf",
},
{
offset: 1,
color: colorArr2[1],
},
],
};
this.options = {
grid: {
top: "22%",
lef