echart 圆环进度图圆角

爬虫的爬虫

已于 2023-07-21 10:29:51 修改

阅读量92

点赞数

文章标签：前端

于 2023-07-21 10:29:24 首次发布

本文链接：https://blog.csdn.net/lee1169639/article/details/131846161

版权

初始化图形代码

    const initChart = () => {
      myChart = echarts.init(document.getElementById('chart'))
      const option = {
        title: {
          text: '0%',
          left: 'center',
          top: 'center',
          textStyle: {
            color: '#254e99',
            fontSize: '18px'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['70%', '80%'],
            center: ['50%', '50%'],
            color: '#000',
            data: [
              // itemSyle是单项的背景颜色设置。
              { value: 0, itemStyle: { color: '#254e99', borderRadius: 100 }, emphasis: { scale: false } },
              { value: 100, itemStyle: { color: '#f5f5f5' }, emphasis: { scale: false } }
            ],
            label: {
              // 将视觉引导图关闭
              show: false
            },
            // 初始化echarts的动画效果
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200
            }
          }
        ]
      }

      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }

动态显示可循环调用

    const resetChart = () => {
      const option = {
        title: {
          text: `${progress.value}%`
        },
        series: {
          data: [
            { value: progress.value, itemStyle: { color: '#254e99', borderRadius: 100 }, emphasis: { scale: false } },
            { value: 100 - progress.value, itemStyle: { color: '#f5f5f5' }, emphasis: { scale: false } }
          ]
        }
      }
      myChart.setOption(option, false, false)
    }