• 数据可视化
  • 一、 什么是数据可视化
    • • 1、 概念
      • 2、 常见的数据可视化库
      • 3、 小结
  • 二、 ECharts
    • 1、 ECharts 简介
    • 2、 ECharts 基本使用
      • 2.1 使用五部曲
      • 2.2 选择不同类型的图表
      • 2.3 相关配置
      • 2.4 系列列表
  • 三、 样式处理
    • 1、 边框图片
      • 1.1 使用场景
      • 1.2 边框图片切图
      • 1.3 边框图片语法

数据可视化

一、 什么是数据可视化

1、 概念

数据可视化主要的目的：借助图形化手段，清晰有效地传递与沟通信息

数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理

2、 常见的数据可视化库

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

3、 小结

数据可视化主要目的：借助图形化手段，清晰有效地传达与沟通信息

数据可视化在互联网公司中经常用于通用数据报表、移动端图表、大屏可视化、图编辑等

数据可视化库有很多，这里主要学习 ECharts

二、 ECharts

1、 ECharts 简介

ECharts 是一个使用 JS 实现的开源可可视化库，可以流畅的运行在 PC 端和移动端上面，兼容当前绝大多数浏览器，底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表

优点：

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

ECharts 能满足绝大多数可视化图标实现，使用方便，功能强大，是实现数据可视化的最优选择之一

2、 ECharts 基本使用

2.1 使用五部曲

1. 下载并引入 echarts.js 文件 --> 图表依赖库

   下载文件地址：https://cdn.staticfile.org/echarts/4.7.0/echarts.js

2. 准备一个具备大小的 DOM 容器 -- > 生成的图片会放入这个容器内

3. 初始化 echarts 实例对象 --> 实例化 echarts 对象

   // 初始化 echarts 实例化对象
   var myChart = echarts.init(document.querySelector("#main"));
   

4. 指定配置项和数据 --> 根据具体需求修改配置选项

   // 指定图表的配置项和数据
   var option = {
       title: {
           text: 'ECharts 入门示例'
       },
       tooltip: {},
       legend: {
           data:['销量']
       },
       xAxis: {
           data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
       },
       yAxis: {},
       series: [{
           name: '销量',
           type: 'bar',
           data: [5, 20, 36, 10, 10, 20]
       }]
   };
   

5. 将配置项设置给 echarts 实例对象 --> 让 echarts 对象根据修好的配置生效

   // 使用刚指定的配置项和数据显示图表
   myChart.setOption(option);
   

2.2 选择不同类型的图表

步骤：

官网 -> 实例 -> 官方实例

只需要把配置数据修改过来就行了

如果需要制作类似的图表，只需要修改相关配置数据

2.3 相关配置

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

其他内容请通过查阅文档了解根据需求修改配置

2.4 系列列表

series：系列列表

参数：

• type：图表类型

• name：系列名称，用于 tooltip显示，lengend 的图例筛选变化

• stack：数据堆叠，如果设置相同值，则会数据堆叠

  • 数据堆叠：第二个数据值 = 第一个数据值 + 第二个数据值

    ? 第三个数据值 = 第二个数据值 + 第三个数据值

    ? 依次叠加

    如果给 stack 指定不同值或者去掉这个属性则不会发生数据堆叠

• data：添加的数据

三、 样式处理

1、 边框图片

1.1 使用场景

盒子大小不一，但是边框样式相同，此时就需要边框图片来完成

为了实现丰富多彩的边框效果，在 C3 中，新增了 border-image 属性，这个新增属性允许指定一副图像作为元素的边框

1.2 边框图片切图

把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕

按照顺时针顺序切图

1.3 边框图片语法