echart 扇形图，玫瑰图配置说明

echart 扇形图，玫瑰图配置说明

先看效果

配置说明

官方配置说明： ​​https://echarts.apache.org/zh/option.html#series-pie​​

option :{
     legend: {
         show: false,
     },
     tooltip: {
         show: true
     },
     series: [
         {
             name: '报警信息',
             type: 'pie',
             radius: [20, 100], // 圆环的内外圈的半径
             center: ['50%', '50%'],
             roseType: 'area',
             itemStyle: {
                 borderRadius: 8
             },
             label: { // 数据名
                 color: 'white',
             },
             labelLine: { // 引导线
                 length: 5,  // 引导线第一段长度
                 length2: 10, // 引导线第二段长度
             },
             data: [
                 { value: 40, name: '设备 1' },
                 { value: 38, name: '设备 2' },
                 { value: 32, name: '设备 3' },
                 { value: 30, name: '设备 4' },
                 { value: 28, name: '设备 5' },
                 { value: 26, name: '设备 6' },
                 { value: 22, name: '设备 7' },
                 { value: 18, name: '设备 8' }
             ]
         }
     ]
 }

空数据时的占位图形样式

当没有数据的时候，展示的图形样式，默认是 ​​lightgray​​

series: [
     {
         name: '报警信息',
         type: 'pie',
         radius: [20, 90], // 圆环的内外圈的半径
         center: ['50%', '50%'],
         roseType: 'area',
         emptyCircleStyle: {
             color: '#00deff', // 背景颜色
             opacity: 0.2 // 透明度
         },
     }
]