zoukankan      html  css  js  c++  java
  • 前端之js-echarts组件介绍

    Echarts.init:

    全局 echarts 对象,在 script 标签引入 echarts.js 文件后获得,或者在 AMD 环境中通过 require('echarts') 获得。

    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
     或者

    <script type="text/javascript">
            // 路径配置
            require.config({
                paths: {
                    echarts: 'http://echarts.baidu.com/build/dist'
                }
            });
            // 使用
            require(
                [
                    'echarts',
                    'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载
                    'echarts/chart/line'
                ],

     

    Legend:

    组件长相:

    相关代码:

    Toolbox:

     

    toolTip

     

    xAxis/yAxiis:

     

    Series

     

    Brush

    显示刷子选中区域的数据详情

     

    Datazoom

    dataZoom 组件 用于区域缩放

     

    Visualmap

    连续性

     

    分段性:

     

    Parallel

     

    parallelIndex

     

    Json:javascript object notation

    JS中的变量声明:

     

    Json中的对象:属性名必须加双引号

    {
    
       “name”:“abc”,
    
    “age”:20,
    
    “school”:{//可嵌套
    
    “  ”:”  ”,//有逗号
    
    “  ”:”  ”//无逗号
    
    }
    
    }

    JS对象(-->JSON.stringify(var)  JSON.parse(json) <--)      json字符串

    自适应布局:

    使用百分比宽度来自适应屏幕大小。现在的移动设备大小都是960*640,40*‘800

    如何解决html字体大小自适应?

    <style>
    
    @media screen and (max-980px)
    
     {
    
     body{
    
     font-size:20px;
    
     }
    
     }
    
     @media screen and (max-580px)
    
     {
    
     body{
    
     font-size:14px;
    
     }
    
     }
    
     @media screen and (max-380px)
    
     {
    
     body{
    
     font-size:8px;
    
     }
    
     }
    
     </style>

     或者

    把字体大小用百分比%做单位,例如:font-size:20%;

    或者

    最简单的方法给父元素(一般是body)设置一个px单位的字体,其他字体用em.

  • 相关阅读:
    基于.NET平台常用的框架整理
    简单的linq语法
    Newtonsoft.Json高级用法
    C# 语言历史版本特性(C# 1.0到C# 7.1汇总更新)
    HTML URL 编码
    sql(SqlServer)编程基本语法
    正则表达式
    添加vs模板注释
    js实现无刷新表单提交文件,将ajax请求转换为form请求方法
    HTML5 手机端动态适配
  • 原文地址:https://www.cnblogs.com/catherinezyr/p/7015993.html
Copyright © 2011-2022 走看看