echarts折线风向图（附源码，可直接使用）

这是效果图，可以根据自己需要继续优化
这是代码，注释的相当明白了，有问题可以联系我，有用帮忙点下赞：
<!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折线风向图（附源码，可直接使用）

猜你喜欢
