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

  • 第二课:Maven的下载安装及环境变量配置

    一、Maven的下载 下载地址:http://maven.apache.org/download.cgi 下载完成后,得到一个压缩包apache-maven-***-bin.zip,解压,可以看到maven的组成目录 Maven目录分析 bin:含有mvn运行的脚本 boot:含有plexus-classworlds类加载器框架 conf:含有setting…

    2023年1月27日 编程开发
    4900
  • 输入python显示不是内部命令的原因及解决方法

    问题原因:没有将python的安装路径添加到环境变量中。 解决方法: 首先在桌面上右键点击“此电脑”,选择“属性”,弹出系统界面选择“高级系统设置”,进入系统属性界面后在“高级”选项中选中“环境变量”。 然后在“系统变量”中找到变量Path,双击Path变量进入编辑界面。 接着在编辑环境变量对话框中点击“新建”,添加Python的安装路径,之后一直点确定即可…

    2023年5月18日 编程开发
    6781
  • Windows10+IIS+PHP7+MySQL5.7环境搭建

    IIS配置 本次搭建使用的系统是Windows7,Windows8,10与此类似。 开启IIS 开始–>控制面板–>程序和功能,点击左边栏的开启或关闭Windows功能,如图: 选择Internet信息服务并选择里面的CGI。打开浏览器,输入localhost或127.0.0.1,可以正常打开网页则说明开启成功。 新建站点…

    2021年8月14日 编程开发
    9490
  • 基于jspSmartUpload的Jsp文件上传实例(只能上传图片格式文件)

    支持中文的jsp文件上传组件:jspSmartUpload.jar下载 jar包的存放位置:WEB-INF\lib下。 upload_image.html <form method=”post” action=”new_upload.jsp” enctype=”multipart/form-data”> <input type=”file”…

    2018年12月11日
    2.2K0
  • 什么是单元测试,单元测试快速入门教程一

    单元测试概述 单元测试是在软件开发过程中要进行的最低级别的测试活动或者说是针对软件设计的最小单位—程序模块(程序中定义的函数、子程序、类或方法),进行正确性检验的测试工作,目的在于发现每个程序模块内部可能存在的差错或缺陷。 在单元测试活动中,软件的独立单元将在与程序的其它部分相隔离的情况下进行测试,主要工作分人工静态检查(静态测试)和动态执行跟踪(动态测试)…

    2018年4月16日
    3.0K0
  • Java向mysql数据库插入datetime类型数据实例(精)

    在Mysql数据库中日期跟时间有两种: 1、date类型,date类型也就是我们常见的储存yyyy-MM-dd类型的日期,它不能储存时间,也就是只能储存日期, 2、dateitme就是可以储存日期同时也可以储存时间。 datetime可以保存1000-01-01到 9999-12-31的日期。 上面mysql数据库中birthday字段类型设置的是datet…

    2018年5月2日
    11.9K0

发表回复

登录后才能评论

评论列表(1条)