Echarts 实例

一个网页中可创建多个echarts 的js实例。每个实例都可以是不一样的内容，每个实例里面可以不只有一个图表。要创建一个echarts js实例，需要先有一个DOM 节点（一般是div 标签的html 节点）。单个js 实例占用一个dom 节点。

系列（series）

在echats 里"系列(series)"代表一组数据和由这些数据生成的图。一个系列中至少要包含一组数据、图表的类型（series 中的type）及其他的 有关于数据如何生成为图表的 参数。

series: [
	{
		name: '步数',
		type: 'bar',
		data: []
	}
]

在上述代码中, type 就表示图表的类型，一般有line、bar、pie、scatter 等等，每个对应折线图、柱状图、饼图和散点图。在特殊的情况下，生成图表的数据会从dataset 中获得，这个之后再说。

组件

除了series 数组之外的，则称为组件。常见组件有：

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

用option 描述图表

option 是一个js 对象，其中包含了用来描述图表的各种组件，比如要画什么图表，图表的样式是什么，有哪些数据等等：

// 创建 echarts 实例。
var dom = document.getElementById('dom-id');
var chart = echarts.init(dom);

// 用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等。
// option 是个大的 JavaScript 对象。
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], ... ]}
    }]
};

// 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
chart.setOption(option);

上面，系列里的data 是以上这个图表的数据。下面这种是用 dataset 来存数据的：

var option = {
    dataset: {
        source: [
            [121, 'XX', 442, 43.11],
            [663, 'ZZ', 311, 91.14],
            [913, 'ZZ', 312, 92.12],
            ...
        ]
    },
    xAxis: {},
    yAxis: {},
    series: [
        // 数据从 dataset 中取，encode 中的数值是 dataset.source 的维度 index （即第几列）
        {type: 'bar', encode: {x: 1, y: 0}},
        {type: 'bar', encode: {x: 1, y: 2}},
        {type: 'scatter', encode: {x: 1, y: 3}},
        ...
    ]
};

这种方式一般适用于要用到很多数据来生成图表的时候会使用

组件在HTML页面中的定位

类CSS 的绝对定位

大多数的组件都能够基于top、right、down、left、width和height来绝对定位（除了少数的组件可能有特殊定位方式），这种绝对定位基于的是echarts 容器的DOM 节点。它们的值都可以设为固定数值或百分比。
一般横向的定位和竖向的定位最多各设置两个就行了，剩余的echarts 会自己算。

中心半径定位

少数圆形的组件可以用中心半径定位，比如pie（饼图）、sunburst（旭日图）、polar（极坐标系）
中心半径定位，往往依据center（中心）、radius（半径）来决定位置。

坐标系

很多图表（比如line（折线图）、bar（柱状图）或scatter （散点图）等等），需要画在坐标系上。只有这样才能显示表的刻度等等。echarts 至少支持这些坐标系：

• 直角坐标系
• 极坐标系
• 地理坐标系（GEO）
• 单轴坐标系
• 日历坐标系
• 等等...
  其他一些图则可能不依赖于坐标系。

一个坐标系，可能由多个组件配合而成。例如在直角坐标系中，有xAxis（直角坐标系X轴）、yAxis（直角坐标系Y轴）、grid（直角坐标系底板）三种组件。
下图是最简单的直角坐标系的散点图图表。可以看到，只需声明xAxis、yAxis和scatter（散点图），echarts 就会将图表画出。