echarts做圆环渐变进度条

最新推荐文章于 2024-03-22 18:09:48 发布

有一个王小森

最新推荐文章于 2024-03-22 18:09:48 发布

阅读量2.7k

点赞数 4

分类专栏： js css 文章标签： css 前端 javascript echarts

本文链接：https://blog.csdn.net/wangxiaoxiaosen/article/details/127901623

版权

js 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

echarts做圆环渐变进度条(饼图）

在这里插入图片描述

  let myEcharts = echarts.init(this.$refs.caiji);
            
            let option = {
              title: {
                text: '采集率%',
                left: 'center',
                top:'55%',
                textStyle:{
                  color:'#999999',
                  fontSize: 13,
                  fontWeight:'400'
                }
                // bottom:'0'
              },
              //饼图中间显示文字
              graphic: {
                type: 'text',
                left: 'center',
                top: '30%',
                style: {
                  text: this.caiji , //文字内容
                  // 	fill: "red",//文字颜色
                  fontSize: 30, //文字字号
                  fontWeight: '800',
                  fill:"#3478FF"
                },
              },
              tooltip: {
                trigger: 'item'
              },
              series: [
                {
                  //第一张圆环
                  type: 'pie',
                  radius: ['80%', '100%'],
                  center: ['50%', '50%'],
                  // 隐藏指示线
                  labelLine: { show: false },
                  //隐藏圆环上文字
                  label: {
                    show: false
                  },
                  data: [
                    //value当前进度 + 颜色
                    {
                      value: this.caiji,
                      itemStyle: {
                        normal: { 
                          color:new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, [
                          {offset:0,color:'#4784FF'},
                          {offset:1,color:'#BFD9FF'}
                        ])
                      }
                      }
                    },
                    {
                      value: 100-this.caiji,
                      itemStyle: {
                        normal: { color: '#D7D7D7' }
                      }
                    }
                  ]
                }
              ]
            };
            myEcharts.setOption(option)