2021SC@SDUSC
1.Echarts简介
Echarts,一个基于JavaScript的开源可视化图标库,可以提供直观、交互丰富、可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
2.Echarts安装
Apache ECharts 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装。
- 从 GitHub 获取
- 从 npm 获取
- 从 CDN 获取
- 在线定制
我将介绍通过GitHub安装Echarts的方法。
可以从GitHub中下载压缩包,解压zip,找到dist\echarts.js;也可以直接在GitHub中下载单个文件,找到 dist
目录下的 echarts.js
,右键单击raw,选择链接另存为,得到echarts.js文件。
3.初试Echarts
拷贝echarts实例开源代码
先按要求下载echarts.min.js,然后在同一个文件夹下用记事本建立一个html文件,再把代码复制进去,再用浏览器打开),其基本代码如下:
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<!-- 引入刚刚下载的 ECharts 文件 --> | |
<script src="echarts.js"></script> | |
</head> | |
</html> | |
<body> | |
<!-- 为 ECharts 准备一个定义了宽高的 DOM --> | |
<div id="main" style="width: 600px;height:400px;"></div> | |
</body> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<title>ECharts</title> | |
<!-- 引入刚刚下载的 ECharts 文件 --> | |
<script src="echarts.min.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: ['销量'] | |
}, | |
xAxis: { | |
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] | |
}, | |
yAxis: {}, | |
series: [ | |
{ | |
name: '销量', | |
type: 'bar', | |
data: [5, 20, 36, 10, 10, 20] | |
} | |
] | |
}; | |
// 使用刚指定的配置项和数据显示图表。 | |
myChart.setOption(option); | |
</script> | |
</body> | |
</html> |
4.代码分工
Echarts是基于JavaScript的开源可视化图标库,查看其代码首先下载vscode,然后再从GitHub下载的压缩包的中打开dist\echarts.js可看到所有代码。