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>
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个基于 VueEcharts 的动态柱示例: ```html <template> <div id="myChart" style="width: 600px;height:400px;"></div> </template> <script> import * as echarts from 'echarts'; export default { data() { return { chartData: [], // 存储柱的数据 chartTimer: null // 定时器 }; }, mounted() { // 初始化 echarts 实例 this.myChart = echarts.init(document.getElementById('myChart')); // 显示初始的柱 this.showChart(); // 每隔 1 秒更新一次柱 this.chartTimer = setInterval(() => { this.showChart(); }, 1000); }, methods: { // 显示柱 showChart() { // 随机生成一些数据 const data = []; for (let i = 0; i < 5; i++) { data.push(Math.round(Math.random() * 100)); } // 更新柱的数据 this.chartData = data; // 配置柱的参数 const option = { title: { text: '动态柱示例' }, tooltip: {}, xAxis: { data: ['数据1', '数据2', '数据3', '数据4', '数据5'] }, yAxis: {}, series: [{ name: '数据量', type: 'bar', data: this.chartData }] }; // 使用刚指定的配置项和数据显示表 this.myChart.setOption(option); } }, beforeDestroy() { // 在组件销毁前清除定时器 clearInterval(this.chartTimer); } }; </script> ``` 此示例使用了一个计时器来每隔 1 秒更新一次柱的数据,并使用 Echarts 的 API 更新表。您可以将其复制到一个 Vue 单文件组件中并运行以查看动态柱。如果需要更多帮助,请告诉我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值