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

  • java WEB编程技术上机练习一:

    jsp运行环境的搭建(jdk+TOMCAT)、编写JSP页面,配置虚拟目录并访问、熟悉MYECLIPSE的使用,包括项目的部署及运行。

    2018年8月29日
    5.1K1
  • python pywifi库破解wifi密码提示“No module named ‘comtypes’”的解决方法

    在免费蹭网!破解WiFi密码的Python程序源码分享一文中,125建站网提供了详细的程序代码。 python中的pywifi库,利用它可以暴力破解一些简单的wifi密码,有些同学运行程序时提示错误:“No module named ‘comtypes’”! python中的No module named ‘comtypes’ 解释是…

    2023年1月29日
    2.9K0
  • 两个简单的Pycharm激活方法分享

    一、Pycharm激活码激活 优点:Window、Mac、Ubantu都稳定有效,关键是这种激活方式不会产生其他影响 缺点:需要修改hosts文件 修改hosts文件 将0.0.0.0 account.jetbrains.com添加到hosts文件最后,注意hosts文件无后缀,如果遇到无法修改或权限问题,可以采用覆盖的方法去替换hosts文件 修改后请检查…

    2020年3月14日
    2.7K0
  • 上机实战八:Java web编程综合案例

    建议学时:6 一、开发基于MVC模式的信息管理系统,如新闻发布系统,要求用户可查看、查询。管理员进入后台可对发布新闻(实现相应的增删查改)。 后台添加文章,建议使用UEditor! UEditor 是开源、免费的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果。 UEditor兼容性很好,是网站站长开发的首选,官网地址:UEditor官网 包…

    2018年12月11日
    3.0K0
  • 国内github网站打不开的解决方法(验证100%解决)

    最近国内访问github.com经常打不开,无法访问。 github网站打不开的解决方法 1.打开网站http://tool.chinaz.com/dns/ ,在A类型的查询中输入 github.com,找出最快的IP地址。 2.修改hosts文件。 在hosts文件中添加: # localhost name resolution is handled wi…

    2022年2月1日 编程开发
    17.6K0
  • 快收藏!破解WiFi密码的Python程序源码泄露了

    通过 Python 脚本实现 WIFI 密码的暴力破解,从而实现免费蹭网。 泄露的Python程序源码: import pywifi from pywifi import const import time import datetime # 测试连接,返回链接结果 http://www.125jz.com/ 分享 def wifiConnect(pwd):…

    2023年1月29日
    2.3K0

发表回复

登录后才能评论

评论列表(1条)