可视化图表库之Echarts

什么是Echarts？

Echarts是一个基于 JavaScript 的开源可视化图表库。

官网：echarts.apache.org/

Echarts有哪些特点？

Echarts具有丰富的可视化类型，它可以多种数据格式无需转换直接使用，以实现千万数据的前端展现，并且可以多渲染方案，可以跨平台使用，可以达到深度的交互式数据探索，实现多维数据的支持以及丰富的视觉编码手段，由数据驱动，数据的改变驱动图表展现的改变。所以动态数据的实现也变得异常简单，他针对点数据和线数据登地理数据的可视化提供了很多绚丽的特效 通过 GL 实现更多更强大绚丽的三维可视化

Echarts怎样使用？

我们要用Echarts就要知道他该怎样获取，Echarts有四种方式可以获取：

• 从 GitHub 获取

apache/echarts 项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。

• 从 npm 获取

npm install echarts --save

• 从 CDN 获取

官网推荐从 jsDelivr 引用echarts

• 在线定制

如果只想引入部分模块以减少包体积，可以使用 ECharts 在线定制的功能。

使用（以NPM为例）

安装完之后，我们需要在项目中引入

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('content'));
// 绘制图表
myChart.setOption({
  title: {
    text: '举例'
  },
  tooltip: {},
  xAxis: {
    data: ['李明', '张三', '王五', '赵六', '李四', '陈七']
  },
  yAxis: {},
  series: [
    {
      name: '年龄',
      type: 'bar',
      data: [35, 21, 3, 19, 39, 60]
    }
  ]
});

另外还需要引入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';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

// 接下来的使用就跟之前一样，初始化图表，设置配置项
var myChart = echarts.init(document.getElementById('content'));
myChart.setOption({
  // ...
});

之后便可进行开发