沫沫金Echarts移动端demo

简介: 鄙视百度!!!官网给的Demo支持自动大小,确不给完整的源码XXX自己动手,丰衣足食http://echarts.baidu.com/demo.html#bar-tick-align用最基本的柱状图官网代码简单两步,实现移动端自适应大小//1、下载Echarts//2、chart容器宽度自适应//3、js增加自适应功能window.

鄙视百度!!!

官网给的Demo支持自动大小,确不给完整的源码XXX


自己动手,丰衣足食

http://echarts.baidu.com/demo.html#bar-tick-align

用最基本的柱状图官网代码

简单两步,实现移动端自适应大小

//1、下载Echarts
<script src="dep/Echarts/echarts-all-3.js"></script>

//2、chart容器宽度自适应
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="chart-demo" style="width: 100%;height:400px;"></div>

//3、js增加自适应功能
window.onresize = function () {
    myChart.resize(); //使第一个图表适应
}

重复一遍:

div容器增加自适应width:100%

js增加自适应功能:window.onresize=....


以上,两步就完成对Echarts官网移动端的支持。


完整源码:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>综合管理-图标样例</title>

    <!-- Bootstrap -->
    <link href="dep/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    </style>
  </head>
  <body class="container-fluid">
    <div class="row">
        <div class="col-md-12 col-xs-12">
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="chart-demo" style="width: 100%;height:400px;"></div>
        </div>
    </div>
    
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="dep/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="dep/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <!-- 增强:BootStrap carousel(轮播)组件支持触屏 -->
    <script src="dep/jquery.hammer.js-master/hammer.min.js"></script>
    <script src="dep/jquery.hammer.js-master/jquery.hammer.js"></script>
    <!-- Echarts start -->
    <script src="dep/Echarts/echarts-all-3.js"></script>
    <script src="dep/Echarts/roma.js"></script><!-- Echarts 主题 -->
    <script>
    // 基于准备好的dom,初始化echarts实例
       var myChart = echarts.init(document.getElementById('chart-demo'),"roma");

       var option = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                        type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月', '2月', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'门急诊人次',
                        type:'bar',
                        barWidth: '60%',
                        data:[10, 52, 200, 334, 390, 330, 220]
                    }
                ]
            };
        //*必须,绑定图表自适应功能
       window.onresize = function () {
           myChart.resize(); //使第一个图表适应
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option,true);
    </script>
</body>
</html>


目录
相关文章
|
1月前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
23 1
|
5月前
echarts改变颜色属性的demo
echarts改变颜色属性的demo
24 0
|
5月前
|
前端开发
【前端统计图】echarts改变颜色属性的demo
【前端统计图】echarts改变颜色属性的demo
25 0
|
JavaScript 大数据
Qt+ECharts开发笔记(五):ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo
上一篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口。   本篇的demo实现了自动排序的柱状图,实现了一个自动排序柱状图的基本交互方式,即Qt调用js脚本操作html。   本篇demo使用Qt定时器方式,实现数据定时刷新自增,并预留出了定时器间隔参数。   像大数据网页常看的人口增长时间图,收入年度增长时间图等都是这一类。
Qt+ECharts开发笔记(五):ECharts的动态排序柱状图介绍、基础使用和Qt封装Demo
|
JavaScript
Qt+ECharts开发笔记(四):ECharts的饼图介绍、基础使用和Qt封装百分比图Demo
前一篇介绍了横向柱图图。本篇将介绍基础饼图使用,并将其封装一层Qt。本篇的demo使用隐藏js代码的方式,实现了一个饼图的基本交互方式,并预留了Qt模块对外的基础接口。
Qt+ECharts开发笔记(四):ECharts的饼图介绍、基础使用和Qt封装百分比图Demo
|
缓存 JavaScript 编译器
Qt+ECharts开发笔记(三):ECharts的柱状图介绍、基础使用和Qt封装Demo
上一篇成功是EChart随着Qt窗口变化而变化,本篇将开始正式介绍柱状图介绍、基础使用,并将其封装一层Qt。   本篇的demo实现了隐藏js代码的方式,实现了一个条形图的基本交互方式,即Qt调用js脚本操作html。
Qt+ECharts开发笔记(三):ECharts的柱状图介绍、基础使用和Qt封装Demo
|
Web App开发 数据可视化 JavaScript
Qt+ECharts开发笔记(一):ECharts介绍、下载和Qt调用ECharts基础柱状图Demo
使用Qt开发大数据可视化看板,基于Qt使用QWidget或者QML是很难达到ECharts大数据看板的效果,所以使用Qt来制作。
Qt+ECharts开发笔记(一):ECharts介绍、下载和Qt调用ECharts基础柱状图Demo
|
Web App开发 前端开发 JavaScript
|
2月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
42 0