漏刻有时数据可视化Echarts组件开发(3):Echarts插件liquidfill实现水球图心形情人节动画表白

文件引入

    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
    <script src="echarts-liquidfill.min.js"></script>

JS代码

 //构建DOM容器;
    var myChart = echarts.init(document.getElementById("love"));
    var data = [{
        value: 0.9,
        direction: 'left',
        itemStyle: {
            color: '#fff'
        }
    }, 0.6, 0.7, 0.4];

    var option = {
        series: [{
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            shape: 'path://m67.25,28.9c27.42,-69.1 134.84,0 0,88.85c-134.84,-88.85 -27.42,-157.96 0,-88.85z', //心形
            data: data,
            label: {
                fontSize: 28,
                fontWeight: 400,
                color: '#fff',
                formatter: function (params) {
                    return "郭靖&黄蓉";
                }
            },
            backgroundStyle: {
                color: {
                    type: 'linear',
                    x: 1,
                    y: 0,
                    x2: 0.5,
                    y2: 1,
                    colorStops: [{
                        offset: 1,
                        color: 'rgba(255, 255, 255, 0)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(255, 255, 255, .25)'
                    }, {
                        offset: 0,
                        color: 'rgba(255, 255, 255, 1)'
                    }],
                    globalCoord: false
                },
            },
            itemStyle: {
                color: '#ff0033'
            },
            emphasis: {
                color: '#ff0033'
            },
            outline: {
                borderDistance: 5, // 边框线与图表的距离 数字
                itemStyle: {
                    borderWidth: 10, // 边框的宽度
                    borderColor: 'rgba(249, 75, 85, 1)' // 边框颜色
                }
            },
        }]
    };

    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });

lockdatav Done!