菜单 搜索
首页 前端知识 echarts 环形图_圆环动画

echarts 环形图_圆环动画

2024-09-21 21:09:01 前端知识 前端哥 319 87 我要收藏

Echarts 常用各类图表模板配置

注意： 这里主要就是基于各类图表，更多的使用 Echarts 的各类配置项；

以下代码都可以复制到 Echarts 官网，直接预览；

图标模板目录

  • Echarts 常用各类图表模板配置
  • 一、环形动画
  • 二、环形图
  • 三、k 线图
  • 四、折线图
  • 五、横向柱状图
  • 六、折线图 + 柱状图
  • 七、3D 柱状图
  • 八、工程项目可视化
  • 九、雷达图
  • 十、象形柱图
  • 十一、环形占比图

一、环形动画

echarts 项目可视化、ecahrts 折线图、ecahrts柱状图、echarts横向柱状图、echarts折线图+柱状图、echarts k线图、echarts环形图、echarts 3D 柱状图、echarts 象形柱图、echarts 自定义样式、echarts 矢量图、echarts 基础教程、echarts 快速入门、echarts 基础配置、charts 图表案例、echarts 大屏可视化、echarts 属性详解、echarts 动画

let num = 0;
let value = 60;
option = {
  backgroundColor: '#142468',
  title: {
    text: 'echarts',
    textStyle: {
      color: '#fff',
      fontSize: 40,
      fontWeight: '100',
      rich: {
        a: {
          fontSize: 48,
          color: '#29EEF3'
        },

        c: {
          fontSize: 40,
          lineHeight: 75,
          color: '#ffffff'
          // padding: [5,0]
        }
      }
    },
    x: 'center',
    y: 'center'
  },
  series: [
    {
      type: 'pie',
      zlevel: 1,
      silent: true,
      radius: ['97%', '98%'],
      hoverAnimation: false,
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#9933FF' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#00CCFF' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      },
      label: {
        normal: {
          show: false
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [1]
    },
    {
      type: 'pie',
      zlevel: 2,
      silent: true,
      radius: ['90%', '91%'],
      startAngle: 90,
      hoverAnimation: false,
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#9933FF' // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#00CCFF' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      },
      label: {
        normal: {
          show: false
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        {
          name: '1',
          value: 50,
          itemStyle: {
            normal: { borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
          }
        },
        {
          name: '2',
          value: 2,
          itemStyle: {
            normal: {
              color: 'rgba(88,142,197,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '3',
          value: 20,
          itemStyle: {
            normal: { borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
          }
        },
        {
          name: '4',
          value: 2,
          itemStyle: {
            normal: {
              color: 'rgba(88,142,197,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '5',
          value: 50,
          itemStyle: {
            normal: { borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
          }
        },
        {
          name: '6',
          value: 2,
          itemStyle: {
            normal: {
              color: 'rgba(88,142,197,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '7',
          value: 20,
          itemStyle: {
            normal: { borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
          }
        },
        {
          name: '8',
          value: 2,
          itemStyle: {
            normal: {
              color: 'rgba(88,142,197,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '9',
          value: 50,
          itemStyle: {
            normal: { borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
          }
        },
        {
          name: '10',
          value: 2,
          itemStyle: {
            normal: {
              color: 'rgba(88,142,197,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '11',
          value: 20,
          itemStyle: {
            normal: { borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
          }
        },
        {
          name: '12',
          value: 2,
          itemStyle: {
            normal: {
              color: 'rgba(88,142,197,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '13',
          value: 50,
          itemStyle: {
            normal: { borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
          }
        },
        {
          name: '14',
          value: 2,
          itemStyle: {
            normal: {
              color: 'rgba(88,142,197,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '15',
          value: 20,
          itemStyle: {
            normal: { borderWidth: 0, borderColor: 'rgba(0,0,0,0)' }
          }
        },
        {
          name: '16',
          value: 2,
          itemStyle: {
            normal: {
              color: 'rgba(88,142,197,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        }
      ]
    },
    {
      type: 'pie',
      zlevel: 3,
      silent: true,
      radius: ['83%', '84%'],
      label: {
        normal: {
          show: false
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        {
          name: '1',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '2',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '3',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '4',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '5',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '6',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '7',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '8',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '9',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '10',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '11',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '12',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '13',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '14',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '15',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '16',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '17',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '18',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '19',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '20',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '21',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '22',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '23',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '24',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '25',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '26',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '27',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '28',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '29',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '30',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '31',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '32',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '33',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '34',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '35',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '36',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '37',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '38',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '39',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '40',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '41',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '42',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '43',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '44',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '45',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '46',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '47',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '48',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '49',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '50',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '51',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '52',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '53',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '54',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '55',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '56',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '57',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '58',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '59',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '60',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '61',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '62',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '63',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '64',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '65',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '66',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '67',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '68',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '69',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '70',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '71',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '72',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '73',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '74',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '75',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '76',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '77',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '78',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '79',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '80',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '81',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '82',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '83',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '84',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '85',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '86',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '87',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '88',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '89',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '90',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '91',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '92',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '93',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '94',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '95',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '96',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '97',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '98',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '99',
          value: 25,
          itemStyle: {
            normal: {
              color: 'rgb(126,190,255)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        },
        {
          name: '100',
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              borderColor: 'rgba(0,0,0,0)'
            }
          }
        }
      ]
    },
    {
      type: 'pie',
      zlevel: 4,
      silent: true,
      radius: ['60%', '75%'],
      color: ['#fc8d89', '#46d3f3', 'rgba(203,203,203,0.9)'],
      startAngle: 50,
      hoverAnimation: false,
      label: {
        normal: {
          show: false
        }
      },
      data: [1, 2, 3]
    },
    {
      name: '',
      type: 'custom',
      zlevel: 7,
      coordinateSystem: 'none',
      renderItem: function (params, api) {
        return {
          type: 'arc',
          shape: {
            cx: api.getWidth() / 2, // 图形元素的中心在父节点坐标系（以父节点左上角为原点）中的横坐标值。
            cy: api.getHeight() / 2, // 图形元素的中心在父节点坐标系（以父节点左上角为原点）中的纵坐标值。
            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6, // 外半径。
            startAngle: ((0 + num) * Math.PI) / 180, // 开始弧度。
            endAngle: ((1 + num) * Math.PI) / 180, // 结束弧度。
            clockwise: true //是否顺时针。
          },
          style: {
            stroke: '#fff',
            fill: 'transparent',
            shadowBlur: 5, //阴影
            shadowOffsetX: 15,
            shadowOffsetY: 15,
            shadowColor: '#000',
            lineWidth: 15
          },
          silent: true
        };
      },
      data: [0]
    }
  ]
};

function doing() {
  setInterval(() => {
    num = num + 2;
    option.series[1].startAngle = option.series[1].startAngle - 2;
    myChart.setOption(option);
  }, 100);
}
setTimeout(doing, 1000);

二、环形图

echarts 环形图：多层嵌套，自定义 legend 位置、颜色，中间插入数据及文字，颜色渐变；

文字链接： https://blog.csdn.net/aibujin/article/details/124796709?spm=1001.2014.3001.5501

三、k 线图

文章链接： https://blog.csdn.net/aibujin/article/details/124797924?spm=1001.2014.3001.5501

四、折线图

echarts 折线图，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接：https://blog.csdn.net/aibujin/article/details/124802512?spm=1001.2014.3001.5501

文章链接：https://blog.csdn.net/aibujin/article/details/130157140?spm=1001.2014.3001.5501

文章链接：https://blog.csdn.net/aibujin/article/details/130223130?spm=1001.2014.3001.5501

五、横向柱状图

echarts 横向柱状图，坐标轴隐藏，网格线颜色渐变，网格默认背景，柱状图边框宽度/颜色，数据渐变，刻度线隐藏等；

文章链接： https://blog.csdn.net/aibujin/article/details/124802889?spm=1001.2014.3001.5501

六、折线图 + 柱状图

echarts 折线图 + 柱状图，左右两侧y轴线，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/124803493?spm=1001.2014.3001.5501

七、3D 柱状图

echarts 3D 柱状图，多个柱状图叠加，y轴内刻度线、隐藏横坐标，文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/124879825?spm=1001.2014.3001.5501

八、工程项目可视化

echarts 工程项目可视化，依据x轴时间坐标轴，叠加展示不同阶段的项目节点，y轴展示项目阶段名、文字颜色，网格线，坐标轴两侧留白、背景色等；

文章链接： https://blog.csdn.net/aibujin/article/details/130237643?spm=1001.2014.3001.5501

九、雷达图

echarts 雷达图，自定义指示器名称，线条样式、区域填充样式、折线拐点标志、自定义名称样式、坐标轴分隔线、坐标轴两侧留白、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130266382?spm=1001.2014.3001.5501

十、象形柱图

echarts 象形柱图，隐藏横纵坐标轴、网格线，坐标轴两侧留白，自定义矢量图，文字提示框、图形类型、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130289101?spm=1001.2014.3001.5501

十一、环形占比图

echarts 环形占比图，环形图、仪表盘、刻度线，自定义提示框、颜色渐变、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130265744?spm=1001.2014.3001.5501

转载请注明出处或者链接地址：https://www.qianduange.cn//article/18521.html
标签
echarts 环形图echarts 动画echarts 饼图echarts 图行渐变
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

学生网上请假系统/学生网上请假系统使用教程/学生网上请假系统登录/学生在线请假平台/网上请假流程(源码 LW 调试文档 讲解等)/MySQL/SpringBoot/VueHTML5/Java

2024-10-28 20:10:39

多品牌NVR管理工具/设备EasyNVRNVR监测软件/设备HTML5技术B/S架构实时视频监控方案

2024-10-28 20:10:35

基于Java SpringBoot Vue HTML5中药实验管理系统(源码 LW 调试文档 讲解等)/中药实验管理系统/中药实验管理软件/中药实验设备管理系统/中药实验数据管理系统

2024-10-28 20:10:13

基于Java SpringBoot Vue HTML5网上摄影工作室系统(源码 LW 调试文档 讲解等)/网上摄影工作室系统使用教程/网上摄影工作室系统下载/网上摄影工作室系统评价

2024-10-28 20:10:59

【TinyMCE】TinyMCE6.1及以上版本去除换行增加的P标签

2024-10-28 20:10:56

HTML5 常见的语义标记(布局)

2024-10-28 20:10:56

【Python】已解决：bs4.FeatureNotFound: Couldn’t find a tree builder with the features you requested: html5

2024-07-29 00:07:43

实现语音合成的三种方法：HTML5 Web Speech 、speak-tts、百度语音合成

2024-10-28 20:10:54

提升网页设计能力：HackerRank HTML挑战精讲

2024-10-28 20:10:51

HTML（超文本标记语言）是一种用于创建网页的标准标记语言，通过标签定义网页的结构和内容

2024-10-28 20:10:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
3

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
4

vue使用datav echarts

2024-09-06 00:09:381000
5

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
6

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
7

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
8

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
9

npm的使用

2024-08-18 00:08:131000
10

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！