仪表盘echarts 柱状配置项内容和展示

gauge,pie

         var value = '4.3';
   var subtext = `样本量：2233`;
   var max = 5;
   option = {
       title: {
           show: true,
           text: value || "仪表盘",
           subtext,
           subtextStyle: {
               align: "center",
           },
           left: 400,
           bottom: 10,
           textStyle: {
               color: '#414957',
               fontSize: 24,
               align: 'center',
               fontFamily: '"Microsoft Yahei","微软雅黑"',
           },
       },
       angleAxis: {
           axisLine: {
               show: false
           },
           axisLabel: {
               show: false
           },
           splitLine: {
               show: false
           },
           axisTick: {
               show: false
           },
           min: 0,
           max: 6.666,
           // boundaryGap: ['0', '10'],
           startAngle: 225
       },
       radiusAxis: {
           type: 'category',
           axisLine: {
               show: false
           },
           axisTick: {
               show: false
           },
           axisLabel: {
               show: false
           },
           data: ['a', 'b', 'c'],
           z: 10
       },
       polar: {
           radius: '105%'
       },
       series: [{
               type: 'bar',
               data: [, , value],
               z: 1,
               coordinateSystem: 'polar',
               barMaxWidth: 24.2,
               name: '警告事件',
               roundCap: true,
               color: new echarts.graphic.LinearGradient(
                   0, 0, 1, 0,
                   [{
                           offset: 0,
                           color: '#FFC4C4',
                       },
                       {
                           offset: 1,
                           color: '#DE585D',
                       }
                   ]
               ),
               barGap: '-100%',
           },
           {
               type: 'bar',
               data: [, , ],
               z: 2,
               coordinateSystem: 'polar',
               barMaxWidth: 24.2,
               name: '警告事件',
               roundCap: true,
               color: '#f00',
               barGap: '-100%',
           },
           {
               type: 'bar',
               data: [, , max],
               z: 0,
               silent: true,
               coordinateSystem: 'polar',
               barMaxWidth: 24.2,
               name: 'C',
               roundCap: true,
               color: '#F1F3F5',
               barGap: '-100%',
           },
           {
               type: 'pie',
               labelLine: {
                   show: false
               },
               z: 1,
               radius: 14,
               data: [{
                   value: 5,
                   itemStyle: {
                       color: 'rgba(108,116,132,0.15)',
                   }
               }]
           }, {
               type: 'pie',
               labelLine: {
                   show: false
               },
               z: 10,
               radius: 3,
               data: [{
                   value: 100,
                   itemStyle: {
                       color: '#fff',
                   }
               }]
           }, {
               type: 'gauge',
               radius: '75%',
               splitNumber: 4,
               max: 5,
               detail: {
                   show: false,
               },
               axisLine: {
                   // 坐标轴线
                   lineStyle: {
                       // 属性lineStyle控制线条样式
                       color: [
                           [0, "#DE585D"],
                           [1, "#DE585D"]
                       ],
                       width: 25,
                       opacity: 0 //刻度背景宽度
                   }
               },
               "data": [{
                   "name": "",
                   "value": value,
               }],
               splitLine: {
                   length: 12, //长刻度节点线长度
                   lineStyle: {
                       width: 2,
                       color: "#c4c6cc"
                   } //刻度节点线
               },
               axisTick: {
                   show: true,
                   lineStyle: {
                       color: "#c4c6cc",
                       width: 2
                   },
                   length: 5,
                   splitNumber: 6
               },
               axisLabel: {
                   show: false,
                   color: '#333',
                   fontSize: 18,
               },
               pointer: {
                   show: true,
                   length: '70%',
                   itemStyle: {
                       color: '#DE585D',
                   }
               },
           },
           {
               "type": "pie",
               radius: ['88%', '82%'],
               "hoverAnimation": false,
               startAngle: 225,
               endAngle: 0,
               "data": [{
                       "name": "",
                       "value": value / 5,
                       "label": {
                           show: false
                       },
                       "labelLine": {
                           show: false
                       },
                       itemStyle: {
                           color: 'rgba(0,0,0,0)'
                       }
                   },
                   { //画中间的图标
                       "name": "",
                       "value": 0,
                       "label": {
                           position: 'inside',
                           backgroundColor: '#fff',
                           borderRadius: 7,
                           padding: 3,
                           borderWidth: 0,
                           borderColor: "#fff"

                       }
                   }, {
                       "name": "",
                       value: 1.33 - value / 5,
                       "label": {
                           show: false
                       },
                       "labelLine": {
                           show: false
                       },
                       itemStyle: {
                           color: 'rgba(255,255,255,0)'
                       }
                   }
               ]
           }
       ],
       tooltip: {
           show: false
       },

   }