首页 > 其他分享 >echarts 绘制圆形进度条带渐变色

echarts 绘制圆形进度条带渐变色

时间:2024-12-04 15:43:06浏览次数:4  
标签:false show color 渐变色 进度条 true echarts

 

const gradient = new echarts.graphic.LinearGradient(0, 0, 1, 1, [
  { offset: 0, color: '#1044EE' },
  { offset: 1, color: '#00FFF6' }
]);
option = {
  series: [
    {
      type: 'gauge',
      center: ['50%', '50%'],
      startAngle: 90,
      endAngle: -270,
      itemStyle: {
        color: gradient
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false
      },
      pointer: {
        show: false
      },
      axisLine: {
        lineStyle: {
          width: 40
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: -20,
        color: '#999',
        fontSize: 20
      },
      anchor: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, 0],
        fontSize: 60,
        fontWeight: 'bolder',
        formatter: '{value} %',
        color: '#000'
      },
      data: [
        {
          value: 30
        }
      ]
    }
  ]
};

 

标签:false,show,color,渐变色,进度条,true,echarts
From: https://www.cnblogs.com/wjian0916/p/18586471

相关文章

  • ECharts柱状图-极坐标柱状图标签,附视频讲解与代码下载
    引言: 在数据可视化的世界里,ECharts凭借其丰富的图表类型和强大的配置能力,成为了众多开发者的首选。今天,我将带大家一起实现一个柱状图图表,通过该图表我们可以直观地展示和分析数据。此外,我还将提供详细的视频讲解和代码下载链接,帮助大家快速上手。一、图表效果预览  二......
  • (系列十三)Vue3+Echarts搭建超好看的系统面板
    说明  该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发)。   该系统文章,我会尽量说的非常详细,做到不管新手、老手都能看懂。   说明:OverallAuth2.0是一个简单、易懂、功能强大的权限+可视化流程管理系统。友情提醒:本篇文章是属于系......
  • 「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
    本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间,启动倒计时后,应用会动态显示一个随着时间递减的环形进度条,同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。关键词UI互动应用倒计时器环形进度条动画效果状态管理一、功能说明倒计......
  • ECharts柱状图-极坐标系下的堆叠柱状图2,附视频讲解与代码下载
    引言: 在数据可视化的世界里,ECharts凭借其丰富的图表类型和强大的配置能力,成为了众多开发者的首选。今天,我将带大家一起实现一个柱状图图表,通过该图表我们可以直观地展示和分析数据。此外,我还将提供详细的视频讲解和代码下载链接,帮助大家快速上手。一、图表效果预览二、视......
  • ECharts 实战
    EChart资源Vue-EChart不想封装Echart,可以选用这种方案。Vue-ECharts是一个Vue组件,旨在简化在Vue应用中集成ECharts的过程。它封装了ECharts的初始化和使用逻辑,用户只需要在Vue模板中添加组件并传递相应的props,即可轻松创建图表。支持Vue2&Vue3&Nuxt3DO......
  • ECharts柱状图-基础柱状图,附视频讲解与代码下载
    引言: 在数据可视化的世界里,ECharts凭借其丰富的图表类型和强大的配置能力,成为了众多开发者的首选。今天,我将带大家一起实现一个柱状图图表,通过该图表我们可以直观地展示和分析数据。此外,我还将提供详细的视频讲解和代码下载链接,帮助大家快速上手。一、图表效果预览 二、......
  • 【数据可视化入门】Python散点图全攻略:Matplotlib、Seaborn、Pyecharts实战代码大公开
    数据可视化入门-系列文章目录Python散点图全攻略:Matplotlib、Seaborn、Pyecharts实战代码大公开!文章目录数据可视化入门-系列文章目录Python散点图全攻略:Matplotlib、Seaborn、Pyecharts实战代码大公开!前言1.Matplotlib:基础绘图库2.Seaborn:基于Matplotlib的高级绘......
  • echarts有数据展示,没有数据则清空数据-集团平台
    一、需求如果有数据则根据数据进行柱状图的展示,如果没有数据则清空if(this.chart){this.chart.dispose()this.chart=null}1、获得接口返回的对象长度letorgList=[]this.$store.getters.orgList.forEach(r=>{if(r.isStati......
  • 最全ECharts 实战大全(速记版+资源)
    hello,大家好,我是程序员海军,公众号已经快一年多没更新了,没更新的这段时间,我去哪了呢。这两年经历了很多事情,主要情感上占据大部分时间,从失恋-谈对象-再失恋。言归正传,近期我负责的公司人力资源系统中,薪酬统计模块的开发进度正稳步推进。在此过程中,我发现需要展示多种图表(如......
  • 使用 Vue 2 和 ECharts 构建 3D 柱状图
    使用Vue2和ECharts构建3D柱状图在现代前端开发中,Vue.js是一个非常流行的框架,它提供了强大的响应式数据绑定和组件化开发,使得前端开发更加灵活高效。而ECharts是一个开源的可视化图表库,具有强大的功能支持,能够轻松生成交互式和美观的数据可视化图表。结合Vue和......