怎么用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实现进度条式柱状图”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！