Echarts

Echarts 是一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender，提供直观、交互丰富，可高度个性化定制的数据可视化图表，能满足绝大多数可视化图表实现。

官方网址：https://echarts.apache.org/zh/index.html   // 开源免费、功能丰富、社区活跃

# Echarts 的特点：   https://echarts.apache.org/zh/feature.html

丰富的可视化类型：折线图、柱状图、饼图、K 线图 ... https://echarts.apache.org/examples/zh/index.html

多种数据格式支持：key-value 数据格式、二维表、TypeArray 格式

流数据的支持：流数据的动态渲染、增量渲染技术

移动端优化、跨平台使用、绚丽的特效、三维可视化 ...

# Echarts 快速入门

<!DOCTYPE html> <html> <head> <title>Echarts的基本使用</title>  <script src="./libs/echarts.min.js"></script> </head> <body>  <div style="width: 600px;height:400px;"></div> <script> // 3. 初始化echarts实例对象 var myCharts = echarts.init(document.querySelector('div')) // 4. 准备配置项 var option = { xAxis:{ // xAxis：直角坐标系中的 x 轴 type:'category', data:['小明','小红','小王'] }, yAxis:{ // yAxis：直角坐标系中的 y 轴 type:'value' }, series:[ // series：系列列表，每个系列通过 type 决定自己的图表类型 { name:'语文', type:'bar', data:[80,69,97] } ] } // 5. 将配置项设置给echarts实例对象 myCharts.setOption(option) </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE html>
<html>
    <head>
        <title>Echarts的基本使用</title>
        
        <script src="./libs/echarts.min.js"></script>
    </head>
    <body>
        
        <div style="width: 600px;height:400px;"></div>
        <script>
            // 3. 初始化echarts实例对象
            var myCharts = echarts.init(document.querySelector('div'))
            // 4. 准备配置项
            var option = {
                xAxis:{  // xAxis：直角坐标系中的 x 轴
                    type:'category',
                    data:['小明','小红','小王']
                },
                yAxis:{  // yAxis：直角坐标系中的 y 轴
                    type:'value'
                },
                series:[  // series：系列列表，每个系列通过 type 决定自己的图表类型
                    {
                        name:'语文',
                        type:'bar',
                        data:[80,69,97]
                    }
                ]
            }
            // 5. 将配置项设置给echarts实例对象
            myCharts.setOption(option)
        </script>
    </body>
</html>

Echarts 基础：配置项的使用和常用图表的绘制（ 7 ）

Echarts 的使用步骤，除了配置项会变化外，其他的代码都是固定的；配置项的学习和使用（太多，无需刻意记忆），

应该参照官方文档和示例 https://echarts.apache.org/zh/option.html#title

# 通用配置：即，任何一种类型的图表，都可以使用的配置

标题：title

文字样式：textStyle

标题边框：borderWidth、borderColor、borderRedius

标题位置：left、top、right、bottom

提示：tooltip，提示框组件，用于配置鼠标滑过或点击图标时的显示框

触发类型：trigger

item（鼠标在 item 上）、axis（鼠标在轴上）

触发时机：triggerOn

mouseover（默认）、click

格式化：formatter

字符串模板、回调函数

工具按钮：toolbox，Echarts 提供的工具栏

内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具

显示工具栏按钮：feature

saveAsImage、dataView、magicType、dataZoom、restore

图例：legend，用于筛选系列，需要和 series 配合使用

legend 中的 data 是一个数组

legend 中的 data 的值，需要和 series 数组中某组数据的 name 值一致

# 直角坐标系

# 直角坐标系中的常用配置 // 直角坐标系图表：柱状图、折线图、散点图

网格：grid，用来控制直角坐标系的布局和大小；x 轴和 y 轴，就是在 grid 的基础上进行绘制的

显示 grid：show

grid 的边框：borderWidth、borderColor

grid 的位置和大小：left、top、right、bottom、width、height

坐标轴：axis，坐标轴分为 x 轴和 y 轴；一个 grid 中，最多有两种位置的 x 轴和 y 轴

坐标轴类型：type

