Echarts之水滴球

以你之姓@ 2021-09-17 05:22 697阅读 0赞

1.  水滴球型图

注意：需要引用 echarts-liquidfill.js文件。

eg:

html 文件头部需要引用js文件如下。
    <script src="js/jquery.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/echarts-liquidfill.js"></script> //水滴球特需的js
    
    <body>
    <div id="liqu" style="width:200px;height:200px"></div>
    </body>
    
    //这是一个jq方法，调用即可。
    function fnEchartsQuli() { 
    var ChartLiqu = echarts.init(document.getElementById('liqu'));//初始化图形的容器
            option = {
                backgroundColor: '#0a1d38',//水滴球的外部背景色
                series: [{
                    type: 'liquidFill',//类型 eg: map、bar、line.. 代表不同类型的图表
                    name: '实时流量',//球中心出现的字
                    radius: '90%',//球的大小百分比 或者数字 eg:100或者100px 数字默认px
    
                    data: [0.2],  //数据 可以是数组,一个数对应一条波浪线
    
                    outline: {
                        show: false, //外边圈；true为显示 大小包含在球的整体大小中
                    },
                    backgroundStyle: {
                        borderColor: '#1598ff',//边框颜色
                        borderWidth: 2,//边框宽度
                        shadowColor: 'rgba(0, 0, 0, 0.1)',//边框中的阴影
                        shadowBlur: 10, //阴影扩散的范围
                        color: '#0a1d38'//球内背景颜色
                    },
    
                    label: {
                        normal: {
                            position: ['50%', '40%'],//球内内容位置
                            formatter: '{a}\n 105m³/s',//内容，可以根据需要调整 \n换行 {a}:series中的name值
                            textStyle: {
                                fontSize: '15',//内容字体大小 单位px
                                color: '#b1c6e5'//内容字体颜色
    
                            }
                        }
                    }
                }],
            };
            ChartRainFall.setOption(option);//绑定
            
            $("#liqu").resize(function () {    //使图表大小自适应屏幕大小，前提：图表容器div要设置百分比，不能固定死大小。可以给 min-height:**px min-width:**px;直接百分比不能加载出图表
                $(ChartLiqu).resize();
            })
        }