echarts水球圖編寫

// 前提條件 需要引入這個插件
<script src="./echarts-liquidfill.min.js"></script>

// 代碼

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);

 

 這個水球內部的背景，沒辦法調成純白色，設置成白色背景還是發灰，不知哪位會調