vue echarts實(shí)現(xiàn)的柱狀圖動(dòng)態(tài)效果代碼分享

這篇文章主要介紹“vue echarts實(shí)現(xiàn)的柱狀圖動(dòng)態(tài)效果代碼分享”，在日常操作中，相信很多人在vue echarts實(shí)現(xiàn)的柱狀圖動(dòng)態(tài)效果代碼分享問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue echarts實(shí)現(xiàn)的柱狀圖動(dòng)態(tài)效果代碼分享”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

本文實(shí)例為大家分享了vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示的具體代碼，供大家參考，具體內(nèi)容如下

輪播圖形式展現(xiàn)

<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() {
      // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
      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: "聯(lián)建基地",
          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: {
            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
            type: "shadow" // 默認(rèn)為直線，可選為：'line' | 'shadow'
          }
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "14%",
          top: "16%",
          containLabel: true
        },
        legend: {
          data: ["育苗基地", "種植基地", "托管面積", "聯(lián)建基地"],
          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);
        // 高亮當(dāng)前圖形
        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>

到此，關(guān)于“vue echarts實(shí)現(xiàn)的柱狀圖動(dòng)態(tài)效果代碼分享”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！