ECharts基础概念

最新推荐文章于 2024-07-04 15:25:48 发布

原创最新推荐文章于 2024-07-04 15:25:48 发布 · 983 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ECharts #JavaScript

JavaScript 专栏收录该内容

56 篇文章

订阅专栏

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是专门绘制“图”的组件。
注：因为系列是一种特殊的组件，所以有时候也会出现 “组件和系列” 这样的描述，这种语境下的 “组件” 是指：除了 “系列” 以外的其他组件。