BANDWIDTHUSE

描述:当前是关于Echarts图表中的 水球图 示例。
 
             var value = 0.5;
 var data = [value, value];
 option = {
     backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
        offset: 0,
        color: '#0f0248'
    }, {
        offset: 1,
        color: '#0f0248'
    }]),
    title: [
        {
            text: 'BANDWIDTHUSE',
            x: 'center',
            y: '70%',
            textStyle: {
                color: '#FFF',
                fontSize: 20,
                fontWeight: 'normal',
            }
        }, {
           text: (value * 100).toFixed(0) + '%',
            x: 'center',
            top: '58%',
            textStyle: {
                fontSize: '80',
                color: '#FFF',
            },
        }],
     series: [{
         type: 'liquidFill',
         radius: '80%',
         center: ['50%', '50%'],
        //   shape: 'roundRect',
         data: data,
         backgroundStyle: {
             color: {
                 type: 'linear',
                 x: 1,
                 y: 0,
                 x2: 0.5,
                 y2: 1,
                 colorStops: [{
                     offset: 1,
                     color: '#0f0248'
                 }, {
                     offset: 0,
                     color: '#0f0248'
                 }],
                 globalCoord: false
             },
         },
         outline: {
             borderDistance: 10,
             itemStyle: {
                 borderWidth: 10,
                 borderColor: {
                     type: 'linear',
                     x: 0,
                     y: 0,
                     x2: 0,
                     y2: 1,
                     colorStops: [{
                         offset: 0,
                         color: '#962498'
                     }, {
                         offset: 1,
                         color: '#eb0a51'
                     }],
                     globalCoord: false
                 },
                 shadowBlur: 10,
                 shadowColor: '#000',
             }
         },
         color: ['rgba(210, 2, 124,0.3)', 'rgba(147, 78, 233,.3)'],
         label: {
             normal: {
                 formatter: '',
             }
         }
     }, ]
 };