value：数值轴，自动会从目标数据中读取数据

category：类目轴，该类型必须通过 data 设置类目数据

显示位置 position

xAxis：可取值为 top 或 bottom

yAxis：可取值为 left 或 right

区域缩放：dataZoom，用于区域缩放，对数据范围过滤，x 轴和 y 轴都可以拥有

dataZoom，是一个数组，意味着可以配置多个区域缩放器

类型：type

slider：滑块

inside：内置，依靠鼠标滚轮或者双指缩放

指明产生作用的轴

xAxisIndex：设置缩放组件控制的是哪个 x 轴，一般写 0 即可

yAxisIndex：设置缩放组件控制的是哪个 y 轴，一般写 0 即可

指明初始状态的缩放情况

start：数据窗口范围的起始百分比

end：数据窗口范围的结束百分比

（1）柱状图

柱状图，描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以很清晰的看出每个分类数据的排名情况

实现步骤：

基本的代码结构：引入 js 文件、DOM 容器、初始化对象、设置 option

x 轴数据 — 数组 1：['张三','李四','王五','闰土','小明','茅台','二妞','大强',]

y 轴数据 — 数组 2：[88,92,63,77,94,80,72,86]

图片类型：在 series 下，设置 type:bar

常见效果：

标记

最大值、最小值：markPoint

平均值：makeLine

显示

数值显示：label

柱的宽度：barWidth

横向柱状图：更改 x 轴和 y 轴的角色

（2）折线图

折线图，常用来分析数据随着时间的变化趋势

实现步骤：

基本的代码结构：引入 js 文件、DOM 容器、初始化对象、设置 option

