liquidFillecharts 球配置项内容和展示

水球图

       var label = {
     normal: {
         textStyle: {
             color: '#ffffff',
             insideColor: '#ffffff',
             fontSize: 13
         }
     }
 };

 option = {
     backgroundColor: "#0f375f",
     graphic: [{
             type: 'group',
             left: '13%',
             top: '60%',
             children: [{
                 type: 'text',
                 z: 100,
                 left: 'center',
                 top: 'top',
                 style: {
                     fill: '#FFFFFF',
                     text: '电气',
                     font: '3vw Microsoft YaHei'
                 }
             }]
         },
         {
             type: 'group',
             left: '37%',
             top: '60%',
             children: [{
                 type: 'text',
                 z: 100,
                 left: 'center',
                 top: 'top',
                 style: {
                     fill: '#FFFFFF',
                     text: '排烟',
                     font: '3vw Microsoft YaHei'
                 }
             }]
         },
         {
             type: 'group',
             left: '60%',
             top: '60%',
             children: [{
                 type: 'text',
                 z: 100,
                 left: 'center',
                 top: 'top',
                 style: {
                     fill: '#FFFFFF',
                     text: '水压',
                     font: '3vw Microsoft YaHei'
                 }
             }]
         },
         {
             type: 'group',
             left: '82%',
             top: '60%',
             children: [{
                 type: 'text',
                 z: 100,
                 left: 'center',
                 top: 'top',
                 style: {
                     fill: '#FFFFFF',
                     text: '火灾',
                     font: '3vw Microsoft YaHei'
                 }
             }]
         },
     ],
     series: [

         {
             name: '水球图',
             type: 'liquidFill',
             radius: '20%',
             center: ['15%', '40%'],
             waveAnimation: 10, // 动画时长
             amplitude: 5, // 振幅
             data: [0.6, 0.6 - (1 / 10)],
             itemStyle: { //渐变色设置
                 normal: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                         offset: 0,
                         color: '#38D884'

                     }, {
                         offset: 1,
                         color: '#17B9C2'
                     }]),
                 }
             },
             color: {
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 1,
                 y2: 1,
                 colorStops: [{
                     offset: 1,
                     color: '#38D884'
                 }, {
                     offset: 0,
                     color: '#17B9C2'
                 }],
                 globalCoord: false
             },
             label,
             outline: {
                 show: true,
                 borderDistance: 0,
                 itemStyle: {
                     borderWidth: 2,
                     borderColor: {
                         type: 'linear',
                         x: 0,
                         y: 0,
                         x2: 1,
                         y2: 1,
                         colorStops: [{
                             offset: 0,
                             color: '#38D884'
                         }, {
                             offset: 1,
                             color: '#17B9C2'
                         }],
                         globalCoord: false
                     },
                 }
             },
             backgroundStyle: {
                 color: '#58A0AD'
             }
         },
         {
             name: '水球图',
             type: 'liquidFill',
             radius: '20%',
             center: ['40%', '40%'],
             waveAnimation: 10, // 动画时长
             amplitude: 5, // 振幅
             data: [0.6, 0.6 - (1 / 10)],
             itemStyle: { //渐变色设置
                 normal: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                         offset: 0,
                         color: '#F8862C'

                     }, {
                         offset: 1,
                         color: '#FA5E56'
                     }]),
                 }
             },
             color: {
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 1,
                 y2: 1,
                 colorStops: [{
                     offset: 1,
                     color: 'rgba(248, 134, 44, 1)'
                 }, {
                     offset: 0,
                     color: 'rgba(250, 94, 86, 1)'
                 }],
                 globalCoord: false
             },
             label,
             outline: {
                 show: true,
                 borderDistance: 0,
                 itemStyle: {
                     borderWidth: 2,
                     borderColor: {
                         type: 'linear',
                         x: 0,
                         y: 0,
                         x2: 1,
                         y2: 1,
                         colorStops: [{
                             offset: 0,
                             color: 'rgba(248, 134, 44, 1)'
                         }, {
                             offset: 1,
                             color: 'rgba(250, 94, 86, 1)'
                         }],
                         globalCoord: false
                     },
                 }
             },
             backgroundStyle: {
                 color: '#8D8690'
             }
         },
         {
             name: '水球图',
             type: 'liquidFill',
             radius: '20%',
             center: ['63%', '40%'],
             waveAnimation: 10, // 动画时长
             amplitude: 5, // 振幅
             data: [0.6, 0.6 - (1 / 10)],
             itemStyle: { //渐变色设置
                 normal: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                         offset: 0,
                         color: '#14DAFF'

                     }, {
                         offset: 1,
                         color: '#4C87FF'
                     }]),
                 }
             },
             color: {
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 1,
                 y2: 1,
                 colorStops: [{
                     offset: 1,
                     color: '#14DAFF'
                 }, {
                     offset: 0,
                     color: '#4C87FF'
                 }],
                 globalCoord: false
             },
             label,
             outline: {
                 show: true,
                 borderDistance: 0,
                 itemStyle: {
                     borderWidth: 2,
                     borderColor: {
                         type: 'linear',
                         x: 0,
                         y: 0,
                         x2: 1,
                         y2: 1,
                         colorStops: [{
                             offset: 0,
                             color: '#14DAFF'
                         }, {
                             offset: 1,
                             color: '#4C87FF'
                         }],
                         globalCoord: false
                     },
                 }
             },
             backgroundStyle: {
                 color: '#72A2B3'
             }
         },
         {
             name: '水球图',
             type: 'liquidFill',
             radius: '20%',
             center: ['85%', '40%'],
             waveAnimation: 10, // 动画时长
             amplitude: 5, // 振幅
             data: [0.6, 0.6 - (1 / 10)],
             itemStyle: { //渐变色设置
                 normal: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                         offset: 0,
                         color: '#FF850F'

                     }, {
                         offset: 1,
                         color: '#FFBF32'
                     }]),
                 }
             },
             color: {
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 1,
                 y2: 1,
                 colorStops: [{
                     offset: 1,
                     color: '#FF850F'
                 }, {
                     offset: 0,
                     color: '#FFBF32'
                 }],
                 globalCoord: false
             },
             label,
             outline: {
                 show: true,
                 borderDistance: 0,
                 itemStyle: {
                     borderWidth: 2,
                     borderColor: {
                         type: 'linear',
                         x: 0,
                         y: 0,
                         x2: 1,
                         y2: 1,
                         colorStops: [{
                             offset: 0,
                             color: '#FF850F'
                         }, {
                             offset: 1,
                             color: '#FFBF32'
                         }],
                         globalCoord: false
                     },
                 }
             },
             backgroundStyle: {
                 color: 'transparent'
             }
         },
     ]

 };