Hello ECharts
1.引入 ECharts
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
2.绘制一个简单的图表
<!-- 为ECharts准备一个具备大小(宽高)的 Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {},
tooltip: {},
legend: {},
xAxis: {},
yAxis: {},
series: [] // 系列
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
ECharts 基础概念
1.echarts 实例
- 一个网页中可以创建多个 echarts 实例。
- 每个 echarts 实例 中可以创建多个图表和坐标系等等(用 option 来描述)。
- 准备一个 DOM 节点,作为 echarts 的渲染容器,就可以在上面创建一个 echarts 实例。
- 每个 echarts 实例独占一个 DOM 节点。
2.系列(series)
- 系列是很常见的名词。
- 在 echarts 里,系列是指:一组数值以及他们映射成的图。
“系列”这个词原本可能来源于“一系列的数据”,而在 echarts 中取其扩展的概念,不仅表示数据,也表示数据映射成为的图。所以,一个系列包含的要素至少有:一组数值、图表类型(series.type)
、以及其他的关于这些数据如何映射成图的参数。 - echarts 里系列类型就是图表类型。系列类型至少 有:折线图
line
、柱状图bar
、饼图pie
、散点图scatter
、关系图graph
、树图tree
、…
例如:在option 中声明了三个 系列:饼图系列pie
、折线图系列line
、柱状图系列bar,每个系列中有他所需要的数据(series.data)
。
实现方式一,将数据直接配置到data中:
实现方式二,另一种配置方式,系列的数据从 dataset
中取下标:
3.组件(component)
- echarts 中各种内容,被抽象为“组件”。
echarts 中至少有这些组件:直角坐标系 X 轴xAxis
、直角坐标系 Y 轴yAxis
、直角坐标系底板grid
、极坐标系角度轴angleAxis
、极坐标系半径轴radiusAxis
、极坐标系底板polar
、地理坐标系geo
、数据区缩放组件dataZoom
、视觉映射组件visualMap
、提示框组件tooltip
、工具栏组件toolbox
、系列series
、… - 在
option
中声明的每一个对象就是组件,这样各个组件就出现在图中。例如系列series
,series
是专门绘制“图”的组件。 - 注:因为系列是一种特殊的组件,所以有时候也会出现 “组件和系列” 这样的描述,这种语境下的 “组件” 是指:除了 “系列” 以外的其他组件。