这是我参与「第五届青训营」笔记创作活动的第16天

数据可视化

• 将数据以图表，地图等形式显示
• 数据可视化分类
• 科学可视化：科学实验数据的直观展示 信息可视化：对抽象数据的直观显示

为什么要数据可视化

• 记录信息
• 分析推理
• 证实假设
• 思想交流

可视化设计原则

能够正确地表达数据中的信息而不产生偏差与歧义

可视化工具介绍

• D3：数据可视化开源函数库
• Vega（推荐使用）: 是一种可视化语法。通过其声明式语言，可以利用JSON格式化描述可视化的视觉外观与交互行为，并且用Canvas或者SVG生成视图
• scales：视觉编码，视觉通道
• G2：数据驱动，面向常规的统计图表
• Echarts：开源可视化图标库

Echarts实例

TS版本

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '30%']
  },
  visualMap: {
    type: 'piecewise',
    show: false,
    dimension: 0,
    seriesIndex: 0,
    pieces: [
      {
        gt: 1,
        lt: 3,
        color: 'rgba(0, 0, 180, 0.4)'
      },
      {
        gt: 5,
        lt: 7,
        color: 'rgba(0, 0, 180, 0.4)'
      }
    ]
  },
  series: [
    {
      type: 'line',
      smooth: 0.6,
      symbol: 'none',
      lineStyle: {
        color: '#5470C6',
        width: 5
      },
      markLine: {
        symbol: ['none', 'none'],
        label: { show: false },
        data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
      },
      areaStyle: {},
      data: [
        ['2019-10-10', 200],
        ['2019-10-11', 560],
        ['2019-10-12', 750],
        ['2019-10-13', 580],
        ['2019-10-14', 250],
        ['2019-10-15', 300],
        ['2019-10-16', 450],
        ['2019-10-17', 300],
        ['2019-10-18', 100]
      ]
    }
  ]
};

option && myChart.setOption(option);