echarts 环形图_圆环动画

news2024/11/26 14:39:45

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 属性详解、echars 动画

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/460747.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

(原创)Flutter基础入门:手把手教你搭建Flutter混合项目:AAR方式集成

前言 上一篇博客讲了如何用“模块代码依赖模式”这种方式去搭建Flutter混合项目 因为篇幅原因,AAR集成方式来搭建项目的步骤和注意点放到这篇博客来讲 如果你没看过上篇博客,建议先阅读上一篇: (原创)Flutter基础入门…

快来看看这些前端开发技巧你掌握多少吧

文章目录 一、代码整洁推荐1.1 三元(三目)运算符1.2 短路判断简写1.3 变量声明简写1.4 if真值判断简写1.5 For循环简写1.6 对象属性简写1.7 箭头函数简写1.8 隐式返回简写1.9 模板字符串1.10 默认参数值1.11 解构赋值简写1.12 多条件判断简写1.13 多变量赋值简写1.14 解构时重命…

easyExcel动态导出,合并指定单元格

如上图所示,需要使用easyExcel动态导出上述表格并指定合并其中的单元格,日期是动态的,每个月不相同,直接上实现代码,以demo形式展现,更好理解 /** * 考勤记录动态导出测试 */ GetMapping(&q…

【Kotlin学习】R2DBC与MyBatis性能对比

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、测试框架选取Spring Webflux VS Spring MVCSpring Data R2DBC VS MyBatis 二、测试代码编写1. 项目1核心代码1.1 引入依赖1.2 接口代码 2. 项目2核心代码2.…

Layui图片上传

前端代码&#xff1a; <div class"layui-upload"> <button type"button" class"layui-btn" id"test1">上传图片</button> <div class"layui-upload-list"> <img class"lay…

如何一次性生成大量结构相同、内容不同的二维码

使用 批量模板数据 的方式&#xff0c;可 一次性生成大量结构相同&#xff0c;内容不同的活码 &#xff0c;大幅提升制码效率。 模板的样式&#xff0c;关联的表单状态等所有内容均可进行修改&#xff0c;修改后所有子码都将批量更新&#xff0c;且模板可重复使用&#xff0c;让…

页面加载进度条(VUE3)

通常我们希望在页面跳转加载中&#xff0c;页面顶部出现进度条。 &#xff08;1&#xff09; 下载依赖 npm install nprogress --save &#xff08;2&#xff09;在router中得index.js中引入 import NProgress from nprogress import nprogress/nprogress.css &#xff08;…

C++——类和对象(2)

作者&#xff1a;几冬雪来 时间&#xff1a;2023年4月25日 内容&#xff1a;C类和对象讲解 目录 前言&#xff1a; 1.this指针&#xff1a; 2.默认成员函数&#xff1a; 3.构造函数&#xff1a; 4.析构函数&#xff1a; 5.构造函数的问题&#xff1a; 结尾&#xff…

Transformer 代码详细解析

Transformer 代码详细解析 文章目录 Transformer 代码详细解析一、Transformer 背景介绍1.1 Transformer 的诞生1.2 Transformer 的优势1.3 Transformer 的市场 二、Transformer架构解析2.1 认识 Transformer 架构2.1.1 Transformer模型的作用2.1.2 Transformer 总体架构图 2.2…

全国计算机等级三级网络技术试卷详解(一)

请点击↑关注、收藏&#xff0c;本博客免费为你获取精彩知识分享&#xff01;有惊喜哟&#xff01;&#xff01; 1.下列关于RPR技术的描述中&#xff0c;错误的是&#xff08;&#xff09;。 A) RPR与FDDI一样使用双环结构 B) 在RPR环中&#xff0c;源节点向目的节点成功发出…

2023常用的10款电力电子系统仿真分析软件推荐

市场上有许多电子仿真器&#xff0c;那么对于电力电子项目来说&#xff0c;哪种仿真器最好呢&#xff1f;或者因为期望任何软件包在各个方面都是最好的是不合理的&#xff0c;那么用户如何确定哪个软件是项目的最佳选择&#xff1f; PSIM PSIM是一种模块化封装&#xff0c;专为…

华为认证实验篇-ENSP的安装(附下载地址)

ENSP&#xff08;Enterprise Network Simulation Platform&#xff09;是华为公司开发的一款网络仿真软件&#xff0c;它可以帮助网络工程师进行网络拓扑设计、网络配置、网络测试等工作。本篇文章将介绍如何在Windows操作系统上安装ENSP。后续会在专栏陆续更新ENSP的实验&…

MACH SYSTEMS操作手册 SAEJ2716(SENT) to RS-232/CAN Gateway怎么使用?

双通道SAE J2716 (SENT)至RS-232/CAN总线网关&#xff0c;具有两个双向SENT通道和RS-232 (SENT-RS232) 或CAN总线 (SENT-CAN) 接口。两种变体还提供两个模拟输出&#xff0c;可以直接将输入SENT数据转换为模拟电压。该网关配备了一个免费的PC应用程序&#xff0c;用于SENT通信分…

VS同时调试主程序和子程序工具

VS要想要实现同时调试主程序和子程序&#xff0c;可使用工具 Microsoft Child Process Debugging power Tool 来实现。 我的环境和官方使用说明 环境&#xff1a;VS2019 官方使用说明&#xff1a;Introducing the Child Process Debugging Power Tool - Azure DevOps Blogh…

Swagger 版本控制 注释展示(.NET)

版本控制 项目创建 以Visual Studio 2022为例&#xff0c;创建Web API项目&#xff0c;如下图所示。 在创建时勾选启用OpenAPI支持&#xff0c;默认安装Swashbuckle.AspNetCore库&#xff0c;并配置相关信息。 创建版本枚举类 /// <summary>/// 版本枚举/// </su…

新版Fluent默认保存的h5文件无法用Tecplot打开的解决办法(亲试有效,评论区是重点)

文章目录 Ansys Fluent简介Fluent 输入/出 文件格式新版Fluent的输出压缩文件&#xff08;.cas.h5文件&#xff09;解决办法 Ansys Fluent简介 Ansys Fluent &#xff0c;是国际上比较流行的商用CFD软件包&#xff0c;在美国的市场占有率为60%&#xff0c;凡是和流体、热传递和…

IP地址的分配

一、ip地址的作用 用IP地址来标识Internet的主机&#xff1b;IP协议可以根据路由选择协议提供的路由信息对IP数据报进行转发&#xff0c;直至抵达目的主机。IP地址和MAC地址的匹配&#xff1b;数据链路层使用MAC地址来发送数据帧&#xff0c;因此在实际发送IP报文时&#xff0…

分布式消息队列Kafka(四)- 消费者

1.Kafka消费方式 2.Kafka消费者工作流程 &#xff08;1&#xff09;总体工作流程 &#xff08;2&#xff09;消费者组工作流程 3.消费者API &#xff08;1&#xff09;单个消费者消费 实现代码 package com.zrclass.kafka.consumer; import org.apache.kafka.clients.consum…

【Golang项目实战】手把手教你写一个备忘录程序|附源码——建议收藏

博主简介&#xff1a;努力学习的大一在校计算机专业学生&#xff0c;热爱学习和创作。目前在学习和分享&#xff1a;数据结构、Go&#xff0c;Java等相关知识。博主主页&#xff1a; 是瑶瑶子啦所属专栏: Go语言核心编程近期目标&#xff1a;写好专栏的每一篇文章 前几天瑶瑶子…

0Ω电阻在PCB板中的5大常见作用

在PCB板中&#xff0c;时常见到一些阻值为0Ω的电阻。我们都知道&#xff0c;在电路中&#xff0c;电阻的作用是阻碍电流&#xff0c;而0Ω电阻显然失去了这个作用。那它存在于PCB板中的原因是什么呢&#xff1f;今天我们一探究竟。 1、充当跳线 在电路中&#xff0c;0Ω电阻…