echarts详解

lxy芸
790 阅读4分钟

echarts教程

一、大数据可视化技术：可视化技术概述与Echarts入门

  1. 数据可视化概述

    借助图形化的数段，清晰有效的传递和沟通信息，以视觉的方式展现数据，便于用户的认知，偏于图表的样式，相对于文字说明更加直观

    图表分类:饼图，柱状图，折线图，气泡图，面积图，地图等

  2. 什么是数据可视化？（三个方面）

    • 科学可视化（出现最早，最成熟）
      • 处理科学数据，面向科学和工程数据方面，研究带有空间坐标和几何信息的三维空间，如何呈现数据中的几何特征
      • 主要面向自然科技中产生数据的建模操作和处理
      • 应用于医疗（透析，CT），科研，航天，天气，生物等技术
    • 信息可视化（更常见，接触更多）
      • 科学可视化演变而来，主要处理非结构化，非几何的数据
      • 金融交易，社交网络，文本数据展示
      • 减少视觉混淆对有用数据的干扰，把无用的数据过滤掉，而非简单信息的堆叠（数据加工，提取可用信息）
      • 更倾向于展示信息
    • 可视化分析（前两者的结合）
      • 分析数据导向进行展示，需要了解具体的事物逻辑

    数据接入 => 数据整合 => 数据处理（过滤）=> 数据分析 => 以图文的方式展示

  3. 可视化案例

    • 地图案例：全球空气质量

    • 气泡图案例：空气污染比较

    • 柱状图：天气

  4. 大数据可视化的价值

    国家数据，百度统计，百度地图（天气图，热力图），从公司大到国家的数据都使用了大数据可视化技术

    • 分析出数据的趋势
    • 进行精准的广告投放
    • 信息快人一步，优先获取信息就有更大的优势

  5. 数据可视化工具、案例、书籍

    • 可视化工具

 >js图标库通过编码的方式 -- **Echarts**

  • 可视化案例

  • 可视化书籍

  1. Echarts概述,特性介绍

    百度团队开发的，提供了一些直观，易用的交互方式以便于对展示数据进行挖掘.提取.修正或整合，拥有互动图形用户界面的深度数据可视化工具

    特性：

    • 拖拽重计算：拖动实现数据重新计算
    • 数据视图：通过编辑功能批量修改数据
    • 动态类型切换：动态切换不同类型的图表展示数据，针对用户不同需求，对数据进行更多的解读
    • 值域漫游：通过拖拽改变数值的区域展示符合条件的数值（地图温度）
    • 数据区域缩放：大量时间跨域的数据，通过日历选择器让用户选择需求的时间段数据（股票浮动）
    • 多图联动：多列数据根据条件一同修改
    • 百搭时间轴：根据时间动态的改变
    • 大规模散点：大数据查找，需要专业工具
    • 力导向布局：复杂关系网络展示（人物关系网）
    • 动态数据添加：实时改变数据变化
    • 商业BI：用于商业数据展示
    • 特效：吸引眼球功能

  2. 如何快速上⼿开发⼀个Echarts可视化图表

    • 获取Echarts

    • 引入Echarts

      • 通过script标签

    • 绘制简单图表

      • 准备一个具备宽高的dom容器

        <header>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</header>
<div id="main" style="width:600px; height:600px;">

</div>

    • 配置Echarts -- js代码

      <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

  3. 如何阅读Echarts官⽅⽂档

    3.0 文档=>教程=>Api=>配置项（每一项的作用）

    2.0 更直观 文档，对应图表，配置展示

  4. Echarts学习必备基础知识

    jvascript juqery json html css

  5. Echarts3.x与Echarts2.x的区别

    • -Echarts2.x的使用方法 Echarts2.x更加强调模块化，因此在引入时官方推荐使用模块化包引入，引入方式也很简单
    • Echarts3.x的使用方法 ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入

  6. Echarts基础架构与常⻅名词术语(本质使用h5，canvas）

  7. Echarts标准开发模板

  8. Echarts 柱状图（bar）详解

  9. 授⼈以渔01_Echarts 配置项查看技巧

  10. Echarts 拆线图（line）详解基本配置

  11. Echarts 拆线图（line）详解 动态数据展示

  12. 授⼈以渔02定制输出数据视图（dataView）的内容

  13. 授⼈以渔03_利⽤百度图说实现Echarts的可视化配置

avatar
文章
阅读
粉丝