ECharts实操手册_echarts中文手册

内容摘要

ECharts 的基本使用
ECharts常用图表
直角坐标系常见配置
ECharts配置项小结
ECharts高级

1. ECharts基本使用

1.1 ECharts介绍

ECharts 能够做出各种各样漂亮的图表，它能满足绝大多数可视化图表的实现.它的兼容性强, 使用方便, 功能强大, 是实现数据可视化的最佳选择之一, 更多特点和介绍可以查阅官网地址：ECharts官网

1.2 ECharts的快速上手

ECharts 的入门使用特别简单, 5分钟就能够上手.。

• 步骤1：引入 echarts.js 文件（echarts是一个 js 的库，当然得先引入这个库文件）

<script src="js/echarts.min.js"></script>
1

• 步骤2：准备一个呈现图表的盒子（盒子必须具备宽高）

<div id="box" style="width: 600px;height:400px;"></div>
1

• 步骤3：初始化 echarts 实例对象（在这个步骤中, 需要指明图表最终显示在哪里的DOM元素）

var myChart = echarts.init(document.getElementById('box'))
1

• 步骤4：准备配置项（这步很关键，我们最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的）

var option = {
 xAxis: {
 type: 'category', 
 data: ['小明', '小红', '小王'] 
 },
 yAxis: { 
 type: 'value' 
 },
 series: [ { 
 name: '语文', 
 type: 'bar', 
 data: [70, 92, 87], 
 } ] }
1
2
3
4
5
6
7
8
9
10
11
12
13

• 步骤5：将配置项设置给 echarts 实例对象

myChart.setOption(option)
1

呈现

总结：通过简单的5个步骤, 就能够把一个简单的柱状图给显示在网页中了.这几个步骤中, 步骤4最重要,一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,其他的代码 都是固定不变的.

1.3 相关配置项

• xAxis
  直角坐标系 中的x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现。

• yAxis
  直角坐标系 中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去series 下找数据进行图表的绘制。

• series
  系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

总结：配置项都是以键值对的形式存在, 并且配置项有很多, ECharts 的学习大多是针对于这些配置项的, 对于
配置项的使用及学习，可多参考官方配置项文档：ECharts配置项

2. ECharts常用图表

2.1 柱状图

柱状图特点：柱状图描述的是分类数据，呈现的是每一个分类中有多少？, 图表所表达出来的含义在于不同类别数据的排名\对比情况
实现步骤

• 步骤1 ECharts 最基本的代码结构
• 步骤2 准备x轴的数据

var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
1

• 步骤3 准备y 轴的数据

var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
1

• 步骤4 准备 option , 将 series 中的 type 的值设置为: bar

var option = { 
xAxis: { type: 'category', data: xDataArr },
yAxis: { type: 'value' },
series: [ { type: 'bar', data: yDataArr } ] }
1
2
3
4

注意：坐标轴 xAxis 或者 yAxis中的配置, type 的值主要有两种:category 和 value, 如果 type属性的值为category ,那么需要配置 data数据, 代表在x 轴的呈现. 如果 type 属性配置为 value,那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制

2.1.1 柱状图的常见效果

1. 标记

最大值\最小值 markPoint（哪组数据需要标记就在哪组数据下写，无需在创造对象）

series: [
 { ......
  markPoint: { 
  data: [ { type: 'max', name: '最大值' },{ type: 'min', name: '最小值' } ] 
  } } ]
1
2
3
4
5

平均值 markLine

series: [ 
{ ...... 
markLine: { data: [ { type: 'average', name: '平均值' } ] 
} } ]
1
2
3
4

2. 显示

数值显示 label

series: [
{ 
...... 
label: { 
show: true, // 是否可见 
rotate: 60 // 旋转角度 
} 
} ]
1
2
3
4
5
6
7
8

柱宽度 barWidth

series: [ 
{
 ...... 
 barWidth: '30%' // 柱的宽度 
} 
]
1
2
3
4
5
6

横向柱状图（所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下即可. 即 xAxis 的 type 设置为value , yAxis 的 type 设置为 category , 并且设置 data 即可）

var option = {
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: xDataArr
            },
            series: [{
                type: 'bar',
                data: yDataArr
            }]
        }
