《图解Echarts in Vue》基本概念概览

在系统学习eacharts之前，先了解下echarts的基本概念。

• Echarts 实例: 根据不同的dom可创建多个不同的echarts实例
• Options: 通过options来设置图表
• 系列（series）

Echarts实例

我们可以创建很多个Echarts实例，根据参数的不同，可以返回不同的实例。就像我们在html文件中使用vue一样, 我们可以创建出很多个app, 挂载到很多个dom元素上。

option 描述图表

echarts的基本使用方式就是创建一个实例，然后为其设置option渲染出图表，伪代码如下：

// 创建一个echarts的示例
const instance = echarts.init(dom);
// 设置图表
const option = {...};
instance.setOption(option);

echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。

option 每个属性是一类组件

var option = {
    // option 每个属性是一类组件。
    legend: {...},
    grid: {...},
    tooltip: {...},
    toolbox: {...},
    dataZoom: {...},
    visualMap: {...},
    // 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
    xAxis: [
        // 数组每项表示一个组件实例，用 type 描述“子类型”。
        {type: 'category', ...},
        {type: 'category', ...},
        {type: 'value', ...}
    ],
    yAxis: [{...}, {...}],
    // 这里有多个系列，也是构成一个数组。
    series: [
        // 每个系列，也有 type 描述“子类型”，即“图表类型”。
        {type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
        {type: 'line', data: [2231, 1234, 552, ... ]},
        {type: 'line', data: [[4, 51], [8, 12], ... ]}
    }]
};

组件

option 每个属性是一类组件

• xAxis（直角坐标系 X 轴）
• yAxis（直角坐标系 Y 轴）
• grid（直角坐标系底板）
• angleAxis（极坐标系角度轴）
• radiusAxis（极坐标系半径轴）
• polar（极坐标系底板）
• geo（地理坐标系）
• dataZoom（数据区缩放组件）
• visualMap（视觉映射组件）
• tooltip（提示框组件）
• toolbox（工具栏组件）
• series（系列）
  ...

组件 - 系列（series）

image.png

定义： 一组数值以及他们映射成的图。至少包含一组数值，图表类型（series.type）,以及其他的关于这些数据如何映射成图的参数。

series.type: 图表类型

• line(折线图)
• bar (柱状图)
• pie（饼图）
• scatter(散点图)
• graph(关系图)
• tree（树图）
  ...

series.data: 数据

• 对象
• 数组
• dataset

组件 - 定位

不同的组件、系列，常有不同的定位方式。
多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。 这种绝对定位的方式，类似于 CSS 的绝对定位（position: absolute）。绝对定位基于的是 echarts 容器 DOM 节点。
其中，他们每个值都可以是：
绝对数值（例如 bottom: 54 表示：距离 echarts 容器底边界 54 像素）。
或者基于 echarts 容器高宽的百分比（例如 right: '20%' 表示：距离 echarts 容器右边界的距离是 echarts 容器宽度的 20%）。