echarts水晶球的使用

引入echart.js和水晶球插件echart.liquidfill.js

    <script src="./js/echarts.js"></script>

    <script src="./js/echarts-liquidfill.js"></script>

版本如下

 var option;
    var water_color = {
        type: 'linear',
        x: 0,//线性渐变颜色的起点和终点，取值范围为容器的百分比0-1，(x,y),(x2,y2)分别是起点和终点
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{//渐变颜色的颜色取值
            offset: 1,
            color: 'rgba(58, 71, 212, 0)'
        }, {
            offset: 0.5,
            color: 'rgba(31, 222, 225, .2)'
        }, {
            offset: 0,
            color: 'rgba(31, 222, 225, 1)'
        }],
        globalCoord: false
    }
    //电量
    var basePower = 3840 * 2
    var actualPower = 3840
    var value = actualPower / basePower;
    var data = [{//数据，有关水波的设置,
        value: value,//value的范围：0-1，对应高度百分比
        name: '397', // 数据名称
        direction: 'right', //指定波浪的移动方向'left' 或 'right'， 'none' 表示静止。
        itemStyle: {
            color: water_color // 设置水波的颜色

        }
    }, {
        value: value - 0.1,
        direction: 'right',
        itemStyle: {
            color: water_color // 设置水波的颜色

        }
    }, {
        value: value - 0.15,
        direction: 'right',
        itemStyle: {
            color: water_color // 设置水波的颜色

        }
    },
        // {
        //     value: value-0.2,
        //     direction: 'right',
        //     itemStyle: {
        //         color: water_color // 设置水波的颜色

        //     }
        // }
    ]
    option = {
        title: {
            text: actualPower,
            textStyle: {
                fontSize: 24,
                fontFamily: 'Microsoft Yahei',
                fontWeight: 'normal',
                color: '#bcb8fb',
                rich: {
                    a: {
                        fontSize: 20,
                    }
                }
            },
            x: 'center',//老版本的echart的横向定位，新版用的left，
            y: '35%'
        },
        graphic: [{//发电量
            type: 'group',
            left: 'center',
            bottom: '8%',
            children: [{
                type: 'text',
                z: 100,
                left: '10',
                top: 'middle',
                style: {
                    fill: '#aab2fa',
                    text: '日累计发电量',
                    font: '20px Microsoft YaHei',
                    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: 'rgba(68, 145, 253, 0)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(68, 145, 253, .25)'
                    }, {
                        offset: 0,
                        color: 'rgba(68, 145, 253, 1)'
                    }],
                    globalCoord: false
                },
            },
            outline: {//轮廓
                borderDistance: 0,
                itemStyle: {
                    borderWidth: 10,
                    borderColor: {//线性渐变，可以使用另一个对象
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(69, 73, 240, 0)'
                        }, {
                            offset: 0.5,
                            color: 'rgba(69, 73, 240, .25)'
                        }, {
                            offset: 1,
                            color: 'rgba(69, 73, 240, 1)'
                        }],
                        globalCoord: false
                    },
                    shadowBlur: 10,
                    shadowColor: '#000',
                }
            },
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 1,
                    color: 'rgba(58, 71, 212, 0)'
                }, {
                    offset: 0.5,
                    color: 'rgba(31, 222, 225, .2)'
                }, {
                    offset: 0,
                    color: 'rgba(31, 222, 225, 1)'
                }],
                globalCoord: false
            },
            label: {
                normal: {
                    formatter: '',
                }
            }
        },]
    };