echarts水球图编写

// 前提条件 需要引入这个插件


// 代码

let Chart = echarts.init(document.getElementById('Chart'));
let option = {
    title: {                 // 水球图标题样式
        text: '日',
        left: 'center',
        bottom: '10%',
        textStyle: {
            color: '#ffffff',
            fontSize: 14
        }
    },
    tooltip: {
        show: true
    },
    series: [
        {
            name: '日',
            type: 'liquidFill',         // 水球图样式
            center: ['50%', '45%'],     // 水球图位置
            amplitude: 3,               // 波浪波动起伏大小
            waveLength: '100%',         // 波浪长度
            color: ['#3399cc'],         // 波浪颜色
            backgroundStyle: {
                color: '#ffffff',       // 内部球背景颜色
                borderWidth: 2,         // 内部球边框宽度
                borderColor: '#e3e3e3'  // 内部球边框颜色
            },
            label:{
                normal:{
                    formatter: '234',           // 内部文字内容
                    textStyle: {
                        color: '#ffffff',           // 在波浪上方时的文字颜色
                        insideColor: '#ffffff',     // 在波浪下方时的文字颜色
                        fontSize: 10            // 文字大小
                    }
                }
            },
            outline: {
                borderDistance: 0,          // 外边框与内边框间的距离
                itemStyle: {
                    borderWidth: 5,         // 外边框的宽度
                    borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{        // 1代表上面        // 外边框的颜色（渐变色）
                        offset: 0,
                        color: '#1b6491'
                    }, {
                        offset: 1,
                        color: '#3399cc'
                    }]),
                }
            },
            data: [0.6]                    // 水球的注满度 60%
        }
    ]
};
Chart.setOption(option);

 

 这个水球内部的背景，没办法调成纯白色，设置成白色背景还是发灰，不知哪位会调