SunburstCircleMenu

安装

npm i sunburst-circle-menu

使用

js

import SunburstCircleMenu from 'sunburst-circle-menu'

export default {
  components: { SunburstCircleMenu },
  data() {
      return {
          // 旭日图 series data 
          // 可增加所需配置参数
          circleToolData: [
            {
              name: '一级菜单',
              children: [
                {
                  name: '二级菜单',
                  children: [
                    {
                      name: '三级菜单',
                      method: '自定义方法名称',
                      itemStyle: {
                        color: '#54b6fc' // 样式
                      },
                    }
                  ]
                }
              ]
            }
          ]
      }
  },
  methods() {
     show(item) {
      console.log('item: ', item)
      this.$refs.SunburstCircleMenu.show() // 触发插件绘制函数
    },
  }
}

html

<SunburstCircleMenu 
	ref="sunburstCircleMenu" 
	:circle-tool-data="circleToolData" 
    @searchPer="searchPer" 
/>

插件 props

	id: {
      type: String,
      default: 'SunburstCircleMenu'
    },
    height: {
      type: String,
      default: '936px'
    },
    // 菜单
    circleToolData: {
      type: Array,
      default: () => []
    },
    // 旭日图配置
    radius: {
      type: Array,
      default: () => {
        return [0, '10%']
      }
    },
    emphasis: {
      type: Object,
      default: () => {
        return {
          focus: 'none',
          itemStyle: {
            color: ' rgba(254, 175, 18, .9)'
          },
          label: {
            color: '#000',
          }
        }
      }
    },
    label: {
      type: Object,
      default: () => {
        return {
          color: '#fff',
        }
      }
    },
    itemStyle: {
      type: Object,
      default: () => {
        return {
          color: 'rgba(0, 78, 159, .9)'
        }
      }
    },
    levels: {
      type: Array,
      default: () => {
        return [
          {}, {
            r0: '5%',
            r: '15%',
            itemStyle: {
              borderWidth: 2
            },
            label: {
              rotate: 0
            }
          }, {
            r0: '15%',
            r: '25%',
            label: {
              rotate: 0,
              align: 'center'
            }
          }, {
            r0: '25%',
            r: '35%',
            label: {
              rotate: 0,
              align: 'center'
            }
          }, {
            r0: '35%',
            r: '45%',
            label: {
              rotate: 0,
              align: 'center'
            }
          }, {
            r0: '45%',
            r: '55%',
            label: {
              rotate: 0,
              align: 'center'
            }
          }, {
            r0: '55%',
            r: '65%',
            label: {
              rotate: 0,
              align: 'center'
            }
          }, {
            r0: '65%',
            r: '75%',
            label: {
              rotate: 0,
              align: 'center'
            }
          }, {
            r0: '75%',
            r: '85%',
            label: {
              rotate: 0,
              align: 'center'
            }
          }, {
            r0: '85%',
            r: '95%',
            label: {
              rotate: 0,
              align: 'center'
            }
          }, {
            r0: '95%',
            r: '100%',
            label: {
              rotate: 0,
              align: 'center'
            }
          }
        ]
      }
    },