echarts gráfico de dirección del viento de línea discontinua (con código fuente, se puede usar directamente)

Este es el renderizado, puedes seguir optimizando según tus necesidades

Este es el código, los comentarios son bastante claros, si tiene alguna pregunta, puede contactarme, si es útil, haga clic en me gusta:

<!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 gráfico de dirección del viento de línea discontinua (con código fuente, se puede usar directamente)

Supongo que te gusta