echarts broken line wind direction chart (with source code, can be used directly)

This is the rendering, you can continue to optimize according to your needs
This is the code, the comments are quite clear, if you have any questions, you can contact me, if it is helpful, click like:
<!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>
    <!--引入echarts-->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <style>
        #myEcharts {
            width: 1200px;
            height: 500px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <!-- echarts容器 -->
    <div id="myEcharts"></div>
    <script>
        // 数据格式
        let winArr = [{
            value: 5.5, //风速--数值大小--变量名不可变
            symbolRotate: -45, //风向---旋转角度--变量名不可变
            symbolRotateStr: '西南风' //风向中文--变量名可变（tooltip 提示随之修改）

        }, {
            value: 1.5,
            symbolRotate: 45,
            symbolRotateStr: '东南风'
        }, {
            value: 8.5,
            symbolRotate: 90,
            symbolRotateStr: '东风'
        }, {
            value: 10,
            symbolRotate: -180,
            symbolRotateStr: '南风'
        }, {
            value: 3,
            symbolRotate: -45,
            symbolRotateStr: '西南风'
        }, {
            value: 7,
            symbolRotate: -90,
            symbolRotateStr: '西风'
        }, {
            value: 3.5,
            symbolRotate: -45,
            symbolRotateStr: '西南风'
        }]
        // 获取echarts容器
        let myEcharts = echarts.init(document.getElementById('myEcharts'))
        let option = {
            // X轴
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            // Y轴
            yAxis: {
                type: 'value',
                name: "风速(m/s)",
            },
            // 鼠标悬浮提示
            tooltip: {
                trigger: "axis",
                formatter(params) {
                    let tip =
                        "时间:" +
                        params[0].axisValue +
                        "<br/>风速:" +
                        (params[0].value ? params[0].value : "--") +
                        "m/s<br/>风向:" +
                        (params[0].data ? params[0].data.symbolRotateStr : "--")
                    return tip;
                },
            },
            // 数据
            series: [{
                data: winArr,
                type: 'line',
                smooth: true, //这句就是让曲线变平滑的
                symbol: "arrow", //可以使用默认箭头，也可以换上自己的图片
                // symbol: "image://" + require("../../../assets/img/weather/wind.png"),
                symbolSize: 15,
                //折线样式
                lineStyle: {
                    color: '#38FFD7',
                    width: 2,
                },
                // symbol样式
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#38FFD7',
                    color: '#38FFD7'
                }
            }]
        };
        myEcharts.setOption(option);
        //监听窗口变化，echarts重绘
        window.addEventListener("resize", function () {
            myEcharts.resize();
        });
    </script>
</body>

</html>
echarts broken line wind direction chart (with source code, can be used directly)

Guess you like
