数据可视化组件库

1.常见的图表库

图数据库	简介
D3.js	属于前端评价最高的JS可视化图表库。但其大量依赖DOM操作，不容易上手。
Echarts	示例比较丰富，相较于D3而言少；有中文文档，容易理解；Echarts中的图表绘制是直接封装好的，使用方便，容易上手，但灵活性较低。属于目前国内前端数据可视化使用最多的图标库。
AntV	更接近声明式的写法，提供图形基本元素不同特征到数据的映射方式，比Echarts更加灵活。
chart.js	小巧的JS图表库。轻量级、易上手。基于H5，兼容性好，支持所有的现代浏览器；但图形种类少。
Highcharts	超轻量级、易上手、性能好。支持IE6以上所有浏览器，兼容性强；github开源，但商用收费，个人使用有水印。

2.Echarts使用

官网文档：https://echarts.apache.org/zh/index.html

1. 引入echarts
   npm install echarts --save

   • 引入echarts所有组件
     import * as echarts from 'echarts'

   • 按需引入：

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
    
     BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    
    
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';

2. 准备一个呈现图表的盒子
   <div id="main"></div>
3. 初始化echarts对象
   var myChart = echarts.init(document.getElementById('main'));
4. 准备配置项

let opt = {
    
    
  title: {
    
    
    text: 'ECharts 入门示例'
  },
  tooltip: {
    
    },
  xAxis: {
    
    
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {
    
    },
  series: [
    {
    
    
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};

5. 将配置项设置echarts实例对象
   myChart.setOption(opt)

3.AntV使用

蚂蚁集团开发的组件库，针对不同应用场景制定了不同的组件库，以数据驱动图形，提供图形语法与交互语法，有较高的易用性和扩展性。其包含了四种组件库：G2、G6、F2、L7。
官方文档：http://antv.antfin.com/zh-cn/index.html

以G2为例：

1. 引入AntV G2
   npm install @antv/g2 --save
import G2 from '@antv/g2';

2. 准备一个呈现图表的盒子
   <div id="c1"></div>

3. 创建echart实例对象

const chart = new G2.Chart({
    
    
  container: 'c1',
  width: 600,
  height: 300
});

4. 载入数据源

// G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
const data = [
  {
    
     genre: 'Sports', sold: 275 },
  {
    
     genre: 'Strategy', sold: 115 },
  {
    
     genre: 'Action', sold: 120 }
]; 
chart.source(data);

5. 创建图形语法，绘制图形

// 创建图形语法，绘制柱状图.
// 由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart.interval().position('genre*sold').color('genre')

6. 渲染图表

chart.render();