echarjs 折线图实现

somdip

已于 2023-06-29 17:31:15 修改

阅读量542

点赞数 1

分类专栏：编程文章标签： echarts javascript 前端

于 2022-09-02 15:44:52 首次发布

本文链接：https://blog.csdn.net/somdip/article/details/126664509

版权

编程专栏收录该内容

160 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('炉况温度列表')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<!-- 引入 echarts.js -->
<script src="../static/js/echarts.min.js" th:src="@{/js/echarts.min.js}"></script>
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<body class="gray-bg">
<div class="container-div">
    <div class="row">

        <div class="col-sm-12 search-collapse">
            <form id="formId"  action="/mes/lkwd/line">
                <div class="select-list">
                    <ul>
                        <li style="height: 25px;">
                            <div class="form-group form-inline">
                                <label class="font-noraml">日期：</label>
                                <div class="input-group date form-inline">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input th:value="${ksTime}" type="text" class="form-control" id="laydate-demo-3" name="ksTime" placeholder="请选择开始日期">
                                    <span class="input-group-addon">到</span>
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input th:value="${endTime}"  type="text" class="form-control" id="laydate-demo-4" name="endTime" placeholder="请选择结束日期">
                                </div>
                            </div>
                        </li>
<!--                        <li class="select-time">-->
<!--                            <label>开始时间： </label>-->
<!--                            <input type="text" class="time-input" id="ksTime" placeholder="开始时间" name="ksTime"/>-->
<!--                            <span>-</span>-->
<!--                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime"/>-->
<!--                        </li>-->
                            <input class="btn btn-primary" type="submit" value="搜索"/>
<!--                            <input class="btn btn-warning"  type="reset" value="重置"/>-->
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <section style="display: flex;justify-content: center; flex-wrap: wrap;">
                <div id="main" style="width: 700px;height:400px;"></div>
                <div id="main1" style="width: 700px;height:400px;"></div>
                <div id="main2" style="width: 700px;height:400px;"></div>
                <div id="main3" style="width: 700px;height:400px;"></div>
                <div id="main4" style="width: 700px;height:400px;"></div>
            </section>
        </div>

    </div>


</div>



<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript">
    $(function () {
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#laydate-demo-3',
                type: 'datetime',
                trigger: 'click'
            });
            laydate.render({
                elem: '#laydate-demo-4',
                type: 'datetime',
                trigger: 'click'
            });
        })
    })
</script>
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('mes:lkwd:edit')}]];
var removeFlag = [[${@permission.hasPermi('mes:lkwd:remove')}]];
var prefix = ctx + "mes/lkwd";

function api() {
    var ksTime = $("input[name='ksTime']").val();
    var endTime = $("input[name='endTime']").val();
    $.ajax({
        url: prefix + '/lineData',
        type: "post",
        async: false,
        dataType: 'json',
        data: {endTime:endTime,ksTime:ksTime},
        success: function (res) {
            console.log(res);
            var list = res.data;
            var x = [];
            var hrqwd = [];
            var hrqyqckwd = [];
            var hrqyqrkwd = [];
            var rssckwd = [];
            var rssnwd = [];
            var dgslyqckwd = [];
            for(var i in list){
                x.push(list[i].createTime.substring(11,19));
                hrqwd.push(list[i].hrqwd);
                hrqyqckwd.push(list[i].hrqyqckwd);
                hrqyqrkwd.push(list[i].hrqyqrkwd);
                rssckwd.push(list[i].rssckwd);
                rssnwd.push(list[i].rssnwd);
                dgslyqckwd.push(list[i].dgslyqckwd);
            }
            a_option('main','换热器温度',hrqwd,x,'red');
            a_option('main1','换热器出口温度',hrqyqckwd,x,'green');
            a_option('main2','换热器入口温度',hrqyqrkwd,x,'skyblue');
            a_option('main3','燃烧室出口温度',rssckwd,x,'pink');
            a_option('main4','燃烧室内温度',rssnwd,x,'pink');
            a_option('main4','多管水冷烟气出口温度',dgslyqckwd,x,'#000');
            console.log(x);
            console.log(hrqwd);
        }
    });
}

api();

function a_option(id,title,ydata,xdata,color){
    var myChart = echarts.init(document.getElementById(id));
    // var xdata =  ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
    // var ydata =  [1, -2, 2, 5, 3, 2, 0];
    option = {
        title: {
            text: title,
            // subtext: '纯属虚构'
        },
        tooltip: {
            trigger: 'axis'
        },
legend: {
               top: '5%',
               left: 'center'
           },// 提示上标题
        dataZoom: [{//x轴选取范围
            type: 'inside',
            start: 0,
            end: 100
        }, {
            start: 0,
            end: 100
        }],
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xdata
        },
        lineStyle:{
            color:color
        },
        yAxis: {
          scale:true,//y轴七点数据可改变，不从0开始
            min: 300,//y轴 不从0开始最小值
            type: 'value',
            axisLabel: {
                formatter: '{value} °C'
            }
        },
        series: [
            {
                name: '温度（°C）',
                type: 'line',
                symbolSize:0,//折现点的大小
                // itemStyle : {
                //     normal : {
                //         color:color,
                //         lineStyle:{
                //             color:color
                //         }
                //     }
                // },
                data: ydata ,
            }
        ]
    };
    myChart.setOption(option);
}

</script>
</body>
</html>

这一行是x轴数据动态可选的属性，添加上很好看，很人性化。

dataZoom: [{//x轴选取范围
    type: 'inside',
    start: 0,
    end: 100
}, {
    start: 0,
    end: 100
}],

scale:true //y轴数据动态调节也很好用，曲线就更清晰

全局代码

yAxis: {
    scale:true, //y轴数据动态调节  也很好用，曲线就更清晰，不是从开始
    type: 'value',
    axisLabel: {
        formatter: '{value}'
    }
},
dataZoom: [{
    type: 'inside',
    start: 0,
    end: 100
}, {
    start: 0,
    end: 100
}],

dataZoom: 效果如下