echart 圆环进度图圆角

爬虫的爬虫

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

阅读量219

点赞数

文章标签：前端

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

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

版权

本文介绍了如何使用ECharts库创建带有圆角的圆环进度图，并提供了初始化图形的代码示例，适用于前端开发中动态显示数据更新的需求。通过循环调用，可以实现动态展示的效果。

摘要由CSDN通过智能技术生成

初始化图形代码

    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
            },
            // 初始化e