一文了解数据可视化 包含(ECharts)

·  阅读 120

目标

  • 能够说出数据可视化的目的
  • 能够说出ECharts的基本使用步骤
  • 能够独立使用Echarts完成可视化项目开发

目录

  • 什么是数据可视化
  • 数据可视化项目概述
  • ECharts简介
  • ECharts的基本使用
  • 数据可视化项目开发

1. 什么是数据可视化

1.1 数据可视化概述

  • 数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。
  • 数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。

1.2 数据可视化的场景

  • 通用报表
  • 移动端图标
  • 大屏可视化
  • 图编辑,图分析
  • 地理可视化

1.3 常见的数据可视化库

  • D3.js目前Web端评价最高的Javascript可视化工具库(入手难)
  • ECharts.js百度出品的一个开源Javascript数据可视化库
  • Highcharts.js国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
  • AntV蚂蚁金服全新一代数据可视化解决方案
  • ...

1.4 小结

借助图形传递信息

重点学习 Echarts

2. 数据可视化项目概述

技术栈

  • HTML5 + CSS3布局csS3动画、渐变
  • jQuery库+原生JavaScript
  • flex布局和rem适配方案
  • 图片边框border-image
  • ES6模板字符
  • ECharts可视化库等等

3. Echarts 简介

ECharts是一个使用JavaScript 实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

优点

  • 丰富的可视化类型
  • 多种数据格式支持
  • 流数据的支持
  • 移动端优化
  • 跨平台使用
  • 绚丽的特效
  • 详细的文档说明

4. Echarts的基本使用

分为5步

  1. 下载并引入Echarts.js文件 (图表依赖这个库)
  2. 准备一个具备大小的DOM容器 (生成的东东放入这个容器里)
  3. 初始化Echarts实力对象(实例化echarts对象)
  4. 指定配置项和数据(option) (根据具体需求修改配置选项

) 5. 将配置项设置给echarts实例对象(让他生效)

    <script src="../js/Echarts.min.js"></script> //引入

    <div class="box"></div>

    <script>
        
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.querySelector('.box'))

           // 指定图表的配置项和数据
           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);
复制代码

4.1 相关配置讲解

  • title :标题组件
  • tooltip∶提示框组件
  • legend:图例组件
  • toolbox:工具栏
  • grid:直角坐标系内绘图网格
  • xAxis:直角坐标系grid中的×轴
  • yAxis:直角坐标系grid中的y轴
  • series:系列列表。每个系列通过type 决定自己的图表类型(什么类型的图标)
  • color:调色盘颜色列表

更多的去查文档

series:系列列表

  • type:类型(什么类型的图表)比如line是折线bar柱形等
  • name:系列名称,用于tooltip的显示,legend 的图例筛选变化
  • stack:数据堆叠。如果设置相同值,则会数据堆叠。

数据堆叠:第二个数据值=第一个数据值+第二个数据值 第三个数据值=第二个数据值+第三个数据值....依次叠加 如果给stack指定不同值或者去掉这个属性则不会发生数据堆叠

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改