echarts 水滴图实现方式。

最新推荐文章于 2025-05-04 14:11:42 发布

原创最新推荐文章于 2025-05-04 14:11:42 发布 · 2.6k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

jsp

本文分享了使用ECharts实现水滴图的方法，包括渐变色和颜色更改等功能，提供了详细的代码示例。

项目中需要实现水滴图的应用搞了一下，效果还可以，感觉做的还是比较全面的有渐变色，颜色更改等措施。

效果图：

直接上代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <div id="container" style="height: 500px; width: 500px;"></div>
    </body>
    <script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/echarts-liquidfill.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            series: [{
                type: 'liquidFill',
                data: [0.5],
                radius: '40%',
                shape: 'circle',
                
                center: ['25%', '25%'],
                outline: {
                    show: false
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                            [
                                {offset: 0, color: '#153f4d'},
                                {offset: 0.5, color: '#19967a'},
                                {offset: 1, color: '#3feeae'}
                            ]                //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                        )
                    }
                },
            },{
                type: 'liquidFill',
                data: [0.4],
                radius: '30%',
                shape: 'circle',
                center: ['75%', '50%'],
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                            [
                                {offset: 0, color: '#f2694d'},
                                {offset: 0.5, color: '#f2694d'},
                                {offset: 1, color: '#f2694d'}
                            ]                //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                        )
                    }
                },
                outline: {
                    show: false
                },
                label:{
                    normal:{
                        position:['50%','40%'],//此处调节显示的位置  前者是左右，后者是上下位置
//                        formatter:  '{a}\n{b} Value: {c}', //{a}表示系列名，{b}为键名，{c}为值
                        textStyle:{
                            fontSize:14,//设置字体大小
                        }
                    }
                }
                
            }]

        };
            
        if(option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>

</html>

echarts中的echarts.js和echarts-liquidfill.js可能会有出入建议用上传的这两个js。不然渐变色会有出入。

这是引用的js地址：https://pan.baidu.com/s/1Eq-LFuaWiQDQ5IWSJGoliA

提取密码：11h5；

希望帮到大家。

标签

#echarts #html #水滴图