echarts水球图编写_JavaScript

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