怎么用vue和echarts實現進度條式柱狀圖

這篇文章主要介紹“怎么用vue和echarts實現進度條式柱狀圖”，在日常操作中，相信很多人在怎么用vue和echarts實現進度條式柱狀圖問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用vue和echarts實現進度條式柱狀圖”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

本文實例為大家分享了vue+echarts實現進度條式柱狀圖的具體代碼，供大家參考，具體內容如下

效果圖如下

代碼：

<template>
  <div class="content-page">
    <div class="tab-content">
      <div id="myChart1"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
      return {
        option: {
          color: ["#157ef5"],// 設置柱狀圖的顏色
          textStyle: {
            color: "#828282"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line"
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "value",
            // 設置x軸顯示幾段
            min: 0,
            max: 100,
            interval: 50,
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "transparent"
              }
            }
          },
          yAxis: {
            type: "category",
            data: ["財政收入", "總部經濟"],
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "#e0e0e0"
              }
            },
            inside: true,
            textStyle: {
              color: "#000"
            }
          },
          series: [
            {
              type: "bar",
              itemStyle: {
                  color: "#f1f1f1",// 定義柱形的背景色
                  borderRadius:[0, 10, 10, 0] //定義背景柱形的圓角
              },
              barGap: "-100%", //設置柱形重合的重要步驟
              data: [100, 100],
              animation: false, // 關閉動畫效果
              barWidth: "22px",// 設置柱形寬度
            },
            {
              type: "bar",
              data: [65, 75],
              barWidth: "22px",
              barGap: "-100%", //設置柱形重合的重要步驟
              itemStyle: {
                  borderRadius:[0, 10, 10, 0],// 定義柱形的圓角
                  color: function(params) {
                      var colorList = ['#3C90EB', '#B573F4', '#F9B341', '#F9B341', '#91c7ae'];
                      return colorList[params.dataIndex]
                  }
              },
            }
          ]
        }
      }
    },
    mounted() {
      this.getChartData();
    },
    methods: {
      getChartData() {
        let myChart1 = echarts.init(document.querySelector("#myChart1"));
        myChart1.setOption(this.option); // 設置圖表初始化數據
        setTimeout(function() {
          window.onresize = function() {
            myChart1.resize();// 圖表根據窗口大小進行自適應
          };
        }, 200);
      }
    }
}
</script>

<style lang="less" scoped>
#myChart1 {
  width: 600px;
  height: 400px;
}
</style>

到此，關于“怎么用vue和echarts實現進度條式柱狀圖”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！