快捷導(dǎo)航

vue+echarts實(shí)現(xiàn)進(jìn)度條式柱狀圖

更新時(shí)間：2021年09月05日 09:30:58 作者：lannieZ

這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)進(jìn)度條式柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue+echarts實(shí)現(xiàn)進(jìn)度條式柱狀圖的具體代碼，供大家參考，具體內(nèi)容如下

效果圖如下

代碼：

<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"],// 設(shè)置柱狀圖的顏色
          textStyle: {
            color: "#828282"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line"
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "value",
            // 設(shè)置x軸顯示幾段
            min: 0,
            max: 100,
            interval: 50,
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "transparent"
              }
            }
          },
          yAxis: {
            type: "category",
            data: ["財(cái)政收入", "總部經(jīng)濟(jì)"],
            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%", //設(shè)置柱形重合的重要步驟
              data: [100, 100],
              animation: false, // 關(guān)閉動(dòng)畫效果
              barWidth: "22px",// 設(shè)置柱形寬度
            },
            {
              type: "bar",
              data: [65, 75],
              barWidth: "22px",
              barGap: "-100%", //設(shè)置柱形重合的重要步驟
              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); // 設(shè)置圖表初始化數(shù)據(jù)
        setTimeout(function() {
          window.onresize = function() {
            myChart1.resize();// 圖表根據(jù)窗口大小進(jìn)行自適應(yīng)
          };
        }, 200);
      }
    }
}
</script>

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: