web前端显示设备实时温度,ECharts实现温度折线图,实时动态温度曲线图生成

web前端显示设备实时温度,ECharts实现温度折线图,实时动态温度曲线图生成。

web前端显示设备实时温度,ECharts实现温度折线图,实时动态温度曲线图生成。

具体步骤如下:

1.在页面中引入ECharts文件echarts-all.js

 <!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

2.在body中为ECharts准备一个具备大小(宽高)的Dom

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>

3.具体JS代码如下:

<script>
    // 基于准备好的dom,初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));

    //折线图数据
    var option = {
        title : {
            text: '设备1温度显示',
            subtext: ''
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            //data:['最高温度','最低温度']
   data:['温度']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],
        series : [
            {
                name:'温度',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            }
   /*,
            {
                name:'最低气温',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                markPoint : {
                    data : [
                        {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }*/
        ]
    };

可显示最高温度、最低温度、平均值。

// 为echarts对象加载数据
myChart.setOption(option);

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3523.html

(8)
江山如画的头像江山如画管理团队
上一篇 2019年5月11日 上午10:34
下一篇 2019年6月5日 上午9:43

99%的人还看了以下文章

  • 在servlet中输出JS中文乱码,servlet中alert对话框出现中文乱码的解决方法

    一、在servlet中输出JS中文乱码 解决方法 在servlet中添加以下代码:   request.setCharacterEncoding(“UTF-8”);   response.setContentType(“text/html”);   response.setCharacterEncoding(“UTF-8”); 二、servlet中alert…

    2019年11月29日 编程开发
    4.8K0
  • 网络编程 ASP.NET(C#)学习笔记二:数据类型-值类型

    C#中数据类型主要分为两大类:值类型和引用类型。本节课主要讲解值类型的分类和结构类型、枚举类型的定义和使用。 值类型: C#中值类型包括3种:简单类型、结构类型和枚举类型。 简单类型包括整数类型、字符类型、实数类型和布尔类型等,在此不做介绍,随便找本书看下即可。 结构类型:用于定义复杂的数据类型。如图书信息(包括书名,作者,出版社,价格等等),坐标点的信息(…

    2018年1月30日
    1.5K0
  • Ubuntu在线体验(不用安装) 

    Ubuntu是一个以桌面应用为主的Linux操作系统,是非常轻量级的操作系统,全球领先的用于个人电脑、平板及手机的操作系统。 想过要体验下Ubuntu,其实不用那么麻烦,在线就能体验该系统!! 在任意浏览器打开链接https://www.ubuntu.org.cn/tour/zh-CN/ (中文)、https://www.ubuntu.org.cn/tour…

    2022年9月1日
    6.3K0
  • Java常见面试题200+,学习、面试必备

    本套Java面试题,选取了企业面试最常问到的问题,可以做为Java工程师的面试宝典,也可以做为想要不断完善和扩充自己 java 技术的学习者。 主要包含: Java 基础、容器、多线程、反射、对象拷贝、Java Web 模块、异常、网络、设计模式、Spring/Spring MVC、Spring Boot/Spring Cloud、Hibernate、Myb…

    2019年8月29日
    3.9K0
  • python 期末复习-综合练习题

    十八、分别使用for循环和while循环求1+2+3+4+……+856的和 要求: 1、新建一个“sum.py”文件。 2、编写程序。 3、调试程序。 4、排除错误。 十九、输入一个数,判断奇数偶数 要求: 1、新建一个“number.py”文件 2、编写程序。 3、调试程序。 4、排除错误。 二十、分别使用for循环和while循环输出1到100之间的偶数…

    2023年6月15日
    8970
  • jsp写mysql数据库出现中文乱码

    今天用jsp做个图片书管理系统,向mysql数据库中存中文的时候显示乱码,如图书名: web???? 修改页面是http://localhost:8080/library/book?action=bookModifyQuery&ID=14 根据中文乱码的处理方法: 表单method方式为post或get中文乱码的解决方法 jsp:include包含h…

    2020年8月22日
    1.7K0

发表回复

登录后才能评论

评论列表(1条)