S07-05 数据可视化-ECharts5
[TOC]
API-ECharts5
echarts
- echarts.init()：
(dom,theme,opt)，创建echarts实例。 - echarts.registerMap()：
(mapName, opt)，注册可用的地图，只在 geo 组件或者 map 图表类型中使用。 - echarts.getMap()：
(mapName)，获取已注册地图。
echartsInstance
- echartsInstance.setOption()：
(option)，设置图表实例的配置项以及数据，万能接口。 - echartsInstance.getWidth()：
()，获取 ECharts 实例容器的宽度。 - echartsInstance.getHeight()：
()，获取 ECharts 实例容器的高度。 - echartsInstance.resize()：
({width?,height?,silent?,animation?})，改变图表尺寸，在容器大小发生改变时需要手动调用。 - echartsInstance.showLoading()：
(type?,opt?)，显示加载动画效果。 - echartsInstance.hideLoading()：
()，隐藏加载动画效果。 - echartsInstance.dispatchAction()：
(payload)，触发图表行为，如图例开关、显示提示框等。 - echartsInstance.dispose()：
()，销毁实例，销毁后实例无法再被使用。 - echartsInstance.on()：
(eventName,query?,handler,context?)，添加事件处理函数。
option
- backgroundColor：
Color，设置直角坐标系内绘图区。 - grid?：
{show?,left?,containLabel?,backgroundColor?,...}，直角坐标系内绘图区域。 - xAxis：
{show?,name?,type?,data,axisLine?,axisTick?,axisLabel?,splitLine?,...}，直角坐标系grid中的x轴。 - yAxis：
{show?,name?,type?,data,axisLine?,axisTick?,axisLabel?,splitLine?,...}，直角坐标系grid中的y轴。 - title?：
{text,show?,top?,left?,...}，图表的标题。 - legend?：
{show?,itemWidth?,icon?,formatter?,textStyle?,itemGap?,...}，图例，展现了不同系列的标记、颜色。图例文字来自于data.name - tooltip?：
{show?,trigger?,axisPointer?,formatter?,,...}，提示框。 - toolbox?：
{}，工具栏，提供操作图表的工具。 - visualMap?：
{type?,left?,,seriesIndex,inRange,...}，视觉映射，可以将数据值映射到图形的形状、大小、颜色等。 - geo?：
{map,roam?,label?,aspectScale?,itemStyle?,emphasis?,...}，地理坐标系组件，用于地图的绘制，支持在地理坐标系上绘制散点图、线集。 - series：
[{type,data,name?,label?,itemStyle?,emphasis?,coordinateSystem?,...}]，系列，配置系列图表的类型和图形信息数据。
color
- color：
{type,x,y,x2,y2,colorStops}，线性渐变。 - color：
{type,x,y,r,colorStops}，径向渐变。 - color：
{image,repeat}，纹理填充。
基础
概述
ECharts(EnterpriseCharts，企业级数据图表)是一个基于 JavaScript 的开源可视化图表库。
特性：
兼容性： ECharts 可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等）。
底层依赖： ECharts 底层依赖轻量级的 ZRender 图形库，可提供直观、生动、可交互、可高度个性化定制的数据可视化图表。
特点：
- 丰富的图表类型： 提供开箱即用的 20 多种图表和十几种组件，并且支持各种图表以及组件的任意组合。
- 强劲的渲染引擎： Canvas、SVG 双引擎一键切换，增量渲染等技术实现千万级数据的流畅交互。
- 简单易上手： 直接通过编写配置，便可以生成各种图表，并且支持多种集成方式。
- 活跃的社区： 活跃的社区用户保证了项目的健康发展，也贡献了丰富的第三方插件满足不同场景的需求。
历史：
ECharts 由百度团队开源
2018年初，捐赠给 Apache 基金会，成为 Apache 软件基金会孵化级项目。
2021年1月26日，Apache基金会官方宣布 ECharts 项目正式毕业，成为Apache顶级项目。
2021年1月28日，ECharts5线上发布会举行
应用场景：
- 智慧城市、园区、航运、公安、机房、监所、电力、物业、应急管理等多个领域的数据可视化展示。
安装
CDN
<!-- bootcdn -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>npm
pnpm i echarts基本使用
▸ 基本使用：Echarts
注意： 容器必须设高度
渲染原理
ECharts同时支持SVG或Canvas进行渲染
- 最开始时一直都是使用 Canvas 绘制图表，直到4.0版本，才支持 SVG 渲染器。
- 能同时支持SVG或Canvas的底层原因是对ZRender库的抽象和实现。
ZRender： 是二维轻量级的绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。
Echarts切换渲染器： Echarts在使用 echarts.init() 初始化图表时设置renderer参数为 canvas或 svg 即可。
对比Canvas和SVG：
Canvas： 更适合绘制图形元素数量较多的图表。如，热力图、炫光尾迹特效、地理坐标系、平行坐标系上的大规模线图等。
SVG： 具有重要的优势：它的内存占用更低、适配性、扩展性性好、放大缩小图表不会模糊。
渲染器选择：
可根据软硬件环境、数据量、功能需求综合考虑选择渲染器：
在软硬件环境较好，数据量不大的场景下，两种渲染器都可以适用，并不需要太多纠结。
在软硬件环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器：
- 情形：在需要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。
- 情形：数据量较大（经验判断 > 1k）、较多交互时，建议选择 Canvas 渲染器。
▸ 基本使用：切换渲染器
配置 option
索引
backgroundColor：设置直角坐标系内绘图区
grid：直角坐标系内绘图区域
yAxis：直角坐标系grid中的y轴
xAxis：直角坐标系grid中的x轴
title：图表的标题
legend：图例，展现了不同系列的标记、颜色
tooltip：提示框
toolbox：工具栏，提供操作图表的工具
series：系列，配置系列图表的类型和图形信息数据
visualMap：视觉映射，可以将数据值映射到图形的形状、大小、颜色等
网格 grid
grid?：{...option}，直角坐标系内绘图区域。
- show?：
boolean，默认：false，是否显示直角坐标系网格。 - left?, right?, top?, bottom?：
Length，默认：10%,10%,60,60，grid组件离容器左右上下的距离。 - containLabel?：
boolean，默认：false，grid区域是否包含坐标轴的刻度标签。 - backgroundColor?：
Color，默认：transparent，网格背景色。
▸ 基本使用：grid
坐标系 xAxis yAxis
xAxis：{...option}，直角坐标系grid中的x轴。
yAxis：{...option}，直角坐标系grid中的y轴。
show?：
boolean，默认：true，是否显示x或y轴。name?：
string，坐标轴名称。type?：
value | category | time | log，默认：category，坐标轴类型。value，数值轴，适用于连续数据。常用于y轴。category，类目轴，适用于离散的类目数据。常用于x轴。类目数据可来源xAxis.data、series.data或dataset.source。time，时间轴，适用于连续的时序数据。log，对数轴。适用于对数数据。
data：
[]，类目数据，在类目轴type: 'category'中有效。axisLine?：
{show?,lineStyle?}，坐标轴轴线相关设置。axisTick?：
{show?,length?,lineStyle?}，坐标轴刻度相关设置。axisLabel?：
{show?,color?,fontSize?}，坐标轴刻度标签的相关设置。splitLine?：
{show?,lineStyle?}，坐标轴在grid区域中的分隔线。lineStyle?，{color?,width?}，线条样式。
系列图 series
series：[{...option}]，系列，配置系列图表的类型和图形信息数据。
- 公共属性：
- name?：
string，系列名称，用于tooltip的显示，legend的图例筛选等 - type：
line | bar | pie | scatter | effectScatter | map | ...，指定系列图表的类型，比如：折线图、柱状图、饼图、散点图、地图等。 - data：
[]，系列中的数值内容数组。数组中的每一项称为数据项 。数据类型有如下写法：[value，...]： 一维数组。一维数组是二维数组的简写。[[index, value], ...]：二维数组。注意index从0开始。[[x, y, value], ...]：二维数组。x、y可以表示x、y 轴，常用于表示经度、纬度。[{value: y轴值, name: x轴值, label?: {}, itemStyle?: {}, emphasis?: {}, ...}, ...]：对象类型(推荐)。
- label?：
{show?,position?,color?,fontSize?}，图形上的文本标签。就近原则，data 中的比 series 优先级高。 - itemStyle?：
{color?, border*?, opacity?, shadow*?}，图形样式。还可以写在series.data中。 - emphasis?：
{disabled?, focus?, label?, itemStyle?}，高亮的图形样式和标签样式。还可以写在series.data中。 - coordinateSystem?：
cartesian2d | polar | geo，默认：cartesian2d，该系列使用的坐标系，默认值为二维的直角坐标系（笛卡尔坐标系）cartesian2d：二维的直角坐标系(笛卡尔坐标系)。polar：极坐标系。geo：地理坐标系。常用在地图的散点图中。
- bar属性：
- barWidth?：
number，默认：自适应，柱条的宽度，不设时自适应。 - line属性：
- smooth?：
boolean，默认：false，是否平滑曲线显示。 - showSymbol?：
boolean，默认：true，是否显示 symbol标记。 - symbolSize?：
number，默认：4，标记的大小。 - areaStyle?：
{color?,,...}，区域填充样式。设置后显示成区域面积图。 - pie属性：
- center?：
[x, y]，默认：[50%, 50%]]，饼图的中心（圆心）x、y坐标。 - radius?：
number | string | [内半径, 外半径]，默认：[0, '75%']，饼图的半径。 - roseType?：
false | radius | area，默认：false，是否展示成南丁格尔图，通过半径区分数据大小。'radius'：扇区圆心角展现数据的百分比，半径展现数据的大小。'area'：所有扇区圆心角相同，仅通过半径展现数据大小。
- 地图：
- geoIndex?：
number，指定一个geo组件。map和其他series（例如散点图）就可以共享一个geo组件了。
▸ 用法：图形数据data的写法
▸ 用法：图形文本标签 label
▸ 用法：图形样式 itemStyle
▸ 用法：图形样式 itemStyle-data中的样式优先级更高
▸ 用法：图形高亮 emphasis
注意： emphasis有一个默认的高亮样式
▸ 用法：ECharts4之前高亮的写法
标题 title
title?：{show?,top?,left?,text,textStyle?,subtext?,subtextStyle?,...}，图表的标题。
- show?：
boolean，默认：true，是否显示标题组件。 - top?, left?：
Length, Length，title 组件离容器上侧、左侧的距离。 - text：
string，主标题文本，支持\n换行。 - textStyle?：
{color,rich,...}，主标题样式。 - subtext?：
string，副标题文本，支持\n换行。 - subtextStyle?：
{color,rich,...}，副标题样式。
▸ 基本使用：title
图例 legend
legend?：{show?,itemWidth?,icon?,formatter?,textStyle?,itemGap?,orient?,...}，图例，展现了不同系列的标记、颜色。图例文字来自于data.name
- show?：
boolean，默认：true，是否显示图例。 - itemWidth?：
number，默认：25，图例标记的图形宽度。 - icon?：
circle | rect | ...，图例项的 icon。 - formatter?：
string | (name) => void，用来格式化图例文本。- name：
string，图例名称。
- name：
- textStyle?：
{rich?}，图例的公用文本样式。- rich?：
CSS样式，富文本的CSS样式
- rich?：
- itemGap?：
number，默认：10，图例每项之间的间隔。 - orient?：
horizontal | vertical，默认：horizontal，图例列表的布局朝向。
▸ 用法：设置图例样式 icon
▸ 用法：设置图例文本前后缀 formatter
▸ 用法：给formatter中的富文本添加样式 textStyle.rich
1、插入富文本：return name + {percentStyle|40%}
{}中不能有空格40%为图例文本的内容字符串
2、在textStyle.rich中添加css样式
提示框 tooltip
tooltip?：{show?,trigger?,axisPointer?,formatter?,...}，提示框。
- show?：
boolean，默认：true，是否显示提示框。 - trigger?：
item | axis，默认：item， - axisPointer?：
type，坐标轴指示器配置项。- type：
line | cross | shadow | none，指示器类型。
- type：
- formatter?：
string | (params, ticket, callback) => string | HTMLElement[]，提示框浮层内容格式器。- params：
object | array，formatter 需要的数据集。 - ticket：
string，异步回调标识，配合第三个参数callback使用。 - callback：
(ticket, html) => void，回调函数
- params：
▸ 用法：tooltip-axisPointer
▸ 用法：tooltip-formatter
颜色
Color支持格式： RGB、RGBA、关键字、十六进制格式、渐变
color：{type,x,y,x2,y2,colorStops}，线性渐变。
- type：
linear，渐变类型：线性渐变。 - x,y：
number, number，渐变的起点坐标。 - x2,y2：
number, number，渐变的终点坐标。 - colorStops：
[offset,color]，渐变颜色停靠点。- offset：
number，表示颜色停靠点的位置。介于0-1之间的数字，0表示渐变的起点，1表示渐变的终点 - color：
Color，要应用的颜色，可以是任意有效的 CSS 颜色值。
- offset：
color：{type,x,y,r,colorStops}，径向渐变。
- type：
radial，渐变类型：径向渐变。 - x,y：
number, number，圆心坐标。 - r：
number，圆半径。 - colorStops：
[offset,color]，渐变颜色停靠点。- offset：
number，表示颜色停靠点的位置。介于0-1之间的数字，0表示渐变的起点，1表示渐变的终点 - color：
Color，要应用的颜色，可以是任意有效的 CSS 颜色值。
- offset：
color：{image,repeat}，纹理填充。
- image：
HTMLImageElement | HTMLCanvasElement，图片元素。 - repeat：
repeat | repeat-x | repeat-y | no-repeat，默认：repeat，是否平铺。
▸ 基本使用：线性渐变
基本图形
柱形图 bar
折线图 line
饼图 pie
地图
地图绘制
ECharts 可以使用 GeoJSON格式的数据作为地图的轮廓，可以获取第三方的GeoJSON数据注册到 ECharts 中。
GeoJSON数据结构：
{
"type": "Feature",
"geometry": {
"type": "Point", // 类型：Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}GeoJSON下载地址：
ECharts 绘制地图方式：
方式一：配置geo.map
1、拿到 GeoJSON 数据
2、注册对应的地图的 GeoJSON 数据（调用 setOption 前注册）
3、配置 geo.map。
方式二：配置series.map
1、拿到 GeoJSON 数据
2、注册对应的地图的 GeoJSON 数据（调用 setOption 前注册）
3、配置 series.map。
▸ 方式一：配置geo.map-使用json格式的GeoJSON数据
1、将json对象赋值给变量，并保存到js文件中带引入
2、在html文件中引入，注册并设置option.geo.map展示地图
▸ 方式一：配置geo.map-使用js格式的GeoJSON数据
注意： js格式的GeoJSON数据是对数据预先通过js处理一遍，并提前调用 echarts.registerMap() 方法注册过地图。
1、下载js格式的GeoJSON数据
2、在html文件中引入并设置option.geo.map展示地图（无需注册）
▸ 方式二：配置series.map-使用json格式的GeoJSON数据
对比geo.map和series.map
对比geo.map和series.map：
生成地理坐标系组件： 都会生成一个用于地图绘制的geo地理坐标系组件。
地理坐标系用途不同：
geo.map的地理坐标系可以共其它系列(series)复用。复用时series的itemStyle等样式不起作用。series.map的地理坐标系主要供内部使用。
使用场景不同：
geo.map用于设置地图的底图信息，主要用于定义地图的类型、中心位置、缩放级别等地理属性。series.map用于在地图上绘制数据，将数据绑定到地图的具体区域上，常用于数据可视化。可以配合visualMap组件展示不同区域的人口分布密度等数据。
结合使用： 通常情况下，
geo.map和series.map会结合使用。你可以在geo中配置底图，然后通过series中的地图类型来展示具体的区域数据。
▸ 用法：geo.map和series.map结合使用
地图着色
geo?：{map,roam?,label?,aspectScale?,itemStyle?,emphasis?,...}，地理坐标系组件，用于地图的绘制，支持在地理坐标系上绘制散点图、线集。
- map：
string，使用 registerMap 注册的地图名称。 - roam?：
boolean，默认：false，是否开启鼠标缩放和平移漫游。 - label?：
{show?,...}，图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。 - aspectScale?：
number，默认：0.75，用于缩放地图的长宽比。 - itemStyle?：
{areaColor?,borderColor?,...}，地图区域的多边形图形样式。- areaColor?：
Color，默认：#eee，地图区域的颜色。 - borderColor?：
Color，默认：#000，图形的描边颜色。
- areaColor?：
- emphasis?：
{itemStyle,label,...}，高亮状态下的多边形和标签样式。
▸ 基本使用：地图着色
数据可视化
visualMap?：{type?,left?,,seriesIndex,inRange,...}，视觉映射，可以将数据值映射到图形的形状、大小、颜色等。
- type：
continuous | piecewise，默认：continuous，视觉映射的类型。 - left?,right?,top?,bottom?：
Length，默认：，visualMap 组件离容器的距离。 - seriesIndex：
number | []，默认：所有系列，指定取哪个系列的数据。 - inRange：
{color}，默认：，定义在选中范围中的视觉元素。- color：
[]，颜色数组。
- color：
给地图添加数据，并可视化展示：
1、添加一个 map series
2、配置地图样式
3、添加地图所需的数据
4、添加 visualMap 视觉映射
▸ 基本使用：给地图添加数据
▸ 用法：视觉映射 visualMap
涟漪特效散点图 effectScatter
给地图添加涟漪特效的散点图数据，并可视化展示
1、添加一个 effectScatter series
2、指定使用的地理坐标系
3、添加地图所需的数据
4、修改标记的大小和样式
5、修改默认的 tooltip 提示
▸ 基本使用：涟漪特效散点图
高级
响应式图表
响应式图片的实现步骤：
1、图表只设置高度，宽度设置为 100% 或 不设置。
2、监听窗口的 resize 事件，即监听窗口尺寸的变化（需节流）。
3、当窗口大小改变时，然后调用 echartsInstance.resize() 改变图表的大小。。
注意： 在容器节点被销毁时，可以调用 echartsInstance.dispose() 以销毁 echarts 的实例释放资源，避免内存泄漏。
▸ 基本使用：响应式地图
自动触发行为
echartsInstance.dispatchAction()：({type,additionalParameters?})，触发图表行为，如图例开关、显示提示框等。
type：
string，表示要触发的行为类型。highlight/downplay: 高亮/取消高亮某个系列或数据项。showTip/hideTip: 显示/藏提示框。select/unselect: 选择/取消选择数据项。toggleLegend: 切换图例项的显示状态。dataZoom: 用于控制数据缩放。
additionalParameters?：
any，取决于触发的行为类型，不同的行为类型有不同的参数需求。highlight/downplay、showTip/hideTip、select/unselect- seriesIndex?：
number，指定要操作的系列索引，从0开始。 - dataIndex?：
number，指定要操作的数据项索引，从0开始。 toggleLegend- name?：
string，图例项的名称，用来指定要切换的图例项。 dataZoom- start?：
number，0-100，缩放的起始位置。 - end?：
number，0-100，缩放的结束位置。
- html
<div id="main" style="width: 600px; height: 400px"></div> <button onclick="highlightData()">高亮数据</button> <button onclick="toggleLegend()">切换图例</button> <button onclick="showTooltip()">显示提示框</button> <button onclick="selectData()">选择数据</button> <script> var myChart = echarts.init(document.getElementById('main')) var option = { ... } myChart.setOption(option) // 高亮数据项 function highlightData() { myChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 1 }) } // 切换图例 function toggleLegend() { myChart.dispatchAction({ type: 'toggleLegend', name: '邮件营销' }) } // 显示提示框 function showTooltip() { myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: 2 }) } // 选择数据项 function selectData() { myChart.dispatchAction({ type: 'select', seriesIndex: 0, dataIndex: 0 }) } </script>
▸ 基本使用：实现提示框轮播功能
地图下钻
地图下钻： 点击全国地图中的省份时，跳转到省份地图中。
地图下钻实现步骤：
- 1、准备全国地图和各省份的地图。
- 2、实现点击全国地图某省份切换为该身份地图的功能
- 3、实现点击按钮，返回全国地图的功能
