美文网首页
Echarts+基础+实时展示+自适应响应式

Echarts+基础+实时展示+自适应响应式

作者: 五四青年_4e7d | 来源:发表于2020-03-01 16:51 被阅读0次

核心技术:

1.掌握基础的用法,坐标轴,颜色,背景,配置;
2.掌握和后端接口的对接;https://www.jianshu.com/p/a7f09cb08ba9这个文章有实例;
3.实时数据的获取更新,目前主要是(定时器,和websocket)两种;
4.自适应的使用:

index.html(首页)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #echarts1,  #echarts2{
        width:100%;
        height:300px;
    }
    </style>
    <script src="https://zycftcenter.gdwlcloud.com:90/jushi/js/jquery-1.11.1.min.js"></script>
    <script src="https://zycftcenter.gdwlcloud.com:90/yangxian/screen/js/echarts.common.min.js"></script>
    <script src="demo.js"></script>
</head>
<body>
    <div id="echarts1"></div>
    <div id="echarts2"></div>
    <div id="echarts3"></div>
    
</body>
</html>

demo.js逻辑:

window.onload  =function(){

    //初始化实例
    var  option = {
        color:['#409cef'],
        title:{
        text:''
        },
        tooltip:{},
        legend:{
            data:['销量']
          },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine:{
                lineStyle:{
                 color:'#409cef'
                },
            }
        },
        yAxis: {
            type: 'value',
            axisLine:{
                lineStyle:{
                 color:'#409cef'
                },
            }
        },
        grid:{     //修改对应的位置
         left:'2%',
         right:'3%',
         bottom:'5%',
         top:'5%',
         containLabel:true
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'bar',
            areaStyle: {}
        }]
    };
    let myChart = echarts.init(document.getElementById('echarts1'));
    


     //模拟定时器刷新数据:
   
     var res = [
        [120, 932, 601, 934, 1290, 1530, 1320],
        [520, 932, 901, 934, 290, 330, 120],
        [820, 932, 801, 934, 190, 1330, 320],
        [420, 932, 901, 934, 190, 330, 920],
        [220, 932, 101, 934, 290, 1330, 120]
     ]
     setInterval(getList, 3000);
    
     function  getList(){
     var i = parseInt(Math.random()*res.length)
      option.series[0].data = res[i]
     myChart.setOption(option);
     }
     getList()

     window.onresize = function(){
        myChart.resize()
        myChart2.resize()
     }




     //初始化实例
     var  option2 = {
        color:['#409cef'],
        title:{
        text:''
        },
        tooltip:{},
        legend:{
            data:['销量']
          },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine:{
                lineStyle:{
                 color:'#409cef'
                },
            }
        },
        yAxis: {
            type: 'value',
            axisLine:{
                lineStyle:{
                 color:'#409cef'
                },
            }
        },
        grid:{     //修改对应的位置
         left:'2%',
         right:'3%',
         bottom:'5%',
         top:'5%',
         containLabel:true
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
        }]
    };
    let myChart2 = echarts.init(document.getElementById('echarts2'));
    myChart2.setOption(option2);
}

效果预览:

pc端:


image.png

移动端:


image.png

相关文章

  • Echarts+基础+实时展示+自适应响应式

    核心技术: 1.掌握基础的用法,坐标轴,颜色,背景,配置;2.掌握和后端接口的对接;https://www.jia...

  • 媒体查询

    @media(max-height:700){}响应式布局-自适应布局 不同的设备 不同的窗口大小 展示不同的C...

  • viewport

    应用于屏幕自适应(响应式开发);www.imooc.com 查viewport详解;Viewport 基础一个常用...

  • html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应。 响应式一...

  • 自适应网页设计(Responsive Web Design)

    什么是自适应? 前端工程师的必备技能如何在不同大小设备上呈现同样的网页。 自适应和响应式的区别 响应式布局 就是一...

  • Tailwind Responsive

    关键词:响应式设计 首先需要区分下响应式与自适应之间的区别 自适应:一套模板适应所有终端,每种设备上看到的版式都是...

  • 白话分析自适应跟响应式的区别

    根据日常开发经验及网上相关资料,用简单通俗易懂的大白话分析自适应跟响应式的区别。注:本文只分析自适应跟响应式的区别...

  • 第十七章 响应式与H5一些新标签

    一,响应式 什么是响应式?响应式和自适应又有什么区别呢? 就是在各个网页显示不同的效果:一个网站可以兼容多个终端,...

  • 解析:自适应网站与响应式网站到底如何抉择?

    相信很多小伙伴对于自适应与响应式的概念还有点模糊,一般自适应这种说法比较少,相对而言,响应式的名声要大一些。事实上...

  • 响应式网页设计

    名词解释 1.什么是响应式网页设计 响应式网页设计或称自适应网页设计、回应式网页设计、对应式网页设计。 是一种网页...

网友评论

      本文标题:Echarts+基础+实时展示+自适应响应式

      本文链接:https://www.haomeiwen.com/subject/gbvckhtx.html