一、Apache ECharts简介

Apache ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
官网地址：https://echarts.apache.org/zh/index.html
ECharts可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

通过ECharts可以便捷的实现很多酷炫的效果，以更好的展示数据分析结果。

二、快速入门

1、获取 Apache ECharts

在 https://www.jsdelivr.com/package/npm/echarts?path=dist选择 dist/echarts.js，点击并保存为 echarts.js 文件。

2、引入 Apache ECharts

在项目文件中部分引入echarts.js文件，如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script></head>
</html>

3、简单图表示例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script 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: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body>
</html>

效果：

Apache ECharts快速入门相关推荐

Apache Hive 快速入门 (CentOS 7.3 + Hadoop-2.8 + Hive-2.1.1)
2019独角兽企业重金招聘Python工程师标准>>> 本文节选自<Netkiller Database 手札> 第 63 章 Apache Hive 目录 63.1. ...
Apache Thrift快速入门教程
Thrift是一种跨语言RPC框架,最初是在Facebook上开发的,现在作为Apache项目开源. 这篇文章将描述如何以不同的模式(例如阻塞,非阻塞和异步)编写Thrift服务和客户端. (我觉得后 ...
架构设计：系统间通信（36）——Apache Camel快速入门（上）
1.本专题主旨 1-1.关于技术组件在这个专题中,我们介绍了相当数量技术组件:Flume.Kafka.ActiveMQ.Rabbitmq.Zookeeper.Thrift .Netty.DUBBO等 ...
架构设计：系统间通信（39）——Apache Camel快速入门（下2）
======================== (接上文:<架构设计:系统间通信(38)--Apache Camel快速入门(下1)>) 4-2-1.LifecycleStrategy ...
Apache Iceberg 快速入门
导言本文主要介绍如何快速的通过Spark访问 Iceberg table. 如果想及时了解Spark.Hadoop或者HBase相关的文章,欢迎关注微信公众号:iteblog_hadoop Spar ...
Shiro学习总结（2）——Apache Shiro快速入门教程
第一部分什么是Apache Shiro 1.什么是 apache shiro : Apache Shiro是一个功能强大且易于使用的Java安全框架,提供了认证,授权,加密,和会话管理如同 spr ...
vue3中ECharts快速入门
前言可视化就是把数据简单化直接明了显示数据的比例,增长趋势等等 1.官方echarts数据可视化 2.vue3中使用echarts的配置 3.简单的柱状图 1.官方echart数据可视化官方:A ...
apache ignite_从In Memory Data Grid，Apache Ignite快速入门
apache ignite IMDG或内存数据网格不是内存中关系数据库,NOSQL数据库或关系数据库. 它是另一种软件数据存储库. 数据模型分布在单个位置或多个位置的许多服务器上. 这种分布称为数据结 ...
Apache Flink 集成 Apache Hudi 快速入门指南
摘要:本文由阿里巴巴的陈玉兆分享,主要介绍 Flink 集成 Hudi 的最新版本功能以及快速上手实践指南.内容包括: 背景环境准备 Batch 模式的读写 Streaming 读总结一.背景 ...

Apache ECharts快速入门

文章目录