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

  • JSP分页思想2—核心代码

    一、通过order by id desc limit ?,? 控制当前页面显示的记录 显示第几页,共几页,上一页 下一页 <% int PageSize=2; //一页显示的记录数 int RowCount=0; //记录总数 int PageCount=0; //总页数 int intPage; //待显示页码 int i;//循环变量 String…

    2019年10月30日
    1.7K0
  • 纯JSP实现计算圆的面积和周长

    一个jsp页面由元素和模板数据组成.元素是必须由jsp容器处理的部分.而模板数据是jsp容器不处理的部分,如jsp中的HTML内容 元素有三种类型: 脚本元素,指令元素, 动作元素 脚本元素:包含三个部分:声明,脚本段,表达式 声明:用于声明在其它脚本元素中可以使用的变量和方法 脚本段:是一段java代码 表达式:java语言中完整的表达式 声明 以<…

    2020年4月3日
    8.1K0
  • 国内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.4K0
  • 新闻管理系统数据库设计

    新闻管理系统数据库,包含用户表、新闻评论表、管理员表、栏目表、新闻表、评论表、关键字表 每个表的数据字段,数据类型,是否为空,描述,见下表:

    2020年4月11日
    4.1K0
  • pycharm 中 plt.imshow(img)图片不显示的解决方法(附案例)

    #%matplotlib inline # 使用%matplotlib命令可以将matplotlib的图表直接嵌入到Notebook之中,或者使用指定的界面库显示图表,它有一个参数指定matplotlib图表的显示方式。inline表示将图表嵌入到Notebook中。 # Python提供了许多魔法命令,使得在IPython环境中的操作更加得心应手。魔法命令…

    2023年1月13日
    1.7K0
  • 开发软件,编程语言Java和C++选哪个?

    根据网络调查数据:编程语言排名前三的是Java、C#、C++。 其中Java使用者比例最高,为42.82%,是C#的两倍还要多。 紧跟其后的是C#,比例为17.33%。 排名第三的C++则有14.35%的比例。 JAVA和C++都是面向对象语,都能够实现面向对象思想(封装,继乘,多态)。而由于C++为了照顾大量的C语言使用者,而兼容了C,使得自身仅仅成为了带…

    2021年2月16日
    1.1K0

发表回复

登录后才能评论

评论列表(1条)