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

  • 免费网站打包APP,网址打包APP教程 – HBuilder

    网上有很多将网站在线打包成APP的网站,都是收费,其实网站只要做好移动端优化,或本身就是响应式网站,只需要简单的几个步骤就能把网站打包成简洁的APP。 相应工具很多,中国网页设计推荐使用:HBuilder:官网dcloud.io 会做网页就会制作APP 先学习如何制作APP   VS   先学的制作网页 其实很多APP都是利用网页打包成的… 利用HBuild…

    2019年6月24日 编程开发
    6.7K0
  • 10秒倒计时、考试结束倒计时功能实现代码-JS

    注册成功或登录后网页会有倒计时,如5秒后跳转到哪个页面的功能。 在做一些在线测试,网上考试系统时,会用到倒计时功能。 如网上考试系统里,会有时间提示离考试结束还有多长时间,临近考试结束剩10分钟,还可以弹窗提示考生。 JavaScript实现倒计时功能代码 <!DOCTYPE html> <html> <head> &lt…

    2020年11月1日
    2.6K0
  • 国内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日 编程开发
    16.5K0
  • pycharm 中pip不是内部或外部命令,也不是可运行的程序或批处理文件(直接解决问题)

    在pycharm中输入pip则显示:pip不是内部或外部命令,也不是可运行的程序或批处理文件。 和在命令行输入python提示python不是内部或外部命令,也不是可运行的程序或批处理文件一样,都是环境变量的问题。不用怀疑,www.125jz.com站长亲测!!! pip不是内部或外部命令,也不是可运行的程序或批处理文件的解决方法 1.首先找到pip的安装位…

    2023年1月13日 编程开发
    7.0K0
  • 2个pycharm使用技巧:更改文件、文件夹名称,更换pip为清华源

    pycharm怎么重命名文件、文件夹名称 1.右键单击文件名称,在弹出的界面选择refacto下的rename选项 2.在弹出的界面输入新的名称即可 pycharm更换pip清华源 永久使用 直接在Pycharm打开终端Terminal,选择Command Prompt,将下列语句复制进去,回车执行 pip config set global.index-u…

    2023年10月3日
    5070
  • 上机四 数据库访问技术

    2学时 一、数据库编程案例:读取数据库信息并显示 数据库员工信息表字段如下: 使用JDBC连接数据库,读取employee表中信息并显示到页面。 mysql驱动下载:mysql-connector-java-5.1.41-bin.zip 注意事项:将驱动程序mysql-connector-java-5.1.6-bin,拷贝到Web应用程序的WEB-INF\l…

    2018年10月16日 编程开发
    4.1K0

发表回复

登录后才能评论

评论列表(1条)