1
2
3
4
5
6
7
8
9
10
11
12
13

2.1.2 通用配置

使用 ECharts 绘制出来的图表, 都天生就自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过配置, 对这些功能进行设置.

1. 标题: title

var option = {
            title: {
                text: "成绩", // 标题文字 
                textStyle: {
                    color: 'red' // 文字颜色 
                },
                borderWidth: 5, // 标题边框 
                borderColor: 'green', // 标题边框颜色 
                borderRadius: 5, // 标题边框圆角 
                left: 20, // 标题的位置 
                top: 20 // 标题的位置 
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13

2. 提示框: tooltip （tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框）

触发类型: trigger

可选值有item\axis
1

触发时机: triggerOn

可选值有 mouseOver\click
1

格式化显示: formatter（分为字符串模板、回调函数 官方文档：formatter）

var option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'click',
                    formatter: '{b}:{c}'
                }
            }
        // 这个{b} 和 {c} 所代表的含义不需要去记, 在官方文档中有详细的描述
1
2
3
4
5
6
7
8

var option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'click',
                formatter: function(arg) {
                    return arg.name + ':' + arg.data
                }
            }
        }
1
2
3
4
5
6
7
8
9

3. 工具按钮: toolbox

toolbox 是 ECharts 提供的工具栏, 内置有 导出图片，数据视图, 重置, 数据区域缩放, 动态类型切换五个工具
注意：工具栏的按钮是配置在 feature 的节点之下

var option = {
            toolbox: {
                feature: {
                    saveAsImage: {}, // 将图表保存为图片 
                    dataView: {}, // 是否显示出原始数据 
                    restore: {}, // 还原图表 
                    dataZoom: {}, // 数据缩放 
                    magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持 
                        type: ['bar', 'line']
                    }
                }
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13

4. 图例: legend （legend 是图例,用于筛选类别,需要和 series 配合使用）

注意：legend 中的 data 是一个数组；legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致。

 var option = {
            legend: {
                data: ['语文', '数学']
            },
            xAxis: {
                type: 'category',
                data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '语文',
                type: 'bar',
                data: [88, 92, 63, 77, 94, 80, 72, 86]
            }, {
                name: '数学',
                type: 'bar',
                data: [93, 60, 61, 82, 95, 70, 71, 86]
            }]
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2.2 折线图

折线图特点：折线图更多的使用来呈现数据随时间的『变化趋势』
实现步骤

• 步骤1 ECharts 最基本的代码结构
• 步骤2 准备x轴的数据

var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
1

• 步骤3 准备y 轴的数据

var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
1

• 步骤4 准备 option , 将 series 中的 type 的值设置为: line

var option = {
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'line',
                data: yDataArr
            }]
        }
1
2
3
4
5
6
7
8
9
10
11
12
13

呈现

2.2.1 折线图的常见效果

1. 标记

最大值\最小值 markPoint

 var option = {
            series: [{
                ......markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                }
            }]
        }
1
2
3
4
5
6
7
8
9
10
11
12
13

平均值 markLine

var option = {
            series: [{
                ......markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            }]
        }
1
2
3
4
5
6
7
8
9
10

标注区间 markArea

