如何画一个不规则（或奇形怪状）图形的液体统计图？

FE_C_P小麦
181 阅读1分钟

需求简介

  • 在开发过程中遇到产品给你一个奇形怪状的图形，说这个图形是个容器，里面要有液体，一般用来表示这个容器中当前液体的占比，比如：一个水瓶中当前含水量，再比如表示车子的油表数据之类的
  • 你遇到这种需求有什么思路吗？

我的思路

  • 让设计把容器的svg给我，要求svg的图形是 绘制的，当然一般都是这样绘制的，如果实在拿不到就把他给到的svg图交给AI去转换，或者网上去找在线工具，总之要拿到 path 绘制路径；
  • 接下来就交给 echarts 去实现就可以了；

比如给到我们这样一个 svg

  • 我们把其中的 path 路径复制到等会用到的 echarts 配置中即可
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1729664532170" class="icon" viewBox="0 0 1821 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4390" xmlns:xlink="http://www.w3.org/1999/xlink" width="355.6640625" height="200"><path d="M1234.309 183.324h-601.483c-25.967 0-47.729 21.761-47.729 47.729v697.617c0 25.969 21.762 47.729 47.729 47.729h601.483c26.669 0 48.43-21.761 48.43-47.729v-697.617c0-25.97-21.762-47.729-48.43-47.729zM1191.487 598.818c0 16.129-12.623 28.772-28.773 28.772h-47.729c-15.427 0-28.073-12.644-28.073-28.772v-315.152c0-15.424 12.646-28.772 28.073-28.772h47.729c16.152 0 28.773 13.347 28.773 28.772v315.152zM675.625 63.999h181.779v76.502h-181.779z" p-id="4391"></path></svg>

代码在此！！！！！！！

image.png

  • 重点：一定要引入 echarts-liquidfill.min.js，不然原有的 echarts 中是不存在 series type: 'liquidFill' 这个类型的，如果你是vue项目，那么就是 install echarts-liquidfill，而且要记得在组件中写上 import 'echarts-liquidfill'
<!DOCTYPE html>
<html style="height: 100%;width:100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; width:100%">
    <div id="chart-panel" style="height: 100%;width: 100%"></div>
    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@3/dist/echarts-liquidfill.min.js"></script>

    <script type="text/javascript">
        var dom = document.getElementById("chart-panel");
        var myChart = echarts.init(dom);
        var option;
        var app = {};
        option = {
            backgroundColor: 'white',
            series: [{
                type: 'liquidFill',
                name: 'Multi-Data',
                radius: '60%',
                shape: "path://M1234.309 183.324h-601.483c-25.967 0-47.729 21.761-47.729 47.729v697.617c0 25.969 21.762 47.729 47.729 47.729h601.483c26.669 0 48.43-21.761 48.43-47.729v-697.617c0-25.97-21.762-47.729-48.43-47.729zM1191.487 598.818c0 16.129-12.623 28.772-28.773 28.772h-47.729c-15.427 0-28.073-12.644-28.073-28.772v-315.152c0-15.424 12.646-28.772 28.073-28.772h47.729c16.152 0 28.773 13.347 28.773 28.772v315.152zM675.625 63.999h181.779v76.502h-181.779z", //svg路径
                data: [0.5],  // data个数代表波浪数
                color: ['#3C81E8'], //波浪颜色
                outline: {
                    show: false,
                },
                backgroundStyle: {
                    color: '#455160',
                    borderColor: '#455160',
                    borderWidth: 0,
                },

                label: {

                    normal: {
                        position: ['36%', '50%'],
                        formatter: function (params) { return `油量：${params.value * 100}%` },
                        textStyle: {
                            fontSize: 30,
                            color: '#fff'
                        }
                    }
                }
            }]
        }
        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
    </script>
</body>

</html>
avatar
文章
阅读
粉丝