001_ECharts入门

自由与束缚JavaJavaScript

已于 2022-03-15 15:06:08 修改

阅读量1.1k

点赞数

分类专栏： Apache ECharts 文章标签： echarts javascript 前端

于 2022-03-14 16:47:43 首次发布

本文链接：https://blog.csdn.net/aihiao/article/details/123482334

版权

Apache ECharts 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了ECharts，一个强大的JavaScript图表库，涵盖了从安装到实战的步骤，包括npm安装、CDN引用、基本配置和实例演示。重点讲解了如何在项目中设置图表标题、图例、坐标轴和不同类型的图表系列。

摘要由CSDN通过智能技术生成

1. ECharts介绍

1.1. ECharts是一个使用JavaScript实现的开源可视化库, 涵盖各行业图表, 满足各种需求。

1.2. ECharts遵循Apache-2.0开源协议, 免费商用。

1.3. ECharts兼容当前绝大部分浏览器(IE8/9/10/11, Chrome, Firefox, Safari等)及兼容多种设备, 可随时随地任性展示。

1.4. ECharts官网链接: https://echarts.apache.org/zh/index.html。

2. 获取Apache ECharts

2.1. Apache ECharts提供了多种安装方式, 你可以根据项目的实际情况选择以下任意一种方式安装。

从GitHub获取
从npm获取
从CDN获取
在线定制

2.2. 从npm获取: npm install echarts --save。

2.3. 从CDN获取, 推荐从jsDelivr引用echarts

2.3.1. jsDelivr下载地址: https://www.jsdelivr.com/package/npm/echarts, 点击下载按钮。

2.3.2. 下载完成压缩包:

2.3.3. 打开压缩包是package目录, 进入该目录, 查看echarts项目的目录结构

2.3.4. 进入dist文件夹, 该目录下有一个echarts.js文件, 在我们的项目中引用该文件, 就可以进行图表的绘制了。

2.4. 从GitHub获取

2.4.1. apache/echarts项目的release页面可以找到各个版本的链接。点击下载页面下方Assets中的Source code, 解压后dist目录下的echarts.js即为包含完整ECharts功能的文件。

2.4.2. GitHub上echarts地址: https://github.com/apache/echarts。

2.5. 在线定制

2.5.1. 如果只想引入部分模块以减少包体积, 可以使用ECharts在线定制功能。

2.5.2. 在线定制地址: https://echarts.apache.org/zh/builder.html, 勾选自己需要的功能, 最后点击下载。

3. 引入Apache ECharts

3.1. 新建一个index.html文件, 引入echarts.js。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts入门例子</title>
    <!-- 引入echarts.js -->
    <script type="text/javascript" src="echarts.js"></script>
    <body>
	</body>
  </head>
</html>

4. 为ECharts准备一个具备高宽的DOM容器

4.1. 实例中id为main的div用于包含ECharts绘制的图表

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts入门例子</title>
    <!-- 引入echarts.js -->
    <script type="text/javascript" src="echarts.js"></script>
    <body>
    	<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
    	<div id="main" style="width: 600px; height:400px;"></div>
	</body>
  </head>
</html>

5. 基于准备好的dom, 初始化echarts实例

5.1. 通过echarts.init方法初始化一个echarts实例, 命名为myChart。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ECharts入门例子</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));
	    </script>
	</body>
</html>

6. 设置配置信息

6.1. echarts实例通过setOption方法设置配置信息, 这里option表示使用json数据格式的配置来绘制图表。

echarts.init(document.getElementById('main')).setOption(option);

6.2. 为图表配置标题

title: {
	text: 'ECharts入门例子'
}

6.3. 配置提示信息

tooltip: {}

6.4. 图例组件展现了不同系列的标记(symbol), 颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: {
    data: [{
        name: '系列1',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
            color: 'red'
        }
    }]
}

6.5. 配置要在X轴显示的项

xAxis: {
	data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
}

6.6. 配置要在Y轴显示的项

yAxis: {}

6.7. 系列列表

series: [
	{
	    name: '销量', // 系列名称
	    type: 'bar', // 系列图表类型
	    data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容
	}
]

6.8. 每个系列通过type决定自己的图表类型

type: 'bar', 柱状/条形图。
type: 'line', 折线/面积图。
type: 'pie', 饼图。
type: 'scatter', 散点(气泡)图。
type: 'effectScatter', 带有涟漪特效动画的散点(气泡)。
type: 'radar', 雷达图。
type: 'tree', 树型图。
type: 'treemap', 树型图。
type: 'sunburst', 旭日图。
type: 'boxplot', 箱形图。
type: 'candlestick', K线图。
type: 'heatmap', 热力图。
type: 'map', 地图。
type: 'parallel', 平行坐标系的系列。
type: 'lines', 线图。
type: 'graph', 关系图。
type: 'sankey', 桑基图。
type: 'funnel', 漏斗图。
type: 'gauge', 仪表盘。
type: 'pictorialBar', 象形柱图。
type: 'themeRiver', 主题河流。
type: 'custom', 自定义系列。

7. 第一个ECharts例子

7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ECharts入门例子</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为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: {
		          text: 'ECharts入门例子'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['销量']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
		          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
		        },
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '销量', // 系列名称
		            type: 'bar', // 系列图表类型
		            data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

7.2. 效果图