var option = {
            series: [{
                ......markArea: {
                    data: [
                        [{
                            xAxis: '1月'
                        }, {
                            xAxis: '2月'
                        }],
                        [{
                            xAxis: '7月'
                        }, {
                            xAxis: '8月'
                        }]
                    ]
                }
            }]
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2. 线条控制

平滑线条 smooth

 var option = {
            series: [{
                ......
                smooth: true
            }]
        }
1
2
3
4
5
6

线条样式 lineStyle

var option = {
            series: [{
                ......,
                smooth: true,
                lineStyle: {
                    color: 'green',
                    type: 'dashed' // 可选值还有 dotted solid 
                }
            }]
        }
1
2
3
4
5
6
7
8
9
10

3. 填充风格 areaStyle

var option = {
            series: [{
                type: 'line',
                data: yDataArr,
                areaStyle: {
                    color: 'pink'
                }
            }]
        }
1
2
3
4
5
6
7
8
9

4. 紧挨边缘 boundaryGap（boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始）

 var option = {
            xAxis: {
                type: 'category',
                data: xDataArr,
                boundaryGap: false
            }
        }
1
2
3
4
5
6
7

5. 缩放, 脱离0值比例（如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况，绘制出一根直线，所以我们要进行scale配置）

var option = {
            yAxis: {
                type: 'value',
                scale: true
            }
        }
1
2
3
4
5
6

6. 堆叠图（堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加）

var option = {
            series: [{
                type: 'line',
                data: yDataArr1,
                stack: 'all' // series中的每一个对象配置相同的stack值, 这个all可以任 意写 
            }, {
                type: 'line',
                data: yDataArr2,
                stack: 'all' // series中的每一个对象配置相同的stack值, 这个all可以任意 写 
            }]
        }
1
2
3
4
5
6
7
8
9
10
11

注意：第二条线在第一条线的基础之上进行绘制. 基于前一个图表进行堆叠

2.3 散点图

散点图的特点：散点图可以帮助我们推断出不同维度数据之间的相关性, 比如,看得出身高和体重是否正相关。也经常用在地图的标注上
实现步骤

• 步骤1 ECharts 最基本的代码结构
• 步骤2 准备 x 轴和 y 轴 的数据

axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个代表身高, 一个代表体重
1

• 步骤3 准备配置项（xAxis 和 yAxis 的 type 都要设置为 value ；在 series 下设置 type:scatter）

 var option = {
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'scatter',
                data: axisData
            }]
        }
1
2
3
4
5
6
7
8
9
10
11
12

• 步骤4 调整配置项, 脱离0值比例

 var option = {
            xAxis: {
                type: 'value',
                scale: true
            },
            yAxis: {
                type: 'value',
                scale: true
            },
            series: [{
                type: 'scatter',
                data: axisData,
            }]
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

呈现

2.3.1 散点图的常见效果

1. 气泡图效果（要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同）

symbolSize 控制散点的大小
itemStyle.color 控制散点的颜色
这两个配置项都支持固定值的写法, 也支持回调函数的写法

固定值写法：

var option = {
            series: [{
                type: 'scatter',
                data: axisData,
                symbolSize: 25,
                itemStyle: {
                    color: 'green',
                }
            }]
        }
1
2
3
4
5
6
7
8
9
10

回调函数写法：

var option = {
            series: [{
                type: 'scatter',
                data: axisData,
                symbolSize: function(arg) {
                    var weight = arg[1]
                    var height = arg[0] / 100 // BMI > 28 则代表肥胖, 肥胖的人用大的散点标识, 正常的人用小散点标识 // BMI: 体重/ 身高*身高 kg m 
                    var bmi = weight / (height * height)
                    if (bmi > 28) {
                        return 20
                    }
                    return 5
                },
                itemStyle: {
                    color: function(arg) {
                        var weight = arg.data[1]
                        var height = arg.data[0] / 100
                        var bmi = weight / (height * height)
                        if (bmi > 28) {
                            return 'red'
                        }
                        return 'green'
                    }
                }
            }]
        }
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

2. 涟漪动画效果

type:effectScatter（将 type 的值从 scatter 设置为 effectScatter 就能够产生涟漪动画的效果）
rippleEffect（rippleEffect 可以配置涟漪动画的大小）

var option = {
            series: [{
                type: 'effectScatter',
                rippleEffect: {
                    scale: 3
                }
            }]
        }
1
2
3
4
5
6
7
8

showEffectOn
showEffectOn 可以控制涟漪动画在什么时候产生, 它的可选值有两个: render 和 emphasis
render代表界面渲染完成就开始涟漪动画
emphasis 代表鼠标移过某个散点的时候, 该散点开始涟漪动画

var option = {
            series: [{
                type: 'effectScatter',
                showEffectOn: 'emphasis',
                rippleEffect: {
                    scale: 3
                }
            }]
        }
1
2
3
4
5
6
7
8
9

3. :结合地图（散点图也经常结合地图来进行地图区域的标注）

2.4 直角坐标系常见配置

直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图。针对于直角坐标系的图表, 有一些通用的配置

1. 网格 grid（grid是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的）

显示 grid show: true
grid 的边框 borderWidth : 10
grid 的位置和大小 left top right bottom width height

var option = {
            grid: {
                show: true, // 显示grid 
                borderWidth: 10, // grid的边框宽度 
                borderColor: 'red', // grid的边框颜色 
                left: 100, // grid的位置 
                top: 100,
                width: 300, // grid的大小 
                height: 150
            }
        }
1
2
3
4
5
6
7
8
9
10
11

2. 坐标轴 axis（坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴）

坐标轴类型type
value : 数值轴, 自动会从目标数据中读取数据
category: 类目轴, 该类型必须通过 data 设置类目数据

坐标轴位置
xAxis: 可取值为 top 或者 bottom
yAxis: 可取值为 left 或者 right

var option = {
            xAxis: {
                type: 'category',
                data: xDataArr,
                position: 'top'
            },
            yAxis: {
                type: 'value',
                position: 'right'
            }
        }
1
2
3
4
5
6
7
8
9
10
11

3. 区域缩放 dataZoom

dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着
可以配置多个区域缩放器

区域缩放类型 type
slider: 滑块
inside: 内置, 依靠鼠标滚轮或者双指缩放

产生作用的轴
xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可
yAxisIndex:设置缩放组件控制的是哪个 y 轴, 一般写0即可

指明初始状态的缩放情况
start : 数据窗口范围的起始百分比
end : 数据窗口范围的结束百分比

 var option = {
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0
            }, {
                type: 'slider',
                yAxisIndex: 0,
                start: 0,
                end: 80
            }]
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意：针对于非直角坐标系图表, 比如饼图 地图 等, 以上三个配置可能就不会生效了

