漸變水球圖

這是我修改官網（EChart)： 

option = {
    series: [{
        type: 'liquidFill',
        radius: '50%',
        data: [0.6],
        label: {
            normal: {
                color: '#fff',
                insideColor: 'transparent',
                textStyle: {
                    fontSize: 22,
                    fontWeight: 'bold',
                    fontFamily: 'Microsoft YaHei'
                }
            }
        },
        color: {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
                offset: 1,
                color: ['rgba(32, 240, 242, 1)'], // 0% 處的顏色
            }, {
                offset: 0,
                color: ['rgba(65, 141, 235, 0.8)'], // 100% 處的顏色
            }],
            global: false // 缺省爲 false
        },
        outline: {
            show: true,
            borderDistance: 5,
            itemStyle: {
                borderColor: 'rgba(67,209,100,1)',
                borderWidth: 0
            }
        },
        backgroundStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 1,
                    color: ['rgba(68, 107, 241, 0.8)'], // 0% 處的顏色
                }, {
                    offset: 0,
                    color: ['rgba(101, 2, 193, 1)'], // 100% 處的顏色
                }],

            },
        }
    }]

};

如下圖(這是我想要的效果)：

 

放進vue項目中發現水波不動，就改爲以下，就動了！！具體我也不知道爲什麼（-_-!!!!!）

option = {
            series: [{
                type: 'liquidFill',
                radius: '90%',
                data: [0.6],
                label: {
                    normal: {
                        color: '#fff',
                        insideColor: 'transparent',
                        textStyle: {
                            fontSize: 22,
                            fontWeight: 'bold',
                        }
                    }
                },
                color: [{
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [{
                        offset: 1,
                        color: ['rgba(32, 240, 242, 1)'], // 0% 處的顏色
                    }, {
                        offset: 0,
                        color: ['rgba(65, 141, 235, 1)'], // 100% 處的顏色
                    }],
                    global: false // 缺省爲 false
                }],
                outline: {
                    show: true,
                    borderDistance: 5,
                    itemStyle: {
                        borderColor: 'rgba(67,209,100,1)',
                        borderWidth: 0
                    }
                },
                backgroundStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 1,
                            color: ['rgba(68, 107, 241, 0.85)'], // 0% 處的顏色
                        }, {
                            offset: 0,
                            color: ['rgba(101, 2, 193, 0.85)'], // 100% 處的顏色
                        }],
                    }
                }
            }]

        };