echarts实现云台控制按钮效果，方向按钮

效果图

代码

option = {
  color: ['#bfbfbf'],
  tooltip: {
    show: false
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: true,
      itemStyle: {
        // borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'inside',
        fontSize: 36,
        color: '#fff'
      },
      emphasis: {
        label: {
          show: true,
          // position: 'center',
          // fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      startAngle: 22,
      data: [
        {
          value: 1,
          name: '右',
          label: {
            rotate: 0,
            formatter: function () {
              return '>';
            }
          }
        },
        {
          value: 1,
          name: '',
          label: {
            rotate: -45,
            formatter: function () {
              return '';
            }
          }
        },
        {
          value: 1,
          name: '下',
          label: {
            rotate: -90,
            formatter: function () {
              return '>';
            }
          }
        },
        {
          value: 1,
          name: '',
          label: {
            rotate: -135,
            formatter: function () {
              return '';
            }
          }
        },
        {
          value: 1,
          name: '左',
          label: {
            rotate: -180,
            formatter: function () {
              return '>';
            }
          }
        },
        {
          value: 1,
          name: '',
          label: {
            rotate: 135,
            formatter: function () {
              return '';
            }
          }
        },
        {
          value: 1,
          name: '上',
          label: {
            rotate: 90,
            formatter: function () {
              return '>';
            }
          }
        },
        {
          value: 1,
          name: '',
          label: {
            rotate: 45,
            formatter: function () {
              return '';
            }
          }
        }
      ]
    },
    {
      name: '',
      type: 'pie',
      radius: '40%',
      data: [
        {
          value: 1,
          name: '急停恢复',
          itemStyle: { color: '#FF4500' },
          label: {
            show: true,
            position: 'center',
            fontSize: 40,
            color: '#fff',
            formatter: function () {
              return '急\t\t停\n\n恢\t\t复';
            }
          }
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 1,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    },
    {
      name: '',
      type: 'pie',
      radius: '20%',
      center: ['15%', '20%'],
      data: [
        {
          value: 1,
          name: '复位',
          itemStyle: { color: '#1afa29' },
          label: { show: true, position: 'center', fontSize: 40, color: '#fff' }
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 1,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    },
    {
      name: '',
      type: 'pie',
      radius: '20%',
      center: ['85%', '20%'],
      data: [
        {
          value: 1,
          name: '手动',
          itemStyle: { color: '#409EFF' },
          label: { show: true, position: 'center', fontSize: 40, color: '#fff' }
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 1,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};