2.5 饼图

饼图的特点：饼图可以很好地帮助用户快速了解不同分类的数据的占比情况
实现步骤

• 步骤1 ECharts 最基本的代码结构
• 步骤2 准备数据

 var pieData = [{
            value: 11231,
            name: "淘宝",
        }, {
            value: 22673,
            name: "京东"
        }, {
            value: 6123,
            name: "唯品会"
        }, {
            value: 8989,
            name: "1号店"
        }, {
            value: 6700,
            name: "聚美优品"
        }]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 步骤3 准备配置项 在series 下设置 type:pie

 var option = {
            series: [{
                type: 'pie',
                data: pieData
            }]
        }
1
2
3
4
5
6

呈现

注意：饼图的数据是由 name 和 value 组成的对象所形成的数组。饼图无须配置 xAxis 和 yAxis

2.5.1 饼图的常见效果

1. 显示数值

label.show : 显示文字
label.formatter : 格式化文字

var option = {
            series: [{
                type: 'pie',
                data: pieData,
                label: {
                    show: true,
                    formatter: function(arg) {
                        return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
                    }
                }
            }]
        }
1
2
3
4
5
6
7
8
9
10
11
12

2. 南丁格尔图（南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大）

roseType:‘radius’

3. 选中效果

selectedMode: ‘multiple’
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选 ‘single’ ， ‘multiple’ ，分别表示单选还是多选
selectedOffset: 30
选中扇区的偏移距离

var option = {
            series: [{
                type: 'pie',
                data: pieData,
                selectedMode: 'multiple',
                selectedOffset: 30
            }]
        }
1
2
3
4
5
6
7
8

4. 圆环

radius
饼图的半径。可以为如下类型：
number：直接指定外半径值。
string：例如， ‘20%’ ，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
Array. ：数组的第一项是内半径，第二项是外半径, 通过 Array , 可以将饼图设置为圆环图

var option = {
            series: [{
                type: 'pie',
                data: pieData,
                radius: ['50%', '70%']
            }]
        }
1
2
3
4
5
6
7

呈现

2.6 地图

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

2.6.1 地图图表的使用方式

百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请
矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据（地图数据可以是json数据，也可以是js数据）

2.6.2 矢量地图的实现步骤

• 步骤1 ECharts 最基本的代码结构
• 步骤2 准备中国的矢量 json 文件, 放到 json/map/ 目录之下（假设）
• 步骤3 使用 Ajax 获取 china.json

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

• 步骤4 在Ajax的回调函数中, 往 echarts 全局对象注册地图的 json 数据

$.get('json/map/china.json', function (chinaJson) { echarts.registerMap('chinaMap', chinaJson) })
1

• 步骤5 获取完数据之后, 需要配置 geo 节点, 再次的 setOption

