ECharts爱心水滴图

只会应用不懂原理的程序员

已于 2023-10-17 16:37:37 修改

阅读量227

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2023-03-09 16:05:01 首次发布

本文链接：https://blog.csdn.net/m0_71231013/article/details/129424934

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

大家工作之余也不要忘了自己的感情生活啊！

这里为大家分享一个爱心的echarts图！

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.0/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@3/dist/echarts-liquidfill.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:600px;margin: 0 auto;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
        backgroundColor: '#fff',
        title: {
        left: 'center',
        bottom: 20,
        text: '蠢货',
        textStyle: {
            fontWeight: 'bold',
            fontSize: 25,
            color: '#333'
        },
        subtext: '',
        subtextStyle: {
            color: '#333'
        }
    },
    series: [{
        type: "liquidFill",
        name: '蠢货',
        radius: "85%",
        center: ['50%', '45%'],
        shape: "path://M657.462,490.835c-21.359-45.771-82.071-35.092-82.471,18.032-0.221,29.177,28.91,40.083,48.306,51.747,18.807,11.312,32.193,26.786,34.291,33.373,1.8-6.454,16.705-22.366,34.115-33.689,19.036-12.382,48.527-22.572,48.306-51.748C739.607,455.294,677.839,446.889,657.462,490.835Z",
        data: [0.7, 0.7, 0.7], //datat
        color: ['#fc8b8b'],
        outline: {
            show: false,
        },
        backgroundStyle: {
            color: '#edd4d4',
            borderColor: "#fff",
            borderWidth: 1,
            shadowColor: "rgba(0, 0, 0, 0.4)",
            shadowBlur: 0,
        },
        label: {
            normal: {
                position: ["50%", "40%"],
                formatter: () => {
                    return (0.99 * 100) + '%'
                },
                textStyle: {
                    fontSize: 30,
                },
            },
        },
    }, ],
}
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

最后，大家快去分享给自己喜欢的人吧！