1 ECharts简介

ECharts是一款开源的基于JavaScript的数据可视化图表库，可以流畅地运行在PC和移动设备上，兼容当前绝大多数浏览器。它底层依赖矢量图形库ZRender，支持超过12类图表，同时提供7个功能灵活高效的可交互组件，支持多图表、组件的联动和混搭展现，创新的拖拽曳重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力，可以呈现出直观、生动、交互丰富、可高度个性化定制的数据可视化图表。正因为ECharts的优良特性，它的应用场景广泛，是热门的前端数据可视化图表库。

2.ECharts快速上手

（1）. 获取ECharts

ECharts提供了多种安装方式，可以从GitHub、npm或CDN获取。本书介绍从 GitHub获取的安装方式。

打开ECharts官网，单击下载页面下方Assets中的Source code(zip)（见图11-1），解压后dist目录下的“echarts.js”为完整的ECharts功能的文件。

图11-1 ECharts官网下载页面

其中echarts.js是包含源代码的版本，echarts.min.js是压缩过后的版本，项目中推荐使用压缩版本以节省资源。

（2）. 引入ECharts

<!-- 引入下载的 ECharts 文件 -->
<script src="echarts.js"></script>

3 配置项

在引入echarts.js后，就可以开始绘制图表。在绘图前，首先需要为ECharts准备一个定义了高宽的DOM容器。示例如下：

<body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>

然后通过ECharts.init()方法初始化一个ECharts实例，并通过setOption()方法生成一个图表。其中setOption()方法需要一个配置项作为参数。配置项使用JSON数据格式的配置来绘制图表，包括了标题、提示信息、图例组件、X轴、Y轴、系列列表等选项。

【例11-1】ECharts快速入门

1 <!-- 引入ECharts 文件 -->2 <script src="echarts.min.js"></script>3 <body>4  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->5  <div id="main" style="width: 600px;height:400px;"></div>6  <script type="text/javascript">7    // 基于准备好的DOM，初始化ECharts实例8    var myChart = echarts.init(document.getElementById('main'));9    // 指定图表的配置项和数据
10    var option = {
11      //图表标题
12      title: {
13        text: 'ECharts 入门示例'
14      },
15      //图例
16      legend: {
17        data: ['销量']
18      },
19      //X轴
20      xAxis: {
21        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
22      },
23     //系列列表
24      series: [
25        {
26          name: '销量',// legend对应的名称
27          type: 'bar',// 图形类型
28          data: [5, 20, 36, 10, 10, 20]// 数值
29        }
30      ]
31   };
32    // 使用刚指定的配置项和数据显示图表。
33   myChart.setOption(option);
34  </script>
35 </body>
36 </html>

例11-1中，第2行代码引入ECharts文件；第5行代码为ECharts准备一个定义了宽高的DOM；第8行代码调用ECharts.init()方法初始化一个ECharts实例；第10~31行代码指定图表的配置项和数据，包括了标题、图例、X轴、系列列表等选项；第33行代码调用setOption()方法使用刚指定的配置项和数据显示图表。例11-1在Chrome浏览器中的运行效果，如图11-2所示。

图11-2 【例11-1】运行效果

4 常用图表配置项

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于BI的漏斗图、仪表盘，并且支持图与图之间的混搭。图表之间主要的区别是配置项不同。本节将介绍折线图、饼图、用于地理数据可视化的地图等常用图表的配置项。

（1）. 折线图

常用配置项，示例如下：

【例11-2】ECharts折线图常用配置项

var option = {//提示信息tooltip: {trigger: 'axis',//触发类型：坐标轴触发//指示器axisPointer: {type: 'line',//直线指示器lineStyle: {color: '#7171C6'//指示器颜色}},},//X轴xAxis: {type: 'category',//类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']//X轴数据},//Y轴yAxis: {type: 'value'//数值轴，适用于连续数据},//系列列表series: [{data: [150, 230, 224, 218, 135, 147, 260],//系列数据type: 'line'// 图形类型 }]
};

其中最重要的选项是X轴数据xAxis.data和系列数据series[0]. data，填充不同的数据可以实现不同的折线图数据效果。配置项效果，如图11-3所示，完整代码详见例11-2。

图11-3 【例11-2】运行效果

（2）. 饼图

常用配置项，示例如下：

【例11-3】ECharts饼图常用配置项

option = {title: {text: 'Referer of a Website',subtext: 'Fake Data',//子标题left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',//系列名称，用于tooltip的显示type: 'pie',// 图形类型radius: '50%',//饼图的半径data: [//饼图数据{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]
};

其中最重要的选项是系列数据series[0].data，填充不同的数据可以实现不同的饼图数据效果。配置项效果，如图11-4所示，完整代码详见例11-3。

图11-4 【例11-3】运行效果

视频讲解：HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏_哔哩哔哩_bilibili

源码：清华大学出版社-图书详情-《JavaScript前端开发与实例教程（微课视频版）》

HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-1快速上手相关推荐

HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-2设计与实现
疫情期间,各类应用系统.大数据系统为防疫抗疫带来了巨大助力.国家博物馆首次将代码列为藏品,那就是抗击疫情期间来自阿里程序员写的健康码第一行代码以及研发人员的签名.这展现了广大程序员在疫情面前,争当勇敢 ...
别人家的防疫实时监控大屏是怎么做的？方法和技巧都在这里了
复工返学高峰季是疫情防控的要紧时期,引起了全国企业和高校的高度重视.不少公司和学校将信息化手段应用到了防疫工作中,数字大屏可以用做防疫数据监控的前端平台,也能通过数据展示警醒大家不可放松警惕,在防疫数 ...
【云驻共创】华为云之手把手教你搭建IoT物联网应用充电桩实时监控大屏
文章目录前言 1.什么是充电桩 2.什么是IOT 3.什么是端.边.云.应用协同 4.什么是Astro轻应用一.玩转lOT动态实时大屏(线下实际操作) 1.Astro轻应用说明 1.1 场景说明 ...
推荐一款清爽的实时监控大屏附安装教程
点击▲关注 "爪哇妹" 给公众号标星置顶更多摄影技巧第一时间直达前言前段时间分享了一个支付监控大屏,好多小伙伴在问撸主是怎么实现的,所以花几分钟时间跟大家分享一下. 预览 ...
Serverless 开发，基于 IoT物联网 + 表格存储DB + DataV 搭建实时环境监控大屏
今天给大家带来基于阿里云 IoT 物联网平台 + Tablestore 表格存储数据库 + DataV大屏三大云产品组合搭建实时环境监控大屏的开发实战. 少啰嗦,先看效果. 部署后效果 1.技 ...
利用爬虫实现全国疫情实时监控（手机版）
文中分为六个部分,介绍如何用python等工具实现定时爬虫,完成全国疫情实时监控项目.主要用到工具:PyCharm (代码编写),python(版本为3.7.6,后台代码结构设计),Hbuilder ...
数据分享——EPS数据库-新冠肺炎疫情实时监控平台
原文链接:https://www.lianxh.cn/news/af018044fad9e.html 与 EPS 数据库沟通后,与大家一起分享最新的舆情监控数据. 疫情数据,牵动人心!数据是我们在疫情 ...
模拟购物数据实时流处理（4）——实时数据大屏
项目介绍本项目总体分为平台搭建模拟数据源生成实时流数据处理实时数据大屏这几个部分,我将分成几个博客分别介绍这些部分的工作,本文主要介绍最后一个部分,实时数据大屏. 前面的几篇文章已经将平台 ...
【2】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 物流大数据
目录精彩案例汇总效果展示一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1 ...

HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-1快速上手