var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/china.json', function(chinaJson) {
            echarts.registerMap('chinaMap', chinaJson) var option = {
                geo: {
                    type: 'map', // map是一个固定的值 
                    map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致 
                }
            };
            mCharts.setOption(option)
        })
1
2
3
4
5
6
7
8
9

注意：由于在代码中使用了 Ajax , 所以, 关于此文件的打开, 不能以 file 的协议打开, 应该将其置于 HTTP 的服务之下方可正常展示地图

2.6.3 地图的常见配置

1. 缩放拖动: roam

var option = {
            geo: {
                type: 'map', // map是一个固定的值 
                map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致, 
                roam: true, // 运行使用鼠标进行拖动和缩放 
            }
        }
1
2
3
4
5
6
7

2. 名称显示: label（显示各个地名）

var option = {
            geo: {
                type: 'map', // map是一个固定的值 
                map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致, 
                roam: true,
                label: {
                    show: true
                }
            }
        }
1
2
3
4
5
6
7
8
9
10

3. 初始缩放比例: zoom 、地图中心点: center

 var option = {
            geo: {
                type: 'map', // map是一个固定的值 
                map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致, 
                roam: true,
                label: {
                    show: true
                },
                zoom: 0.8, // 地图的缩放比例, 大于1代表放大, 小于1代表缩小 
                center: [87.617733, 43.792818] // 当前视角的中心点，用经纬度表示 
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12

2.6.4 地图的常见效果

1. 显示某个区域

当点击某个省份时显示该省份的矢量地图，注册地图跟上述步骤一致，只是给ECharts实例添加点击事件

2. 不同城市颜色不同

    - 显示基本的中国地图
    - 准备好城市数据, 并且将数据设置给 series
    - 将 series 下的数据和 geo 关联起来
    - 结合 visualMap 配合使用
   1
   2
   3
   4

visualMap 是视觉映射组件, 和之前区域缩放 dataZoom 很类似, 可以做数据的过滤. 只不过dataZoom 主要使用在直角坐标系的图表, 而 visualMap 主要使用在地图或者饼图中

 var option = {
            geo: {
                type: 'map',
                map: 'chinaMap',
                roam: true,
                label: {
                    show: true
                }
            },
            series: [{
                data: airData,
                geoIndex: 0,
                type: 'map'
            }],
            visualMap: {
                min: 0, // 最小值 
                max: 300, // 最大值 
                inRange: {
                    color: ['white', 'red'] // 颜色的范围 
                },
                calculable: true // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围） 
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3. 地图和散点图结合

    - 给 series 这个数组下增加新的对象
    - 准备好散点数据,设置给新对象的 data
    - 配置新对象的 type type:effectScatter、让散点图使用地图坐标系统 coordinateSystem: 'geo'、
    - 让涟漪的效果更加明显 rippleEffect: { scale: 10 }
   1
   2
   3
   4

 var option = {
            series: [{
                data: airData,
                geoIndex: 0,
                type: 'map'
            }, {
                data: scatterData,
                type: 'effectScatter',
                coordinateSystem: 'geo',
                rippleEffect: {
                    scale: 10
                }
            }]
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.7 雷达图

雷达图的特点：雷达图可以用来分析多个维度的数据与标准数据的对比情况
实现步骤

• 步骤1 ECharts 最基本的代码结构
• 步骤2 定义各个维度的最大值

var dataMax = [{
            name: '易用性',
            max: 100
        }, {
            name: '功能',
            max: 100
        }, {
            name: '拍照',
            max: 100
        }, {
            name: '跑分',
            max: 100
        }, {
            name: '续航',
            max: 100
        }]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 步骤3 准备具体产品的数据

var hwScore = [80, 90, 80, 82, 90] 
var zxScore = [70, 82, 75, 70, 78]
1
2

• 步骤4 在 series 下设置 type:radar

var option = {
            radar: {
                indicator: dataMax
            },
            series: [{
                type: 'radar',
                data: [{
                    name: '华为手机1',
                    value: hwScore
                }, {
                    name: '中兴手机1',
                    value: zxScore
                }]
            }]
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.7.1 雷达图的常见效果

1. 显示数值 label（show:true）
2. 区域面积 areaStyle （areaStyle: {}）
3. 绘制类型 shape （雷达图绘制类型，支持 ‘polygon’ 和 ‘circle’ ‘polygon’ : 多边形、‘circle’ 圆形。配置在radar）

2.8 仪表盘图

仪表盘的特点：仪表盘可以更直观的表现出某个指标的进度或实际情况
实现步骤

• 步骤1 ECharts 最基本的代码结构
• 步骤2: 准备数据, 设置给 series 下的 data data:[97]
• 步骤3: 在 series 下设置 type:gauge

 var option = {
            series: [{
                type: 'gauge',
                data: [{
                    value: 97,
                }]
            }]
        }
1
2
3
4
5
6
7
8

2.8.1 仪表盘的常见效果

1. 数值范围: max min
2. 多个指针: 增加data中数组的元素
3. 多个指针颜色的差异: itemStyle

 var option = {
            series: [{
                type: 'gauge',
                data: [{
                    value: 97,
                    itemStyle: {
                        color: 'pink'
                    }
                }, {
                    value: 85,
                    itemStyle: {
                        color: 'green'
                    }
                }],
                min: 50
            }]
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3. ECharts配置项小结

3.1 柱状图 bar

3.2 折线图 line

3.3 散点图 scatter

3.4 饼图 pie

3.5 地图 map

3.6 雷达图 radar

3.7 仪表盘 gauge

3.8 直角坐标系配置

1. grid

2. axis

3. dataZoom

3.9 通用配置

1. title

2. tooltip

3. toolbox.feature

4. legend

4. ECharts高级

4.1 显示相关

4.1.1 主题

1. 默认主题

ECharts 中默认内置了两套主题: light、dark在初始化对象方法 init 中可以指明

var chart = echarts.init(dom, 'light') 
var chart = echarts.init(dom, 'dark')
1
2

2. 自定义主题

    - 在主题编辑器中编辑主题（可以自定义很多内容）：[去编辑](https://echarts.apache.org/zh/theme-builder.html)
    - 下载主题, 是一个 js 文件
    - 引入主题 js 文件
    - 在 init 方法中使用主题
   1
   2
   3
   4

4.1.2 调色盘

它是一组颜色，图形、系列会自动从其中选择颜色, 不断的循环从头取到尾, 再从头取到尾, 如此往复.

1. 主题调色盘

  echarts.registerTheme('itcast', {
            "color": ["#893448", "#d95850", "#eb8146", "#ffb248", "#f2d643", "#ebdba4"],
            "backgroundColor": "rgba(242,234,191,0.15)",
            ......
        })
1
2
3
4
5

2. 全局调色盘（全局调色盘是在 option 下增加一个 color 的数组）

   var option = { 
            color: ['red', 'green', 'blue'],// 全局调色盘 
            ......
        }
        mCharts.setOption(option)
1
2
3
4
5

3. 局部调色盘（局部调色盘就是在 series 下增加一个 color 的数组）

var option = { // 全局调色盘 
            color: ['red', 'green', 'blue'],
            series: [{
                type: 'pie',
                data: pieData, // 局部调色盘 
                color: ['pink', 'yellow', 'black']
            }]
        }
        mCharts.setOption(option)
1
2
3
4
5
6
7
8
9

注意：如果全局的调色盘和局部的调色盘都设置了, 局部调色盘会产生效果, 这里面遵循的是就近原则

4. 渐变颜色的实现（在 ECharts 中, 支持线性渐变和径向渐变两种颜色渐变的方式）

线性渐变
线性渐变的类型为 linear , 他需要配置线性的方向, 通过 x, y, x2, y2 即可进行配置。
x , y , x2 , y2 ,范围从 0 - 1，相当于在图形包围盒中的百分比，如果 global 为 true ，则该四个值是绝对的像素位置 在下述代码中的0 0 0 1意味着从上往下进行渐变

 series: [{
            type: 'bar',
            data: yDataArr,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'red' // 0% 处的颜色 
                    }, {
                        offset: 1,
                        color: 'blue' // 100% 处的颜色 
                    }],
                    globalCoord: false // 缺省为 false 
                }
            }
        }]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

径向渐变
径向渐变的类型为 radial , 他需要配置径向的方向, 通过x , y , r 即可进行配置前三个参数分别是圆心 x , y 和半径，取值同线性渐变
在下述代码中的 0.5 0.5 0.5 意味着从柱的重点点, 向外径向扩散半径为宽度一半的圆

series: [{
            itemStyle: {
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                        offset: 0,
                        color: 'red' // 0% 处的颜色 
                    }, {
                        offset: 1,
                        color: 'blue' // 100% 处的颜色 
                    }],
                    global: false // 缺省为 false 
                }
            }
        }]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4.1.3 样式

1. 直接样式

itemStyle textStyle lineStyle areaStyle label

data: [{
            value: 11231,
            name: "淘宝",
            itemStyle: {
                color: 'black'
            }
        }] title: {
            text: '我是标题',
            textStyle: {
                color: 'red'
            }
        }
        label: {
            color: 'green'
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意：这些样式一般都可以设置颜色或者背景或者字体等样式, 他们会覆盖主题中的样式

2. 高亮样式

图表中, 其实有很多元素都是有两种状态的, 一种是默认状态, 另外一种就是鼠标滑过或者点击形成的高亮状态. 而高亮样式是针对于元素的高亮状态设定的样式（,在 emphasis 中包裹原先的 itemStyle）

 series: [{
            type: 'pie',
            label: {
                color: 'green'
            },
            emphasis: {
                label: {
                    color: 'red'
                },
            },
            data: [{
                value: 11231,
                name: "淘宝",
                itemStyle: {
                    color: 'black'
                },
                emphasis: {
                    itemStyle: {
                        color: 'blue'
                    },
                }
            }]
        }]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

4.1.4 自适应

实现步骤

• 步骤1: 监听窗口大小变化事件
• 步骤2: 在事件处理函数中调用 ECharts 实例对象的 resize 即可

4.2 动画的使用

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

4.2.1 加载动画

1. 显示加载动画

mCharts.showLoading() 一般, 我们会在获取图表数据之前 显示加载动画
1

2. 隐藏加载动画

mCharts.hideLoading() 一般, 我们会在获取图表数据之后 隐藏加载动画, 显示图表
1

4.2.2 增量动画

所有数据的更新都通过 setOption 实现, 我们不用考虑数据到底产生了那些变化, ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

4.2.3 动画的配置

1. 开启动画

animation: true
1

2. 动画时长

animationDuration: 5000
1

3. 缓动动画（众多参数看官网https://echarts.apache.org/examples/zh/editor.html?c=line-easing）
   
4. 动画阈值

animationThreshold: 8
1

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

4.3 交互API

4.3.1 全局echarts 对象

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

1. echarts.init（初始化ECharts实例对象 使用主题）
2. echarts.registerTheme（注册主题 只有注册过的主题,才能在init方法中使用该主题）
3. echarts.registerMap（注册地图数据）
4. echarts.connect
   - 一个页面中可以有多个独立的图表
   - 每一个图表对应一个 ECharts 实例对象
   - connect 可以实现多图关联，传入联动目标为 EChart 实例，支持数组

4.3.2 echarts实例（echartsInstance）对象

eChartsInstance 对象是通过 echarts.init 方法调用之后得到的

1. echartsInstance.setOption

设置或修改图表实例的配置项以及数据 多次调用setOption方法 合并新的配置和旧的配置 增量动画
1

2. echartsInstance.resize

重新计算和绘制图表
 一般和window对象的resize事件结合使用 window.onresize = function(){ myChart.resize(); }
1
2

3. echartsInstance.on 、echartsInstance.off

绑定或者解绑事件处理函数（on多用于初始化图标实例后）
1

4. echartsInstance.dispatchAction（主动触发某些行为, 使用代码模拟用户的行为）

// 触发高亮的行为 
        mCharts.dispatchAction({
                type: "highlight",
                seriesIndex: 0,
                dataIndex: 1
            })
        // 触发显示提示框的行为 
        mCharts.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: 3
        })
1
2
3
4
5
6
7
8
9
10
11
12

5. echartsInstance.clear

清空当前实例，会移除实例中所有的组件和图表
清空之后可以再次 setOption
1
2

6. echartsInstance.dispose

销毁实例
销毁后实例无法再被使用
1
2

OVER（报告大哥：您已成功拿下ECharts）