数据可视化组件库

1.常见的图表库

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';
1
2
3
4
5
6
7
8
9
10
11
12

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]
    }
  ]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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
});
1
2
3
4
5

4. 载入数据源

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

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

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

6. 渲染图表

chart.render();
1