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%的人还看了以下文章

  • JavaBean的规范,javaBean中属性为什么要定义成private?

    JavaBean就是遵循一定规范、完成某种功能的可重复使用的Java类。

    2018年10月23日
    6.3K0
  • Java常见面试题200+,学习、面试必备

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

    2019年8月29日
    4.2K0
  • tomcat配置中autodeploy 和reloadable的区别和使用场景

    tomcat配置中的autodeploy 和reloadable: <Context docBase=”xxx” path=”/xxx” reloadable=”true”/> <Context docBase=”xxx” path=”/xxx” autoDeploy=”true”/> 替换WEB-INF/lib目录中的jar文件或W…

    2018年12月25日
    3.9K0
  • python 初学者练手上机实操一

    一、从键盘输入商品名称、商品的单价、商品的数量, 计算商品总价,并按如下格式输出: 商品名称:牛奶,单价:5元,数量:2件,总价:10元 二、从键盘输入年龄,如果>=18岁显示“已成年”,否则显示“未成年”。 三、输入三条边长,如果能构成三角形就计算周长并显示,否则显示“不能构成三角形”。 四、百分制成绩转换为等级制成绩。 要求:如果输入的成绩在90分…

    2023年4月7日
    9230
  • 第2课:编写第一个C语言程序

      用C语言语句编写的程序称为C程序或C源程序。 下面编写第一个C语言程序,这个程序是在Visual C++ 环境下编译通过的。 Microsoft Visual C++(简称Visual C++、MSVC、VS或VC)是微软公司的C++开发工具,具有集成开发环境,可提供编辑C语言,C++以及C++/CLI等编程语言。 【例1.1】用C语言编写一个…

    2020年4月5日
    3.2K0
  • js中var a=b=1和var a=1,b=1的区别

    js中一次性定义多个变量的时候,可以用:var a=1,b=1这种中间用逗号隔开的方式,但有些时候为了省事,直接定义var a=b=1。 那这两种写法方式最后效果是一样的吗?有没有什么区别呢?请大家看下面的范例: 1、用var a=b=1的方式 由上图可以明显看出来,变量b的作用域已经是全局的了,因为在函数外可以调用到(可以正常的输出变量)。 2、用var …

    2022年3月19日
    1.8K0

发表回复

登录后才能评论

评论列表(1条)

  • 青红皂了个白的头像
    青红皂了个白 2019年9月27日 下午5:04

    感谢