动态柱状图echarts 球配置项内容和展示

      //当前值
var totalData = 600
var onlineData = 300
var offlineData = 200
var warnData = 100
//最大值
var maxData = 800
var value1 = (totalData / maxData).toFixed(2);
var value2 = (onlineData / totalData).toFixed(2);
var value3 = (offlineData / totalData).toFixed(2);
var value4 = (warnData / totalData).toFixed(2);
var data1 = [value1, value1, value1, value1];
var data2 = [value2, value2, value2, value2];
var data3 = [value3, value3, value3, value3];
var data4 = [value4, value4, value4, value4];

option = {
    //  backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
    //     offset: 0,
    //     color: '#431ab8'
    // }, {
    //     offset: 1,
    //     color: '#471bba'
    // }]),

    title: [{
            text: '圆形图-动态水流2 ?',
            x: '50%',
            y: 30,
            textAlign: 'center',
            textStyle: {
                fontSize: '30',
                fontWeight: '100',
                color: '#333',
                textAlign: 'center',
            },
        },
        // 蓝色
        {
            text: '总数：' + (value1 * 100).toFixed(0) + '%',
            left: '30%',
            top: '30%',
            textAlign: 'center',
            textStyle: {
                fontSize: '30',
                fontWeight: '400',
                color: '#02456d',
                textAlign: 'center',
                textBorderColor: 'rgba(0, 0, 0, 0)',
                textShadowColor: '#fff',
                textShadowBlur: '0',
                textShadowOffsetX: 0,
                textShadowOffsetY: 1,
            },
        },
        // 绿色
        {
            text: '在线：' + (value2 * 100).toFixed(0) + '%',
            left: '30%',
            top: '70%',
            textAlign: 'center',
            textStyle: {
                fontSize: '30',
                fontWeight: '400',
                color: '#295008',
                textAlign: 'center',
                textBorderColor: 'rgba(0, 0, 0, 0)',
                textShadowColor: '#fff',
                textShadowBlur: '0',
                textShadowOffsetX: 0,
                textShadowOffsetY: 1,
            },
        },
        // 黄色
        {
            text: '离线：' + (value3 * 100).toFixed(0) + '%',
            left: '70%',
            top: '30%',
            textAlign: 'center',
            textStyle: {
                fontSize: '30',
                fontWeight: '400',
                color: '#a06a0a',
                textAlign: 'center',
                textBorderColor: 'rgba(0, 0, 0, 0)',
                textShadowColor: '#fff',
                textShadowBlur: '0',
                textShadowOffsetX: 0,
                textShadowOffsetY: 1,
            },
        },
        // 红色
        {
            text: '告警：' + (value4 * 100).toFixed(0) + '%',
            left: '70%',
            top: '70%',
            textAlign: 'center',
            textStyle: {
                fontSize: '30',
                fontWeight: '400',
                color: 'red',
                textAlign: 'center',
                textBorderColor: 'rgba(0, 0, 0, 0)',
                textShadowColor: '#fff',
                textShadowBlur: '0',
                textShadowOffsetX: 0,
                textShadowOffsetY: 1,
            },
        },
    ],
    series: [
        {
            type: 'liquidFill',
            radius: '30%',
            center: ['30%', '30%'],
            amplitude: 5,
            //水填充图的形状 circle默认圆形  rect矩形  triangle三角形  
            //diamond菱形  pin水滴状 arrow箭头状、svg的path
            // shape: 'roundRect',
            data: data1,
            backgroundStyle: {
                borderWidth: 1,
                color: 'transparent',
            },
            outline: {
                show: true,
                itemStyle: {
                    borderWidth: 0,
                },
                borderDistance: 0,
            },
            //波浪颜色
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 1,
                    color: 'rgba(0, 108, 154, 1)'
                }, {
                    offset: 0.5,
                    color: 'rgba(0, 155, 219, .5)'
                }, {
                    offset: 0,
                    color: 'rgba(0, 155, 219, 0)'
                }],
                globalCoord: false
            },
            label: {
                normal: {
                    formatter: '',
                }
            }
        },
        {
            type: 'liquidFill',
            radius: '30%',
            center: ['30%', '70%'],
            amplitude: 20,
            data: data2,
            backgroundStyle: {
                borderWidth: 1,
                color: 'transparent',
            },
            outline: {
                show: true,
                itemStyle: {
                    borderWidth: 0,
                },
                borderDistance: 0,
            },
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 1,
                    color: 'rgba(74, 134, 21, 1)'
                }, {
                    offset: 0.5,
                    color: 'rgba(119, 185, 63, .5)'
                }, {
                    offset: 0,
                    color: 'rgba(119, 185, 63, 0)'
                }],
                globalCoord: false
            },
            label: {
                normal: {
                    formatter: '',
                }
            }
        },
        {
            type: 'liquidFill',
            radius: '30%',
            center: ['70%', '30%'],
            data: data3,
            backgroundStyle: {
                borderWidth: 1,
                color: 'transparent',
            },
            outline: {
                show: true,
                itemStyle: {
                    borderWidth: 0,
                },
                borderDistance: 0,
            },
           color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 1,
                    color: 'rgba(189, 126, 12, 1)'
                }, {
                    offset: 0.5,
                    color: 'rgba(251, 173, 23, .5)'
                }, {
                    offset: 0,
                    color: 'rgba(251, 173, 23, 0)'
                }],
                globalCoord: false
            },
            label: {
                normal: {
                    formatter: '',
                }
            }
        },
        {
            type: 'liquidFill',
            radius: '30%',
            center: ['70%', '70%'],
            amplitude: 5,
            data: data4,
            backgroundStyle: {
                borderWidth: 1,
                color: 'transparent',
            },
            outline: {
                show: true,
                itemStyle: {
                    borderWidth: 0,
                },
                borderDistance: 0,
            },
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 1,
                    color: 'rgba(169, 14, 115, 1)'
                }, {
                    offset: 0.5,
                    color: 'rgba(255, 0, 0, .5)'
                }, {
                    offset: 0,
                    color: 'rgba(255, 0, 0, 0)'
                }],//填充颜色
                globalCoord: false
            },
            label: {
                normal: {
                    formatter: '',
                }
            }
        },
    ]
};

// backgroundStyle: {
//      color: {
//          type: 'linear',
//          x: 1,
//          y: 0,
//          x2: 0.5,
//          y2: 1,
//          colorStops: [{
//              offset: 1,
//              color: 'rgba(68, 145, 253, 0)'
//          }, {
//              offset: 0.5,
//              color: 'rgba(68, 145, 253, .25)'
//          }, {
//              offset: 0,
//              color: 'rgba(68, 145, 253, 1)'
//          }],
//          globalCoord: false
//      },
//  },
// outline: {
//     borderDistance: 0,
//     itemStyle: {
//         borderWidth: 20,
//         borderColor: {
//             type: 'linear',
//             x: 0,
//             y: 0,
//             x2: 0,
//             y2: 1,
//             colorStops: [{
//                 offset: 0,
//                 color: 'rgba(69, 73, 240, 0)'
//             }, {
//                 offset: 0.5,
//                 color: 'rgba(69, 73, 240, .25)'
//             }, {
//                 offset: 1,
//                 color: 'rgba(69, 73, 240, 1)'
//             }],
//             globalCoord: false
//         },
//         shadowBlur: 10,
//         shadowColor: '#000',
//     }
// },