数据可视化

什么是数据可视化

• 借助于图形化手段，清晰有效地传达与沟通信息。

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

数据可视化使用场景

常见可视化库

• D3.js目前Web端评价最高的Javascript可视化工具库(缺点：入手难)

• ECharts.js百度出品的一个开源Javascript数据可视化库

• Highcharts.js国外的前端数据可视化库，非商用免费，被许多国外大公司所使用

• AntV蚂蚁金服全新一代数据可视化解决方案

• 等等

ECharts

简介

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

优点

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

使用步骤模板 - 五步 - 先会死记，再会灵活运用

1. 下载并引入echarts.js文件————→ 图表依赖这个js库

2. 准备一个具备大小的DOM容器————→生成的图表会放入这个容器内

3. 初始化echarts实例对象————→实例化echarts对象

4. 指定配置项和数据(option)————→根据具体需求修改配置选项

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

步骤详讲

• 下载：官网 - 下载 - 三种方式（从下载的源代码或编译产物安装，npm 安装命令，选择需要的模块后在线定制下载），先选用第一种方式，min.js意思是压缩版，二八定律的20%。下载echarts.min.js并放至项目的工作目录下并

  <script src="./echarts.min.js"></script>

  

• 准备容器

  

• let myChart = echarts.init(document.querySelector('.box'));

• // 指定图表的配置项和数据，代码是从官网复制的
  let option = {  // 细观察会发现option其实是个类的实例化——对象
      title: {
          text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
          data: ['销量']
      },
      xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
          {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }
      ]
  };

  需要不同的图形就去官网的示例里复制代码替换option：

  

• myChart.setOption(option);

• over，查阅网页源码会发现一个canvas标签

  

定制配置option

哦对了，我们都是在ECharts官网上编辑好理想的样式后复制到代码里去的，因为实时更新图标，很方便

• title :标题组件

• tooltip∶提示框组件

  tooltip: {
      trigger: 'axis' // 触发器：坐标轴 可见当鼠标经过坐标轴就可以显示提示框组件，这里的坐标轴不仅可以是x=0，y=0处，x=100或y=200等也算
  },

• legend:图例组件 // 点击图例可以显示和隐藏某家的数据

• toolbox:工具栏。例如

  toolbox: {
      feature: {
          saveAsImage: {}  // 当用户点击右上角下载按钮，就会保存成图片
      }
  },

• grid:直角坐标系内绘图网格

• xAxis:直角坐标系grid 中的x轴

• yAxis:直角坐标系grid中的y轴

• series:系列列表。每个系列通过 type决定自己的图表类型(什么类型的图标)

• color:调色盘颜色列表

  先了解以上9个配置的作用，其余配置还有具体细节我们查阅文档:文档菜单 - 配置项手册。学echarts关键在于学会查阅文档，根据需求修改配置

  

  // grid网格，之所以取名网格是因为你看把绿线补上就是网格了，grid的范围是整个紫框，div.box范围是整个红框
  grid:{
      left: '0%’, // grid的范围是整个紫框，所以当left: 0%;理应紫框左边缘贴着div.box。但containLabel决定当刻度标签（上图的1000、800等）溢出的时候，grid区域是否包含坐标轴的刻度标签。如果为true，则显示
      right: '0%,
      bottom:"3%',
      top: 3%,
      //如果left right等设置为0%刻度标签就溢出了，此时决定是否显示刻度标签
      containLabel : true // 寓意容纳便签吗
  }

  xAxis: {
      type: 'category',  // 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
      boundaryGap: false, // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
      type: 'value' // 暂不细究
  },

  color: ['yellow', 'black', 'purple', '#65fae1'], // 依次顺序用color数组里的颜色显示线条（对于上图就是预购和成交），若color.length < 线条个数，则从color[0]重新顺序遍历

  series:系列列表
      type:类型(什么类型的图表)比如 line是折线 bar柱形等
      name:系列名称，用于tooltip的显示，legend的图例筛选变化
      stack:数据堆叠。如果设置相同值，则会数据堆叠。
          数据堆叠:第二个数据值=第一个数据值＋第二个数据值
          第三个数据值=第二个数据值＋第三个数据值....依次叠加（自己=自己+前一个）
          
  series: [
      {   name: '水费', // series数组里的每个元素都是一个对象，比如假设就是上图，那本对象代表那条蓝线
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
      },{
          name: '煤气费', // 比如假设就是上图，那本对象代表那条粉线
          type: 'line',
          stack: 'Total', // 两个对象的stack值取一样了，那么粉线的周一数据就会显示在120+220即340处，而非220，这样有利于对总支出一目了然。// 如果给对象间的stack指定不同值或者去掉这个属性则不会发生数据堆叠
          data: [220, 182, 191, 234, 290, 330, 310]
      }]

ECharts课从第443集看到447，先暂停不看，回头看css移动端了