vue eCharts进度条

最新推荐文章于 2023-10-25 16:10:59 发布
最新推荐文章于 2023-10-25 16:10:59 发布
阅读量784 收藏 3
点赞数
分类专栏： echarts 文章标签： echarts vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ingenuou_/article/details/123404738
版权

在这里插入图片描述

vue eCharts进度条

1.在vue项目里面

<div  id="myDoubtBankListEcharts3" class="myecharts" style="width: 100%;height: 70%;display:inline-block;"></div>



import * as echarts from "echarts";


let myDoubtBankListEcharts3 = echarts.init(
        document.getElementById("myDoubtBankListEcharts3")
      );
      let ratioNumber = [80];
      ratioNumber = [this.doubtHandVO.doubtHandProgress];
      myDoubtBankListEcharts3.setOption({
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        backgroundColor: "transparent",
        // xAxis: {
        //     show: false,
        //     type: 'value',
        //     max: 100,
        // },
        xAxis: [
          {
            type: "value",
            axisLabel: {
              margin: 5,
              color: "#fff",
              formatter: function (val) {
                return val + "";
              },
              textStyle: {
                fontSize: "0",
              },
            },
            min: 0,
            max: 100, // 计算最大值
            // interval: max / 5, //  平均分为5份
            splitNumber: 15,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                width: 1,
                opacity: 0.3,
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            axisLabel: {
              show: false,
            },
            min: 0,
            max: 100, // 计算最大值
            interval: 100 / 10, //  平均分为5份
            splitNumber: 10,
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                color: "#D8D8D8",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: false,
              textStyle: {
                fontSize: "12",
                color: "#03fcfe",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: ["比率"],
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: false,
            data: ratioNumber, //80
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: false,
            xAxisIndex: 0,
            backgroundStyle: {
              color: "transparent",
              borderRadius: 30,
              z: 1212,
            },
            label: {
              show: true,
              position: "right",
              formatter: "{@score}%",
              textStyle: {
                color: "rgb(25, 142, 248)",
                fontSize: "16",
              },
            },
            itemStyle: {
              normal: {
                borderRadius: 20,
                color: "rgb(25, 142, 248)",
              },
            },
            barWidth: 20,
            data: ratioNumber, //80
            z: 12212,
          },
          {
            type: "bar",
            showBackground: false,
            xAxisIndex: 1,
            barGap: "-100%",
            backgroundStyle: {
              color: "transparent",
              borderRadius: 30,
              z: 1212,
            },
            label: {
              show: false,
              position: "right",
              formatter: "{@score}%",
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
            itemStyle: {
              normal: {
                borderRadius: 20,
                color: "rgba(215, 236, 255,.4)",
              },
            },
            barWidth: 20,
            data: [100],
            z: 12210,
          },
        ],
      });
      window.addEventListener("resize", function () {
        myDoubtBankListEcharts3.resize();
      });

2.在echarts调试-代码编辑

let ratioNumber = [80];
     
     option = {
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        backgroundColor: "transparent",
        // xAxis: {
        //     show: false,
        //     type: 'value',
        //     max: 100,
        // },
        xAxis: [
          {
            type: "value",
            axisLabel: {
              margin: 5,
              color: "#fff",
              formatter: function (val) {
                return val + "";
              },
              textStyle: {
                fontSize: "0",
              },
            },
            min: 0,
            max: 100, // 计算最大值
            // interval: max / 5, //  平均分为5份
            splitNumber: 15,
            splitLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                width: 1,
                opacity: 0.3,
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "value",
            axisLabel: {
              show: false,
            },
            min: 0,
            max: 100, // 计算最大值
            interval: 100 / 10, //  平均分为5份
            splitNumber: 10,
            splitLine: {
              show: false,
              lineStyle: {
                type: "dashed",
                color: "#D8D8D8",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: false,
              textStyle: {
                fontSize: "12",
                color: "#03fcfe",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: ["比率"],
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: false,
            data: ratioNumber, //80
          },
        ],
        series: [
          {
            type: "bar",
            showBackground: false,
            xAxisIndex: 0,
            backgroundStyle: {
              color: "transparent",
              borderRadius: 30,
              z: 1212,
            },
            label: {
              show: true,
              position: "right",
              formatter: "{@score}%",
              textStyle: {
                color: "rgb(25, 142, 248)",
                fontSize: "16",
              },
            },
            itemStyle: {
              normal: {
                borderRadius: 20,
                color: "rgb(25, 142, 248)",
              },
            },
            barWidth: 20,
            data: ratioNumber, //80
            z: 12212,
          },
          {
            type: "bar",
            showBackground: false,
            xAxisIndex: 1,
            barGap: "-100%",
            backgroundStyle: {
              color: "transparent",
              borderRadius: 30,
              z: 1212,
            },
            label: {
              show: false,
              position: "right",
              formatter: "{@score}%",
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
            },
            itemStyle: {
              normal: {
                borderRadius: 20,
                color: "rgba(215, 236, 255,.4)",
              },
            },
            barWidth: 20,
            data: [100],
            z: 12210,
          },
        ],
      };


    myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });

3.在echarts调试-完整代码

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

let ratioNumber = [80];

option = {
  grid: {
    left: '5%',
    right: '5%',
    bottom: '5%',
    top: '10%',
    containLabel: true
  },
  backgroundColor: 'transparent',
  // xAxis: {
  //     show: false,
  //     type: 'value',
  //     max: 100,
  // },
  xAxis: [
    {
      type: 'value',
      axisLabel: {
        margin: 5,
        color: '#fff',
        formatter: function (val) {
          return val + '';
        },
        textStyle: {
          fontSize: '0'
        }
      },
      min: 0,
      max: 100, // 计算最大值
      // interval: max / 5, //  平均分为5份
      splitNumber: 15,
      splitLine: {
        show: false,
        lineStyle: {
          color: '#fff'
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#fff',
          width: 1,
          opacity: 0.3
        }
      },
      axisTick: {
        show: false
      }
    },
    {
      type: 'value',
      axisLabel: {
        show: false
      },
      min: 0,
      max: 100, // 计算最大值
      interval: 100 / 10, //  平均分为5份
      splitNumber: 10,
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#D8D8D8'
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      inverse: true,
      axisLabel: {
        show: false,
        textStyle: {
          fontSize: '12',
          color: '#03fcfe'
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: ['比率']
    },
    {
      type: 'category',
      inverse: true,
      axisTick: 'none',
      axisLine: 'none',
      show: false,
      data: ratioNumber //80
    }
  ],
  series: [
    {
      type: 'bar',
      showBackground: false,
      xAxisIndex: 0,
      backgroundStyle: {
        color: 'transparent',
        borderRadius: 30,
        z: 1212
      },
      label: {
        show: true,
        position: 'right',
        formatter: '{@score}%',
        textStyle: {
          color: 'rgb(25, 142, 248)',
          fontSize: '16'
        }
      },
      itemStyle: {
        normal: {
          borderRadius: 20,
          color: 'rgb(25, 142, 248)'
        }
      },
      barWidth: 20,
      data: ratioNumber, //80
      z: 12212
    },
    {
      type: 'bar',
      showBackground: false,
      xAxisIndex: 1,
      barGap: '-100%',
      backgroundStyle: {
        color: 'transparent',
        borderRadius: 30,
        z: 1212
      },
      label: {
        show: false,
        position: 'right',
        formatter: '{@score}%',
        textStyle: {
          color: '#fff',
          fontSize: '12'
        }
      },
      itemStyle: {
        normal: {
          borderRadius: 20,
          color: 'rgba(215, 236, 255,.4)'
        }
      },
      barWidth: 20,
      data: [100],
      z: 12210
    }
  ]
};

myChart.setOption(option);
window.addEventListener('resize', function () {
  myChart.resize();
});

option && myChart.setOption(option);

4，关于echarts的安装和使用

请参考我的另一篇文章：
https://blog.csdn.net/ingenuou_/article/details/123179231?spm=1001.2014.3001.5502

加蓓努力我先飞
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3半圆进度条,基于echarts仪表盘改造半环形进度图,扇形饼状图实现
10-16
vue3
echarts水球图echarts-liquidfill.js文件
05-11
echarts水球图所需文件，直接引入配合echarts.js使用
echarts绘制进度条
不积跬步何以至千里
08-08 7113
echarts
echarts-进度条
最新发布
joan_yb的博客
10-25 1455
echarts-进度条
echarts图表进度条类型图
qq_43840793的博客
07-11 2685
x轴不显示，y轴的axisLabel用富文本，显示机器与台数；图表有两个数据组，分别用蓝色和灰色表示，两个柱子重合，灰色柱子在蓝色柱子下面；灰色柱子的label用富文本，显示占比。在methods里写个配置图表的函数，输入参数为dataAll,包含了机具的类型、数量、占比等信息。dataPercent: dataPercent,//占比。左边是类别、数量，中间类似于进度条，右边是所占百分比。（1）在template里写个容器。dataX: dataX,//类别。dataY: dataY,//数量。
echarts 进度条
weixin_46949106的博客
03-07 1011
【代码】echarts 进度条。
echarts实现进度条样式的柱状图
weixin_52443895的博客
07-19 4376
echarts实现进度条样式的柱状图
vue使用nprogress实现进度条
12-13
本文实例为大家分享了vue使用nprogress进度条展示的具体代码，供大家参考，具体内容如下 安装 npm i nprogress -S 使用 在main.js中 import NProgress from 'nprogress' import 'nprogress/nprogress.css' //使用...
【JavaScript源代码】vue使用echarts画组织结构图.docx
12-29
　昨天，写了一篇关于圆环进度条的博客（请移步：Vue圆环进度条），已经烦不胜烦，今天又遇到了需要展示类似公司的组织结构图的功能需求，要冒了！！！　这种需求，自己用div+css也是可以实现的，但是没有什么动画...
Vue-Element UI集成ECharts实现数据统计分析页代码部分(如果帮助到你，感谢关注点赞)
04-29
关于《Vue-Element UI集成ECharts实现数据统计分析页》文章的具体代码实现。(如果帮助到你，感谢关注点赞)
ECharts进度条，环饼图，折线图案例记录
lwx931449660的博客
09-14 6822
ECharts 没有提供进度条类型的图表，但是可以根据仪表盘类型修改得到，上图 官方文档请看：ECharts官方配置项文档 上代码： <template> <div class="box-container"> <BoxHeader info="车辆类型" utils="万辆" type="dis" /> <div class="content"> <div class="item_image"> <d..
echarts图形出进度条
m0_61874512的博客
09-02 542
option 内配置以上达到在echarts图形出进度条
vue实现 【echarts中 “4种” Gauge仪表盘进度条图例】的组件封装及调用
weixin_50450473的博客
12-29 6756
1、安装echarts npm install echarts --save 2、在需要的页面引入 import * as echarts from "echarts" 3、echarts.vue 组件 <template> <div class="per_page"> <div id="perChart"></div> <img class="per_img" src="@/assets/...
ECharts条形进度图及滚动条设置案例
每一个想要学习的念头，都是未来的你在呼救。
06-26 2943
ECharts条形进度图及滚动条设置案例
Echarts实现进度条效果
pyj2017的博客
05-20 5192
Echarts实现进度条效果 实现效果如图： option = { grid: { containLabel: true, left: 0, right: 0, top: 0, bottom: 0, }, xAxis: {
echarts——进度条
小兔崽子的博客
01-20 2047
1.示例图 2.echarts配置 option = { backgroundColor: '#00043A', tooltip: { trigger: 'axis', show: false, axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, }, legend:
Echarts 实现进度条效果
程序员小挽的博客
11-24 2664
#Echarts 实现进度条效果 #效果图 #上代码 //Echarts 实现进度条效果 data = [ { name: '服务订购数量', value: 6133, }, { name: '服务订购人次', value: 23125, }, { name: '微信推送户次', value: 43231, }, { name: '微信推送
vue利用echarts绘制项目进度条，实例详解
银鞍照白马的博客
10-26 4339
如图所示，想要实现清晰表达当前项目的进度，可以使用百度的免费插件echarts。官网地址：https://echarts.apache.org/zh/index.html 里面文档和api都很齐全，如果还是不太懂，可以去看看echarts社区的开发者开源的各种实例，非常齐全。地址：点击进入 百度echarts安装我这里就不赘述，有大量的资料可以查询。下面我们就开始开发我们的项目进度条。 ...
vue echarts进度条柱状图
10-08
通过Vue ECharts，您可以轻松地创建进度条柱状图。下面是一个简单的实现步骤： 1. 首先，确保您已经安装好Vue.js和ECharts依赖： ``` npm install vue echarts ``` 2. 在您的Vue组件中，引入Vue和ECharts库： ```...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值