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

  • Vim编辑器常用命令大全

    编辑和保存文件 vim filename为编辑一个文件,若此文件不存在,则Vim会以filename为名创建这个文件。 启动Vim时自动处于命令模式,按I键可以进入插入模式,这个命令用于在当前光标所在处插入字符。 保存和退出 命令 操作 :w 保存文件 :w filename 另存为filename :q 退出Vim :q! 强制退出Vim,用于放弃保存修改…

    2022年9月22日
    1.4K0
  • 第三课:第一个maven项目Hello Maven

    一、Maven的简单使用 1.1、Maven项目的目录约定 MavenProjectRoot(项目根目录)|—-src|     |—-main|     |         |—-java ——存放项目的.java文件|     |         |—-resources ——存放项目资源文件,如sprin…

    2023年1月27日 编程开发
    2.9K0
  • Python安装-小白图文教程(精)

    python优点 python非常简单,易学。 python虽然是用c语言写的,但是它摈弃了c中非常复杂的指针,简化了python的语法。 Python程序无需修改就可以在任何平台上面运行。 Python既支持面向过程的函数编程也支持面向对象的抽象编程。 你可以把你的部分程序用C或C++编写,然后在你的Python程序中使用它们。你可以把Python嵌入你的…

    2019年3月15日 编程开发
    6.5K1
  • 【Java面试题】15道经典的java面试题(附答案)

    Java是一种可以跨平台的面向对象的程序设计语言。Java 技术具有卓越的通用性、高效性、平台移植性和安全性,广泛应用于PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网,同时拥有全球最大的开发者专业社群。今天,中国网页设计给大家分享15道较为经典的Java面试题,希望对你将来在企业面试中能有所帮助! 1、面向对象的特征有哪些方面? 2、访问修饰符…

    2018年8月1日
    1.9K0
  • 最全!jsp连接各种数据库代码及读取数据实例

    有好多jsp初学者经常会问数据库怎么连接?我怎么连接不上数据库、语句怎么总是出错?所以中国网页设计写篇文章供大家参考,主要包括以下7种数据库的链接。 一、jsp连接MySQL数据库 二、jsp连接Sql Server7.0/2000数据库 三、jsp连接DB2数据库 四、jsp连接Informix数据库 五、jsp连接Sybase数据库 六、jsp连接Pos…

    2020年12月6日
    6.6K0
  • SyntaxError: Non-UTF-8 code starting with ‘xc1′,’xc4′,’xc7’,解决方法

    phython编程入门,新手学习phython会遇到*.py文件运行时,出现如下错误: SyntaxError: Non-UTF-8 code starting with ‘\xc7’ in file E:\Pythondemo\2.py on l ine 1, but no encoding declared; see http://python.org/…

    2019年8月23日
    5.8K0

发表回复

登录后才能评论

评论列表(1条)

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

    感谢