目录

  • 基础概念
  • echarts实例
  • 系列（series）
  • 组件（component）
  • 图标描述（option）
  • 样式（style）
  • 颜色主题（Theme）
  • 调色盘（color）
  • 直接样式设置（itemStyle、lineStyle、areaStyle、label、...）
  • 高亮的样式：emphasis
  • visualMap 组件
  • 异步数据加载和更新
  • loading动画

基础概念

echarts实例

  • 一个网页中可以创建多个 echarts 实例。
  • 每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。
  • 每个 echarts 实例独占一个 DOM 节点（作为 echarts 的渲染容器）。

系列（series）

系列（series）是指：一组数值以及他们映射成的图。所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
echarts 里系列类型（series.type）就是图表类型

组件（component）

在系列之上，echarts 中各种内容，被抽象为“组件”。
echarts 中至少有这些组件：

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

图标描述（option）

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

样式（style）

基本分为一下几种方式：

  1. 颜色主题（Theme）
  2. 调色盘（color）
  3. 直接样式设置（itemStyle、lineStyle、areaStyle、label、...）
  4. 高亮的样式：emphasis
  5. 视觉映射（visualMap）

颜色主题（Theme）

除了一贯的默认主题外，新内置了两套主题，分别为 'light' 和 'dark'。可以这么来使用它们：

var chart = echarts.init(dom, 'light');

或者

var chart = echarts.init(dom, 'dark');

其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 主题编辑器 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：

如果主题保存为 JSON 文件，那么可以自行加载和注册，例如：

// 假设主题名称是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {
echarts.registerTheme('vintage', JSON.parse(themeJSON))
var chart = echarts.init(dom, 'vintage');
});

如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可：

// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）
var chart = echarts.init(dom, 'vintage');
// ...

调色盘（color）

调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。 可以设置全局的调色盘，也可以设置系列自己专属的调色盘。

option = {
	// 全局调色盘。
	color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

	series: [{
 	   type: 'bar',
 	   // 此系列自己的调色盘。
  	  color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
  	  ...
 }, {
     type: 'pie',
	    // 此系列自己的调色盘。
	    color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
     ...
 }]
}

直接样式设置（itemStyle、lineStyle、areaStyle、label、...）

很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。
一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，itemStyle、label 等可能出现在不同的地方。

高亮的样式：emphasis

在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 emphasis 属性来定制。emphsis 中的结构，和普通样式的结构相同，例如：

option = {
	series: {
		type: 'scatter',

		// 普通样式。
		itemStyle: {
			// 点的颜色。
			color: 'red'
		},
		label: {
			show: true,
			// 标签的文字。
			formatter: 'This is a normal label.'
		},

		// 高亮样式。
		emphasis: {
			itemStyle: {
				// 高亮时点的颜色。
				color: 'blue'
			},
			label: {
				show: true,
				// 高亮时标签的文字。
				formatter: 'This is a emphasis label.'
			}
		}
	}
}

visualMap 组件

visualMap 组件 能指定数据到颜色、图形尺寸的映射规则，详见 数据的视觉映射

异步数据加载和更新

数据通过 setOption中填入，在图表初始化后不管任何时候只要异步获取数据后都可以通过 setOption 填入数据和配置项就行。

loading动画

ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

myChart.showLoading();
$.get('data.json').done(function (data) {
	 myChart.hideLoading();
	myChart.setOption(...);
});