x 轴数据 — 数组 1：['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

y 轴数据 — 数组 2：[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]

图片类型：在 series 下，设置 type:line

常见效果：

标记

最大值、最小值：markPoint

平均值：makeLine

标注区间：makeArea

线条控制

平滑：smooth

风格：lineStyle

填充风格：areaStyle

紧挨边缘：boundaryGap

缩放

脱离 0 值比例：scale

堆叠图：stack

（3）散点图

散点图，可以帮助我们推断出不同维度数据之间的相关性，如，身高和体重的关系

实现步骤：

基本的代码结构：引入 js 文件、DOM 容器、初始化对象、设置 option

x 轴和 y 轴数据：二维数组

数组 1：[ [ 身高1, 体重1 ], [ 身高2, 体重2 ], [ 身高3, 体重3 ] ... ]

图标类型：在 series 下，设置 type:scatter

xAxis 和 yAxis 的 type 都要设置为 value

调整：将坐标轴都设置为脱离 0 值比例，即：scale

常见效果：

气泡图效果

散点的大小不同：SymbolSize

散点的颜色不同：itemStyle.color

涟漪动画效果

type：effectScatter

showEffectOn:'emphasis'

rippleEffect:{}

# 非直角坐标系

（4）饼图

饼图，可以很好的帮助用户，快速了解不同分类的数据等占比情况

实现步骤：

基本的代码结构：引入 js 文件、DOM 容器、初始化对象、设置 option

数据准备：[ { name:???, value:??? },{ name:???, value:??? } ... ]

图表类型：在 series 下，设置 type:pie

常见效果：

显示文字的格式化：label.formatter

圆环：设置两个半径 redius:['50%','70']

南丁格尔玫瑰图：roseType:'radius'，饼图的每个区域的半径是不同的，随数值变化

选中效果

选中模式：selectedMode: single \ multiple

选中偏移量：selectedOffset：30

（5）地图

地图，主要可以帮助我们从宏观的角度，快速看出不同地理位置上数据的差异

地图图表的使用方式：

百度地图 API：需要申请百度地图 ak

矢量地图：需要准备矢量地图数据

实现步骤：

基本的代码结构：引入 js 文件、DOM 容器、初始化对象、设置 option

准备中国的矢量地图 JSON 文件，放到 json/map 目录下

china.json

使用 Ajax 或其他方式，获取 china.json

$get('json/map/china.json',function(chinaJson){})

1

$get('json/map/china.json',function(chinaJson){})

在回调函数中，往 echarts 全局对象注册地图的 JSON 数据

echarts.registerMap('chinaMap',chinaJson)

1

echarts.registerMap('chinaMap',chinaJson)

在 geo 下，设置：

type:'map'

map:'chinaMap' // 值，为注册的 key

常用配置：

缩放拖动：roam

名称显示：label

初始化缩放比例：zoom

地图中心点：center

常见效果：

显示某个区域，如省份

加载该区域的矢量地图数据

通过 registerMap 注册到 echarts 全局对象中

指明 geo 配置下的 type 和 map 属性

通过 zoom 放大该区域

通过 center 定位中心点

visualMap 和地图的结合：不同城市，显示不同颜色（比如，根据空气质量）

显示基本的中国 / 区域地图

城市的空气质量数据设置给 series

将 series 下的数据和 geo 关联起来

geoIndex: 0

type:'map'

结合 visualMap，配合使用

min

max

inRange 控制颜色渐变的范围

calculable 出现滑块

地图和散点图结合

给 series 下，增加新的对象

准备好散点数据，设置给新对象的 data

配置新对象的 type:effectScatter

让散点图使用地图坐标系统

coordinateSystem:'geo'

让涟漪的效果更加明显

rippleEffect:{ scale:10 }

（6）雷达图

雷达图，可以用来分析多个维度的数据与标准数据的对比情况

实现步骤：

基本的代码结构：引入 js 文件、DOM 容器、初始化对象、设置 option

定义各个维度的最大值

indicator:[ { name:'易用性', max:100 }, ... ]

准备具体的产品数据

data:[ { name:'华为手机1', value:[ 80,90,80,82,90 ] }, ... ]

图标类型：在 series 下，设置 type:radar

常用配置：

显示数值：label

区域面积：areaStyle

绘制类型：shape

（7）仪表盘图

仪表盘，主要用在进度把控以及数据范围的监测，它可以更直观的表现出某个指标的进度或实际情况

实现步骤：

基本的代码结构：引入 js 文件、DOM 容器、初始化对象、设置 option

准备数据，设置给 series 下的 data

data:[ { value:97 } ] // 每个对象，就代表一个指针

图表类型：在 series 下，设置 type:gauge

常见效果

数值范围：min、max

多个指针：增加 data 中的数组元素

多个指针颜色差异：itemStyle

Echarts 高级

A. 显示相关

# 主题

内置主题

Echarts 中，默认内置了两套主题：light dark

在初始化对象方法 init 中，可以指明

var mycharts = echarts.init(dom,'light')

var mycharts = echarts.init(dom,'dark')

自定义主题

在主题编辑器中，编辑主题

下载主题，是一个 JS 文件

引入主题 JS 文件

在 init 方法中，使用主题

# 调色盘

调色盘，是一组颜色，图形、系列会自动从其中选择颜色。 // 调色盘的作用，遵循就近原则

主题调色盘

全局调色盘

option:{ color:['red','green','blue'] }

1
2
3

option:{
  color:['red','green','blue']
}

局部调色盘

series:[{ type:'bar', color:['red','green','blue'] }]

1
2
3
4

series:[{
  type:'bar',
  color:['red','green','blue']
}]

颜色渐变

线性渐变

径向渐变

// 线性渐变 itemStyle:{ color:{ type:'linear', x:0, y:0, x2:0, y2:1, colorStops:[ {offset:0,color:'red'}, // 0% 处的颜色 {offset:1,color:'blue'} // 100% 处的颜色 ], globalCoord:flse // 缺省为false } } // 径向渐变 ... type:'radial'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 线性渐变
itemStyle:{
    color:{
        type:'linear',
        x:0,
        y:0,
        x2:0,
        y2:1,
        colorStops:[
            {offset:0,color:'red'},  // 0% 处的颜色
            {offset:1,color:'blue'}  // 100% 处的颜色
        ],
        globalCoord:flse  // 缺省为false
    }
}

// 径向渐变
   ... type:'radial'

# 样式 // 优先级高，会覆盖主题、调色盘中的效果

直接样式

itemStyle、textStyle、lineStyle、areaStyle、label

高亮样式

在 emphasis 中，包裹 itemStyle、textStyle、lineStyle、areaStyle、label

# 自适应

当浏览器的大小，发生变化的时候，如果想让图表，也能随之适配变化

1. 监听窗口大小变化事件 2. 在事件处理函数中，调用 Echarts 实例对象的 resize 即可 window.onresize = function(){ myCharts.resize(); }

1
2
3
4
5

1. 监听窗口大小变化事件
2. 在事件处理函数中，调用 Echarts 实例对象的 resize 即可
   window.onresize = function(){
      myCharts.resize();
   }

B. 动画的使用

# 加载动画

Echarts 已经内置好了加载数据的动画，我们只需要在合适的时机显示或隐藏即可

显示加载动画：myCharts.showLoad()

隐藏加载动画：myCharts.hideLoad()

# 增量动画

增量动画的实现方式：myCharts.setOption

所有的数据更新，都是通过 setOption 实现，可以设置多次

不用考虑数据到底产生了哪些变化

Echarts 会找到两组数据之间的差异，然后，通过合适的动画去表现数据的变化

新的 option 和旧的 option，二者并不是相互覆盖的关系，而是相互整合的关系

我们在设置新 option 的时候，只需要考虑到变化的部分就可以了

# 动画的配置

开启动画

animation:true

动画时长

animationDuration:5000

缓动动画

animationEasing:'bounceOut'

动画阈值：单种形式的元素数量大于这个阈值时，就会关闭动画

animationThreshold:8

C. 交互 API

# 全局 echarts 对象

全局 echarts 对象，是引入 echarts.js 文件之后，就可以直接使用的

init 方法

初始化 Echarts 实例对象

使用主题

registerTheme 方法

注册主题

只有注册过，才能在 init 方法中使用该主题

registerMap

// 注册地图数据 $.get('json/map/china.json',function(chinaJson){ echarts.registerMap('china',chinaJson) }) // geo 组件使用地图数据 var option = { geo:{ type:'map', map:'china' } }

1
2
3
4
5
6
7
8
9
10
11
12

// 注册地图数据
$.get('json/map/china.json',function(chinaJson){
    echarts.registerMap('china',chinaJson)
})

// geo 组件使用地图数据
var option = {
  geo:{
    type:'map',
    map:'china'
  }
}

connect 方法

一个页面中，可以有多个独立的图表

每一个图表，对应一个 Echarts 实例对象

connect 可以实现多图联动，传入联动目标为 Echarts 实例对象，支持数组

保存图片的自动拼接

刷新按钮

重置按钮

提示框联动、图例选择、数据范围修改等 ...

# echartsInstance 实例对象

echartsInstance 实例对象，是通过 echarts.init 方法调用之后得到的

setOption

设置或修改图表实例的配置项以及数据

多次调用 setOption 方法

合并新的配置和旧的配置

增量动画

resize

重新计算和绘制图表

一般和 window 对象的 resize 事件结合使用

window.onresize = function(){ myCharts.resize() }

on \ off：绑定或者解绑事件处理函数

鼠标事件

常见事件：click、dbclick、mousedown、mousemove、mouseup 等

事件参数 args：和事件相关的数据信息

Echarts 事件

常见事件：legendselectchanged、datazoom 等，具体见文档

事件参数 args：和事件相关的数据信息

dispatchAction：触发某些行为

// 使用代码模拟用户的行为 myCharts.dispatchAction({ type:'heightlight', // 事件类型 seriesIndex:0, // 图表索引 dataIndex:1, // 图表中哪一项高亮 })

1
2
3
4
5
6

// 使用代码模拟用户的行为
myCharts.dispatchAction({
  type:'heightlight',  // 事件类型
  seriesIndex:0,  // 图表索引
  dataIndex:1,  // 图表中哪一项高亮
})

clear：清空当前实例，会移除实例中所有的组件和图表

清空之后，可以再次 setOption

dispose：销毁实例

销毁后，实例无法再被使用