echarts中半圆的环形进度图形

最新推荐文章于 2024-03-21 11:11:04 发布

PXY_J

最新推荐文章于 2024-03-21 11:11:04 发布

阅读量2.6k

点赞数

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

本文链接：https://blog.csdn.net/qq_39536826/article/details/123481289

版权

echarts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

echarts中半圆的环形进度图形

效果如图：

在这里插入图片描述

一、html代码如下：

<div id="pieDiagram1" style="width:330px;height:160px;"></div>

一、js代码如下：

var pieDiagram1 = echarts.init(document.getElementById('pieDiagram1'));
  var tittleVal = '75%'
  var option = {
    title: {
      text: tittleVal,
      textStyle: {
        color: '#fff',
        fontSize: 24,
        fontWeight: 'bold'
      },
      left: 'center',
      top:54,
      bottom: '69%',
      itemGap: 60,
    },
    tooltip: {
      show: false,
    },
    color: ['#01dadc'],
    legend: {
      orient: 'vertical',
      x: 690,
      y:120,
      data:['月指标完成率'],
    },
    series: [
      {
        name: '月指标完成率',
        type: 'pie',
        startAngle: 0,
        hoverAnimation: false,
        radius: ["60%", "87%"],
        center: ['50%', '50%'],
        label: {
          normal: {
            show: false,
            position: 'center'
          },
          emphasis: {
            show: true,
            textStyle: {
              fontSize: '10',
              fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          {
            value: 300,
            itemStyle: {
              normal: {
              color: "rgba(19,128,233,0)"
              }
            }
          },
          {
            value: 240,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#138fff'}, 
                    {offset: 1, color: '#12e6f2'}, 
                  ]
                )
              }
            }
          },
          {
            value: 60,
            itemStyle: {
              normal: {
                color: "rgba(1,218,220,0.1)"
              }
            }
          },

        ]
      },
    ]
  }
  pieDiagram1.setOption(option, true);