echarts 绘制风向杆(风羽)_echarts 风场-CSDN博客

本文链接：https://blog.csdn.net/lhpxx/article/details/126491226

因为用作气象展示，专业人员要求风向杆更能清楚的看到风向风速，简单的配置echarts，实现风向杆出图。

因为echarts 没有风向杆需要从外部引入，这里用到的是风向杆字体文件 用作将风向风速转换成风向杆。

首先在css引入风字体文件

@font-face {
    font-family: "barb";
    src: url("./font/wind.ttf");
}

然后就是要用到echarts的自定义系列。

series: [
    {
        type: 'custom',    //自定义系列
        renderItem: function(params, api){
            //根据x，y 计算位置
            var point = api.coord([api.value(0), api.value(1)]);

            // 利用canvas 将风向风速用风字体画出来
            let canvas = document.createElement('canvas');
            canvas.width = 9;
            canvas.height = 30;
            let ctx = canvas.getContext("2d");
            ctx.fillStyle = fillStyle;
            let windText = getBarb(api.value(2));  //风速转换为风字体
            ctx.font = "30px barb";
            ctx.fillText(windText, 1, 32);

            // 因为风向杆的字体大小有些误差, 例如: 最小的风向杆和略大的风向杆; 这里将其转换成图片 统一调整偏移量
            let imgsrc = canvas.toDataURL(["image/png", 2]);

            let children = {
                type: "image",
                style: {
                    image: imgsrc,
                },
                origin: [1, 30],    //图片生成有一定的空白, 减去空白位置将风向杆的指向的位置为旋转中心
                rotation: -api.value(3) / 180 * Math.PI,   //旋转（风向） 
                position: [point[0] - 1, point[1] - 30],    //同样以风向杆的指向的位置为定位点
            };
            return children
        },
        data: [[x, y, 风速, 弧度]]
    }
]

getBarb 这个函数就是用来配合我们的风字体文件取值的，取到的就是风字体里对应风向风速的代码值，风字体识别代码转换成风向杆，因为涉及其他信息这里就不放出来了。

效果就是这样了。

--------------------------------------------------------------------------------------------------------------------------------

更新

增加一个小案例

案例是直接就能看到效果的，只是上传的比较早期 echarts cdn和字体链接过期了，echarts cdn上官网找进行替换就好了，字体随便找个艺术字网站找个明显的字体换下链接

<!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>风向杆</title>
    <style>
        /* 引入字体文件 */
        @font-face {
            font-family: "ziti";
            src: url("https://apifontaaa.51miz.com:8081/createfont/auFMY3/ttf?str=@41!@42!@43!@44!@45!@46!@47!@48!@49!@4a!@4b!@4c!@4d!@4e!@4f!@50!@51!@52!@53!@54!@55!@56!@57!@58!@59!@5a!@61!@62!@63!@64!@65!@66!@67!@68!@69!@6a!@6b!@6c!@6d!@6e!@6f!@70!@71!@72!@73!@74!@75!@76!@77!@78!@79!@7a!@30!@31!@32!@33!@34!@35!@36!@37!@38!@39!@6c34!@5149!@6f4b!@6edf!@6674!@65b9!@597d!@ff0c!@5c71!@8272!@7a7a!@8499!@96e8!@4ea6!@5947!@3002!@617e!@628a!@897f!@6e56!@6bd4!@897f!@5b50!@ff0c!@6de1!@599d!@6fc3!@62b9!@7e02!@76f8!@5b9c!");
        }

        body {
            padding-top: 100px;
        }
        .test {
            font-family: 'ziti';
            font-size: 20px;
        }
        #box {
            width: 600px;
            height: 400px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
</head>

<body>
    <div class="test">
        1 2 3 4 5 6 7 8 9

        我这里用的网上找的字体
        需要用你们自己的风字体文件，风向杆也不过是个字体而已
    </div>
    <div id="box"></div>
    <script>
        let arr = [];
        for(let i = 0; i < 10; i++) {
            arr.push([parseInt(Math.random() * 10), Math.random() * Math.random() * 20, Math.random() * 20, Math.random()])
        }
        //因为刚开始未找到字体文件 所以等加载完之后再执行
        window.onload = function() {
            let myChart = echarts.init(document.getElementById('box'));
            var option = {
                title: {
                    text: '风向杆'
                },
                tooltip: {},
                legend: {
                    data: []
                },
                xAxis: {
                    data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                },
                yAxis: {
                    value: 'value'
                },
                series: [
                    {
                        type: 'custom',    //自定义系列
                        renderItem: function(params, api){
                            //根据x，y 计算位置
                            var point = api.coord([api.value(0), api.value(1)]);
                            // 利用canvas 将风向风速用风字体画出来
                            let canvas = document.createElement('canvas');
                            canvas.width = 30;
                            canvas.height = 32; //自己根据字体大小调节
                            let ctx = canvas.getContext("2d");
                            ctx.fillStyle = '#000';
                            let windText = api.value(2);
                            // let windText = getBarb(api.value(2));  //
                            ctx.font = "30px ziti";    //ziti 字体
                            ctx.fillText(windText, 1, 32);
                
                            // 因为风向杆的字体大小有些误差, 例如: 最小的风向杆和略大的风向杆; 这里将其转换成图片 统一调整偏移量
                            let imgsrc = canvas.toDataURL(["image/png", 2]);
                
                            let children = {
                                type: "image",
                                style: {
                                    image: imgsrc,
                                },
                                origin: [1, 30],    //图片生成有一定的空白, 减去空白位置将风向杆的指向的位置为旋转中心
                                rotation: -api.value(3) / 180 * Math.PI,   //旋转（风向） 
                                position: [point[0] - 1, point[1] - 30],    //同样以风向杆的指向的位置为定位点
                            };
                            return children
                        },
                        data: arr   // [[x, y, 风速, 风向]]
                    }
                ]
            };
            myChart.setOption(option);

            //风字体 根据风速获取对应字体代码 这里用艺术字字体文件 就不需要转码提取了
            // function getBarb(speed) {}
        }

    </script>
</body>

</html>