ECharts数据可视化
一、数据可视化
1.1 什么是数据可视化
数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。
它是一个处于不断演变之中的概念，其边界在不断地扩大。主要指的是技术上较为高级的技术方法，而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。与立体建模之类的特殊技术方法相比，数据可视化所涵盖的技术方法要广泛得多。
数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。然而，设计人员往往并不能很好地把握设计与功能之间的平衡，从而创造出华而不实的数据可视化形式，无法达到其主要目的，也就是传达与沟通信息。
数据可视化与信息图形、信息可视化、科学可视化以及统计图形密切相关。当前，在研究、教学和开发领域，数据可视化乃是一个极为活跃而又关键的方面。“数据可视化”这条术语实现了成熟的科学可视化领域与较年轻的信息可视化领域的统一。
优点：
- 把数据以更直观的形式展现 --> 图表
- 清晰有效地传达与沟通信息 -->条形图、饼图、柱状图等
- 隐藏在数据中的信息 -->K线图：可以直观的看出上升以及下降的趋势
1.2 可视化的实现方式
- 报表类（非技术人员）
- Excel
- 水晶报表
- 商业智能BI
- Microsoft BI
- Power-BI
- 编码类（具有编程技术的工程师才能完成）
- ECharts.js（以前是百度的，现在是apache的）
- D3.js（国外的）
1.3 小结
-
数据可视化的概念和作用
- 将数据以图表的形式呈现
- 更有效的传达数据中的信息
-
常见的可视化工具
- 报表类
- BI类
- 编码类
二、ECharts的基本使用
2.1 ECharts的介绍
官网：https://echarts.apache.org/zh
ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观、交互丰富、可高度个性化定制的数据库可视化图表。
特点：
- 开源免费：遵循Apache-2.0 开源协议，免费商用
- 功能丰富：涵盖各行业图表，满足各种需求
- 社区活跃，用户群体多：github https://github.com/apache/echarts
ECharts的特点：
- 丰富的可视化类型（https://echarts.apache.org/examples/zh/index.html）
- 折线图、柱状图、饼图、K线图…
- 只有你想不到，没有它做不到
- 多种数据格式支持
- key-value数据格式
- 二维表
- TypedArray格式
- 流数据的支持
- 流数据的动态渲染
- 增量渲染技术
- 移动端优化
- 跨平台使用
- 绚丽的特效
- 三维可视化
…
- 特性介绍地址：https://echarts.apache.org/zh/feature.html
小结
- ECharts能满足绝大多数可视化图表实现
- 兼容性强
- 使用方便
- 功能强大
- 实现数据可视化的最佳选择之一
2.2 ECharts的快速入门
ECharts使用：
-
引入echarts.js文件：echarts.min.js、jquery.min.js（自行下载）
<!--1. 引入echarts.js文件--> <script src="lib/echarts.min.js"></script> -
准备一个呈现图表的盒子，div：决定图表呈现在哪个位置
-
初始化一个echarts的实例对象
-
准备配置项（关键：麻烦）
-
将配置项设置给echarts实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.Echarts的快速上手</title>
<!--1. 引入echarts.js文件-->
<script src="lib/echarts.min.js"></script>
<!--
ECharts使用：
1. 引入echarts.js文件
2. 准备一个呈现图表的盒子，div：决定图表呈现在哪个位置
3. 初始化一个echarts的实例对象
4. 准备配置项（关键：麻烦）
5. 将配置项设置给echarts实例对象
-->
</head>
<body>
<!--2. 准备一个呈现图表的盒子，div：决定图表呈现在哪个位置-->
<div style="width: 600px;height: 400px"></div>
<script>
//3. 初始化一个echarts的实例对象,需要放到div标签的下方;init()需要一个参数，dom：document，决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'))
//4. 准备配置项（关键：麻烦）,其实就是一个option对象
var option = {
//x轴
xAxis:{
type: 'category',
data: ['小王','小雨','小兰']
},
//y轴
yAxis:{
type: 'value'
},
series: [
{
name: 'java',
type: 'bar',
data: [80,99,60]
}
]
}
//5. 将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>
展示：
配置项的使用：
-
除了配置项会变化之外，其他代码都是固定的
-
配置项的学习和使用应该参照官方文档和示例
https://echarts.apache.org/zh/api.html
2.3 Echarts的基本使用
简单配置讲解：
xAxis：直角坐标系中的x轴
yAxis：直角坐标系中的y轴
series：系列列表。每个系列通过type决定自己的图表类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.配置项的讲解和使用</title>
<!--1. 引入echarts.js文件-->
<script src="lib/echarts.min.js"></script>
<!--
ECharts使用：
1. 引入echarts.js文件
2. 准备一个呈现图表的盒子，div：决定图表呈现在哪个位置
3. 初始化一个echarts的实例对象
4. 准备配置项（关键：麻烦）
5. 将配置项设置给echarts实例对象
-->
</head>
<body>
<!--2. 准备一个呈现图表的盒子，div：决定图表呈现在哪个位置-->
<div style="width: 600px;height: 400px"></div>
<script>
//3. 初始化一个echarts的实例对象,需要放到div标签的下方;init()需要一个参数，dom：document，决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'))
//4. 准备配置项（关键：麻烦）,其实就是一个option对象
var option = {
title:{
text: '成绩', //表标题
link: 'https://echarts.apache.org/zh/api.html', //就是一个超链接，点击表标题后跳转的链接地址
textStyle: {
color: 'red' //表标题颜色
}
},
//x轴
xAxis:{
type: 'category', //类目轴
data: ['小王','小雨','小兰']
},
//y轴
yAxis:{
type: 'value' //数值轴，具体数值在series中
},
series: [
{
name: 'java',
type: 'bar', //bar：柱状图，line：折线图，pie：饼图
data: [80,99,60]
}
]
}
//5. 将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>
注：配置项太多，无需刻意去记忆
2.4 ECharts的常用图表
七大图表：
- 柱状图
- 折线图
- 散点图
- 饼图
- 地图
- 雷达图
- 仪表盘图
2.4.1 柱状图：series-bar
柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型。
某班期末java成绩如下：
张三：88
李四：95
王五：59
赵六：12
田七：56
钱八：91
孙九：80
苏十：32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纵向柱状图</title>
<!--引入js-->
<script src="lib/echarts.min.js"></script>
</head>
<body>
<!--准备一个盒子-->
<div style="width: 1000px;height: 600px"></div>
</body>
<script>
//初始化一个echarts实例对象，需要传一个dom参数绑定div盒子
var mEcharts = echarts.init(document.querySelector('div'))
var xDataArr = ['张三','李四','王五','赵六','田七','钱八','孙九','苏十'] //x轴数据，可设置成变量
//准备配置项
var option = {
title:{
text: 'java成绩'
},
//textAlign: 'auto',
xAxis:{
type: 'category',
name: '姓名',
data: xDataArr //x轴数据
},
yAxis:{
type: 'value', //设置成value，就不需要data了，这个需要在series中去找
name: '成绩'
},
series: [
{
type: 'bar', //柱状图
name: 'java', //java成绩
data:[88,95,59,12,56,91,80,32] //y轴数据
}
]
}
//将配置项设置给实例
mEcharts.setOption(option)
</script>
</html>
展示：
常见效果：
-
标记：最大值（markPoint）、最小值、平均值（markLine）
series: [ { type: 'bar', //柱状图 name: 'java', //java成绩 data:[88,95,59,12,56,91,80,32], //y轴数据 //标记最大值、最小值 markPoint: { data:[ { type: 'max',name: '最大值' }, { type: 'min',name: '最小值' } ] }, //标记平均值 markLine:{ data:[ { type: 'average',name: '平均值' } ] } } ]展示
-
显示：数值显示 柱宽度 横向柱状图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>横向柱状图</title> <!--引入js--> <script src="lib/echarts.min.js"></script> </head> <body> <!--准备一个盒子--> <div style="width: 1000px;height: 600px"></div> </body> <script> //初始化一个echarts实例对象，需要传一个dom参数绑定div盒子 var mEcharts = echarts.init(document.querySelector('div')) var xDataArr = ['张三','李四','王五','赵六','田七','钱八','孙九','苏十'] //x轴数据 //准备配置项 var option = { title:{ text: 'java成绩' }, //横向柱状图，x轴和y轴中的属性互换即可 xAxis:{ type: 'value', //设置成value，就不需要data了，这个需要在series中去找 name: '成绩' }, yAxis:{ type: 'category', name: '姓名', data: xDataArr //x轴数据 }, series: [ { type: 'bar', //柱状图 name: 'java', //java成绩 data:[88,95,59,12,56,91,80,32], //y轴数据 markPoint: { data:[ { type: 'max',name: '最大值' }, { type: 'min',name: '最小值' } ] }, markLine:{ data:[ { type: 'average',name: '平均值' } ] }, //label标签 label:{ show: true, //数值显示打开,true rotate: 60, //数值旋转60度 //position: 'inside' //数值位置，默认inside（在里面） position: 'top' //改成顶部显示 }, barWidth: '30%', //设置柱宽度，百分比形式 } ] } //将配置项设置给实例 mEcharts.setOption(option) </script> </html>展示
特点：
- 柱状图描述的是分类数据，呈现的是每一个分类中有多少；通过柱状图，可以清晰的看出每个分类数据的排名情况
2.4.2 通用配置
通用配置指的就是任何图表都能使用的配置
-
标题：title
-
文字样式
textStyle
-
标题边框
borderWidth、borderColor、borderRadius（圆角）
-
标题位置
left、top、right、bottom
title:{ text: '成绩展示', //表标题 link: 'https://echarts.apache.org/zh/api.html', //就是一个超链接，点击表标题后跳转的链接地址 //文字样式 textStyle: { color: 'red' //表标题颜色 }, //标题边框 borderWidth: 5, //边框颜色 borderColor: 'blue', //边框设置成圆角边框 borderRadius: 5, left: 250, //控制标题位置距离div左边的多少 top: 10 //控制标题位置距离div上边的多少 } -
-
提示：tooltip
-
tooltip：提示框组件，用于配置鼠标滑过或点击图表时的显示框
- 触发类型：trigger
item、axis
- 触发时机：triggerOn
mouseover（鼠标移动的时候就会出现详细信息）
click（鼠标点击的时候才会出现详细信息）
-
格式化：formatter，可决定提示框输出的内容
字符串模板
模板变量有
{a},{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为'axis'的时候，会有多个系列的数据，此时可以通过{a0},{a1},{a2}这种后面加索引的方式表示系列的索引。 不同图表类型下的{a}，{b}，{c}，{d}含义不一样。 其中变量{a},{b},{c},{d}在不同图表类型下代表数据含义为：- 折线（区域）图、柱状（条形）图、K线图 :
{a}（系列名称），{b}（类目值），{c}（数值）,{d}（无） - 散点图（气泡）图 :
{a}（系列名称），{b}（数据名称），{c}（数值数组）,{d}（无） - 地图 :
{a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无） - 饼图、仪表盘、漏斗图:
{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）
更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。
示例：
formatter: '{b0}: {c0}<br />{b1}: {c1}'回调函数示例
formatter: function (params, ticket, callback) { $.get('detail?name=' + params.name, function (content) { callback(ticket, toHTML(content)); }); return 'Loading'; } - 折线（区域）图、柱状（条形）图、K线图 :
tooltip:{ //trigger: 'item' trigger: 'axis', triggerOn: 'click', //formatter: '{b}的{a}成绩是{c}' formatter: function (arg) { console.log(arg) //return 'hehe' return arg[0].name + '的'+'分数是：'+arg[0].data } } -
-
工具按钮：toolbox
toolbox：Echarts提供的工具栏
-
内置有导出图片，数据视图，重置，数据区域缩放，动态类型切换五个工具
-
显示工具栏按钮 feature
saveAsImag、dataView、restore、dataZoom、magicType
toolbox:{ feature:{ saveAsImage: {}, //导出图片 dataView: {}, //数据视图，点击进入数据视图页面可以修改里面的内容并实时刷新 restore:{}, //重置功能，恢复原始数据 dataZoom:{}, //区域缩放 //动态图表类型的切换 magicType: { type:['bar','line'] } }
-
-
图例：legend
legend：图例，用于筛选系统列，需要和series配合使用
- legend中的data是一个数组
- legend中的data的值需要和series数组中某组数据的name值一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.通用配置</title>
<!--1. 引入echarts.js文件-->
<script src="lib/echarts.min.js"></script>
<!--
ECharts使用：
1. 引入echarts.js文件
2. 准备一个呈现图表的盒子，div：决定图表呈现在哪个位置
3. 初始化一个echarts的实例对象
4. 准备配置项（关键：麻烦）
5. 将配置项设置给echarts实例对象
-->
</head>
<body>
<!--2. 准备一个呈现图表的盒子，div：决定图表呈现在哪个位置-->
<div style="width: 800px;height: 400px"></div>
<script>
//3. 初始化一个echarts的实例对象,需要放到div标签的下方;init()需要一个参数，dom：document，决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'))
var yDataArr = [85,60,60]; //数学成绩
//4. 准备配置项（关键：麻烦）,其实就是一个option对象
var option = {
title:{
text: '成绩展示', //表标题
link: 'https://echarts.apache.org/zh/api.html', //就是一个超链接，点击表标题后跳转的链接地址
//文字样式
textStyle: {
color: 'red' //表标题颜色
},
//标题边框
borderWidth: 5,
//边框颜色
borderColor: 'blue',
//边框设置成圆角边框
borderRadius: 5,
left: 250, //控制标题位置距离div左边的多少
top: 10 //控制标题位置距离div上边的多少
},
tooltip:{
//trigger: 'item'
trigger: 'axis',
triggerOn: 'click',
//formatter: '{b}的{a}成绩是{c}'
formatter: function (arg) {
console.log(arg)
//return 'hehe'
return arg[0].name + '的'+'分数是：'+arg[0].data
}
},
toolbox:{
feature:{
saveAsImage: {}, //导出图片
dataView: {}, //数据视图，点击进入数据视图页面可以修改里面的内容并实时刷新
restore:{}, //重置功能，恢复原始数据
dataZoom:{}, //区域缩放
//动态图表类型的切换
magicType: {
type:['bar','line']
}
}
},
legend: {
data:['java','数学']
},
//x轴
xAxis:{
type: 'category', //类目轴
data: ['小王','小雨','小兰']
},
//y轴
yAxis:{
type: 'value' //数值轴，具体数值在series中
},
series: [
{
name: 'java', //trigger-item：鼠标移动到图上会显示出来
type: 'bar', //bar：柱状图，line：折线图，pie：饼图
data: [80,99,60]
},
{
name: '数学', //trigger-item：鼠标移动到图上会显示出来
type: 'bar', //bar：柱状图，line：折线图，pie：饼图
data: yDataArr
}
],
barWidth: '30%' //控制柱宽度
}
//5. 将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>
2.4.3 折线图：series-line
某班期末java成绩如下：
张三：88
李四：95
王五：59
赵六：12
田七：56
钱八：91
孙九：80
苏十：32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折线图</title>
<!--引入js-->
<script src="lib/echarts.min.js"></script>
</head>
<body>
<!--准备一个盒子-->
<div style="width: 1000px;height: 600px"></div>
</body>
<script>
//初始化一个echarts实例对象，需要传一个dom参数绑定div盒子
var mEcharts = echarts.init(document.querySelector('div'))
var xDataArr = ['张三','李四','王五','赵六','田七','钱八','孙九','苏十'] //x轴数据，可设置成变量
var yDataArr = [88,95,59,12,56,91,80,32];
//准备配置项
var option = {
title:{
text: 'java成绩',
left: 350, //控制标题位置距离div左边的多少
top: 10 //控制标题位置距离div上边的多少
},
//textAlign: 'auto',
xAxis:{
type: 'category',
name: '姓名',
data: xDataArr //x轴数据
},
yAxis:{
type: 'value', //设置成value，就不需要data了，这个需要在series中去找
name: '成绩'
},
series: [
{
type: 'line', //折线图
name: 'java', //java成绩
data: yDataArr //y轴数据
}
]
}
//将配置项设置给实例
mEcharts.setOption(option)
</script>
</html>
展示：
常见效果：
-
标记：最大值（markPoint）、最小值、平均值（markLine）这三个和柱状图一致就不做讲述。下面有代码效果
标注区间：markArea
series: [ { type: 'line', //折线图 name: 'java', //java成绩 data: yDataArr, //y轴数据 markArea:{ data:[ [ { xAxis: '张三' }, { xAxis: '李四' } ], [ { xAxis: '田七' }, { xAxis: '钱八' } ], ] } } ]
-
线条控制：平滑 线条风格
smooth、lineStyle
series: [ { type: 'line', //折线图 name: 'java', //java成绩 data: yDataArr, //y轴数据 markPoint: { data:[ { type: 'max',name: '最大值' }, { type: 'min',name: '最小值' } ] }, markLine:{ data:[ { type: 'average',name: '平均值' } ] }, markArea:{ data:[ [ { xAxis: '张三' }, { xAxis: '李四' } ], [ { xAxis: '田七' }, { xAxis: '钱八' } ], ] }, smooth:true, //线条风格控制：平滑风格，默认false //线条样式 lineStyle:{ color: 'blue', //线条颜色 type: 'dashed' //虚线 dotted：点线 solid：实线（默认） } } ]
-
填充风格
areaStyle
series: [ { type: 'line', //折线图 name: 'java', //java成绩 data: yDataArr, //y轴数据 markPoint: { data:[ { type: 'max',name: '最大值' }, { type: 'min',name: '最小值' } ] }, markLine:{ data:[ { type: 'average',name: '平均值' } ] }, markArea:{ data:[ [ { xAxis: '张三' }, { xAxis: '李四' } ], [ { xAxis: '田七' }, { xAxis: '钱八' } ], ] }, smooth:true, lineStyle:{ color: 'blue', type: 'dashed' //虚线 dotted：点线 solid：实线（默认） }, areaStyle:{ color: 'green' } } ]
-
紧挨边缘
boundaryGap：需要配置给类目轴
xAxis:{ type: 'category', name: '姓名', data: xDataArr, //x轴数据 boundaryGap:false //默认true },
-
缩放：脱离0值比例，就会从最小的开始
var yDataArr = [88,88.1,88,88.2,88.3,88.1,88,88.1]; //将y轴的值改一下
yAxis:{ type: 'value', //设置成value，就不需要data了，这个需要在series中去找 name: '成绩', scale:true //将scale设置给数值轴 }
-
堆叠图：stack，基于第一个图之上实现y值的累加
示例
series: [ { type: 'line', //折线图 name: 'java', //java成绩 data: yDataArr, //y轴数据 markPoint: { data:[ { type: 'max',name: '最大值' }, { type: 'min',name: '最小值' } ] }, markLine:{ data:[ { type: 'average',name: '平均值' } ] }, markArea:{ data:[ [ { xAxis: '张三' }, { xAxis: '李四' } ], [ { xAxis: '田七' }, { xAxis: '钱八' } ], ] }, smooth:true, lineStyle:{ color: 'blue', type: 'dashed' //虚线 dotted：点线 solid：实线（默认） }, areaStyle:{ color: 'green' }, stack: 'sum = java + C++' }, { type: 'line', name: 'C++', data: yDataArr2, stack: 'sum = java + C++', areaStyle:{ color: 'orange' } } ]
特点：
折线图常用来分析数据随时间变化的趋势
2.4.4 散点图：series-scatter
散点图可以帮助我们推断变量间的相关性
比如身高和体重的关系，一般呈正相关
{"gender":"female","height": 161.2,"weight": 51.6}
{"gender":"female","height": 160.2,"weight": 50}
{"gender":"female","height": 170,"weight": 60}
实现步骤：
-
Echarts最基本的代码结构：引入js文件，DOM容器，初始化对象，设置option
-
x轴数据和y轴数据：二维数组[身高，体重]
-
图表类型
- 在series下设置type:scatter
- xAxis和yAxis的type都要设置为value
-
调整：将坐标轴都设置为脱离0值比例，scale
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>气泡图</title>
<!--引入js-->
<script src="../lib/echarts.min.js"></script>
</head>
<body>
<!--准备一个盒子-->
<div style="width: 1000px;height: 600px"></div>
</body>
<script>
//初始化一个echarts实例对象，需要传一个dom参数绑定div盒子
var mEcharts = echarts.init(document.querySelector('div'))
//数据，可设置成变量
var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157, "weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 59 }, { "gender": "female", "height": 159.1, "weight": 47.6 }, { "gender": "female", "height": 166, "weight": 69.8 }, { "gender": "female", "height": 176.2, "weight": 66.8 }, { "gender": "female", "height": 160.2, "weight": 75.2 }, { "gender": "female", "height": 172.5, "weight": 55.2 }, { "gender": "female", "height": 170.9, "weight": 54.2 }, { "gender": "female", "height": 172.9, "weight": 62.5 }, { "gender": "female", "height": 153.4, "weight": 42 }, { "gender": "female", "height": 160, "weight": 50 }, { "gender": "female", "height": 147.2, "weight": 49.8 }, { "gender": "female", "height": 168.2, "weight": 49.2 }, { "gender": "female", "height": 175, "weight": 73.2 }, { "gender": "female", "height": 157, "weight": 47.8 }, { "gender": "female", "height": 167.6, "weight": 68.8 }, { "gender": "female", "height": 159.5, "weight": 50.6 }, { "gender": "female", "height": 175, "weight": 82.5 }, { "gender": "female", "height": 166.8, "weight": 57.2 }, { "gender": "female", "height": 176.5, "weight": 87.8 }, { "gender": "female", "height": 170.2, "weight": 72.8 }, { "gender": "female", "height": 174, "weight": 54.5 }, { "gender": "female", "height": 173, "weight": 59.8 }, { "gender": "female", "height": 179.9, "weight": 67.3 }, { "gender": "female", "height": 170.5, "weight": 67.8 }, { "gender": "female", "height": 160, "weight": 47 }, { "gender": "female", "height": 154.4, "weight": 46.2 }, { "gender": "female", "height": 162, "weight": 55 }, { "gender": "female", "height": 176.5, "weight": 83 }, { "gender": "female", "height": 160, "weight": 54.4 }, { "gender": "female", "height": 152, "weight": 45.8 }, { "gender": "female", "height": 162.1, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 73.2 }, { "gender": "female", "height": 160.2, "weight": 52.1 }, { "gender": "female", "height": 161.3, "weight": 67.9 }, { "gender": "female", "height": 166.4, "weight": 56.6 }, { "gender": "female", "height": 168.9, "weight": 62.3 }, { "gender": "female", "height": 163.8, "weight": 58.5 }, { "gender": "female", "height": 167.6, "weight": 54.5 }, { "gender": "female", "height": 160, "weight": 50.2 }, { "gender": "female", "height": 161.3, "weight": 60.3 }, { "gender": "female", "height": 167.6, "weight": 58.3 }, { "gender": "female", "height": 165.1, "weight": 56.2 }, { "gender": "female", "height": 160, "weight": 50.2 }, { "gender": "female", "height": 170, "weight": 72.9 }, { "gender": "female", "height": 157.5, "weight": 59.8 }, { "gender": "female", "height": 167.6, "weight": 61 }, { "gender": "female", "height": 160.7, "weight": 69.1 }, { "gender": "female", "height": 163.2, "weight": 55.9 }, { "gender": "female", "height": 152.4, "weight": 46.5 }, { "gender": "female", "height": 157.5, "weight": 54.3 }, { "gender": "female", "height": 168.3, "weight": 54.8 }, { "gender": "female", "height": 180.3, "weight": 60.7 }, { "gender": "female", "height": 165.5, "weight": 60 }, { "gender": "female", "height": 165, "weight": 62 }, { "gender": "female", "height": 164.5, "weight": 60.3 }, { "gender": "female", "height": 156, "weight": 52.7 }, { "gender": "female", "height": 160, "weight": 74.3 }, { "gender": "female", "height": 163, "weight": 62 }, { "gender": "female", "height": 165.7, "weight": 73.1 }, { "gender": "female", "height": 161, "weight": 80 }, { "gender": "female", "height": 162, "weight": 54.7 }, { "gender": "female", "height": 166, "weight": 53.2 }, { "gender": "female", "height": 174, "weight": 75.7 }, { "gender": "female", "height": 172.7, "weight": 61.1 }, { "gender": "female", "height": 167.6, "weight": 55.7 }, { "gender": "female", "height": 151.1, "weight": 48.7 }, { "gender": "female", "height": 164.5, "weight": 52.3 }, { "gender": "female", "height": 163.5, "weight": 50 }, { "gender": "female", "height": 152, "weight": 59.3 }, { "gender": "female", "height": 169, "weight": 62.5 }, { "gender": "female", "height": 164, "weight": 55.7 }, { "gender": "female", "height": 161.2, "weight": 54.8 }, { "gender": "female", "height": 155, "weight": 45.9 }, { "gender": "female", "height": 170, "weight": 70.6 }, { "gender": "female", "height": 176.2, "weight": 67.2 }, { "gender": "female", "height": 170, "weight": 69.4 }, { "gender": "female", "height": 162.5, "weight": 58.2 }, { "gender": "female", "height": 170.3, "weight": 64.8 }, { "gender": "female", "height": 164.1, "weight": 71.6 }, { "gender": "female", "height": 169.5, "weight": 52.8 }, { "gender": "female", "height": 163.2, "weight": 59.8 }, { "gender": "female", "height": 154.5, "weight": 49 }, { "gender": "female", "height": 159.8, "weight": 50 }, { "gender": "female", "height": 173.2, "weight": 69.2 }, { "gender": "female", "height": 170, "weight": 55.9 }, { "gender": "female", "height": 161.4, "weight": 63.4 }, { "gender": "female", "height": 169, "weight": 58.2 }, { "gender": "female", "height": 166.2, "weight": 58.6 }, { "gender": "female", "height": 159.4, "weight": 45.7 }, { "gender": "female", "height": 162.5, "weight": 52.2 }, { "gender": "female", "height": 159, "weight": 48.6 }, { "gender": "female", "height": 162.8, "weight": 57.8 }, { "gender": "female", "height": 159, "weight": 55.6 }, { "gender": "female", "height": 179.8, "weight": 66.8 }, { "gender": "female", "height": 162.9, "weight": 59.4 }, { "gender": "female", "height": 161, "weight": 53.6 }, { "gender": "female", "height": 151.1, "weight": 73.2 }, { "gender": "female", "height": 168.2, "weight": 53.4 }, { "gender": "female", "height": 168.9, "weight": 69 }, { "gender": "female", "height": 173.2, "weight": 58.4 }, { "gender": "female", "height": 171.8, "weight": 56.2 }, { "gender": "female", "height": 178, "weight": 70.6 }, { "gender": "female", "height": 164.3, "weight": 59.8 }, { "gender": "female", "height": 163, "weight": 72 }, { "gender": "female", "height": 168.5, "weight": 65.2 }, { "gender": "female", "height": 166.8, "weight": 56.6 }, { "gender": "female", "height": 172.7, "weight": 105.2 }, { "gender": "female", "height": 163.5, "weight": 51.8 }, { "gender": "female", "height": 169.4, "weight": 63.4 }, { "gender": "female", "height": 167.8, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 47.6 }, { "gender": "female", "height": 167.6, "weight": 63 }, { "gender": "female", "height": 161.2, "weight": 55.2 }, { "gender": "female", "height": 160, "weight": 45 }, { "gender": "female", "height": 163.2, "weight": 54 }, { "gender": "female", "height": 162.2, "weight": 50.2 }, { "gender": "female", "height": 161.3, "weight": 60.2 }, { "gender": "female", "height": 149.5, "weight": 44.8 }, { "gender": "female", "height": 157.5, "weight": 58.8 }, { "gender": "female", "height": 163.2, "weight": 56.4 }, { "gender": "female", "height": 172.7, "weight": 62 }, { "gender": "female", "height": 155, "weight": 49.2 }, { "gender": "female", "height": 156.5, "weight": 67.2 }, { "gender": "female", "height": 164, "weight": 53.8 }, { "gender": "female", "height": 160.9, "weight": 54.4 }, { "gender": "female", "height": 162.8, "weight": 58 }, { "gender": "female", "height": 167, "weight": 59.8 }, { "gender": "female", "height": 160, "weight": 54.8 }, { "gender": "female", "height": 160, "weight": 43.2 }, { "gender": "female", "height": 168.9, "weight": 60.5 }, { "gender": "female", "height": 158.2, "weight": 46.4 }, { "gender": "female", "height": 156, "weight": 64.4 }, { "gender": "female", "height": 160, "weight": 48.8 }, { "gender": "female", "height": 167.1, "weight": 62.2 }, { "gender": "female", "height": 158, "weight": 55.5 }, { "gender": "female", "height": 167.6, "weight": 57.8 }, { "gender": "female", "height": 156, "weight": 54.6 }, { "gender": "female", "height": 162.1, "weight": 59.2 }, { "gender": "female", "height": 173.4, "weight": 52.7 }, { "gender": "female", "height": 159.8, "weight": 53.2 }, { "gender": "female", "height": 170.5, "weight": 64.5 }, { "gender": "female", "height": 159.2, "weight": 51.8 }, { "gender": "female", "height": 157.5, "weight": 56 }, { "gender": "female", "height": 161.3, "weight": 63.6 }, { "gender": "female", "height": 162.6, "weight": 63.2 }, { "gender": "female", "height": 160, "weight": 59.5 }, { "gender": "female", "height": 168.9, "weight": 56.8 }, { "gender": "female", "height": 165.1, "weight": 64.1 }, { "gender": "female", "height": 162.6, "weight": 50 }, { "gender": "female", "height": 165.1, "weight": 72.3 }, { "gender": "female", "height": 166.4, "weight": 55 }, { "gender": "female", "height": 160, "weight": 55.9 }, { "gender": "female", "height": 152.4, "weight": 60.4 }, { "gender": "female", "height": 170.2, "weight": 69.1 }, { "gender": "female", "height": 162.6, "weight": 84.5 }, { "gender": "female", "height": 170.2, "weight": 55.9 }, { "gender": "female", "height": 158.8, "weight": 55.5 }, { "gender": "female", "height": 172.7, "weight": 69.5 }, { "gender": "female", "height": 167.6, "weight": 76.4 }, { "gender": "female", "height": 162.6, "weight": 61.4 }, { "gender": "female", "height": 167.6, "weight": 65.9 }, { "gender": "female", "height": 156.2, "weight": 58.6 }, { "gender": "female", "height": 175.2, "weight": 66.8 }, { "gender": "female", "height": 172.1, "weight": 56.6 }, { "gender": "female", "height": 162.6, "weight": 58.6 }, { "gender": "female", "height": 160, "weight": 55.9 }, { "gender": "female", "height": 165.1, "weight": 59.1 }, { "gender": "female", "height": 182.9, "weight": 81.8 }, { "gender": "female", "height": 166.4, "weight": 70.7 }, { "gender": "female", "height": 165.1, "weight": 56.8 }, { "gender": "female", "height": 177.8, "weight": 60 }, { "gender": "female", "height": 165.1, "weight": 58.2 }, { "gender": "female", "height": 175.3, "weight": 72.7 }, { "gender": "female", "height": 154.9, "weight": 54.1 }, { "gender": "female", "height": 158.8, "weight": 49.1 }, { "gender": "female", "height": 172.7, "weight": 75.9 }, { "gender": "female", "height": 168.9, "weight": 55 }, { "gender": "female", "height": 161.3, "weight": 57.3 }, { "gender": "female", "height": 167.6, "weight": 55 }, { "gender": "female", "height": 165.1, "weight": 65.5 }, { "gender": "female", "height": 175.3, "weight": 65.5 }, { "gender": "female", "height": 157.5, "weight": 48.6 }, { "gender": "female", "height": 163.8, "weight": 58.6 }, { "gender": "female", "height": 167.6, "weight": 63.6 }, { "gender": "female", "height": 165.1, "weight": 55.2 }, { "gender": "female", "height": 165.1, "weight": 62.7 }, { "gender": "female", "height": 168.9, "weight": 56.6 }, { "gender": "female", "height": 162.6, "weight": 53.9 }, { "gender": "female", "height": 164.5, "weight": 63.2 }, { "gender": "female", "height": 176.5, "weight": 73.6 }, { "gender": "female", "height": 168.9, "weight": 62 }, { "gender": "female", "height": 175.3, "weight": 63.6 }, { "gender": "female", "height": 159.4, "weight": 53.2 }, { "gender": "female", "height": 160, "weight": 53.4 }, { "gender": "female", "height": 170.2, "weight": 55 }, { "gender": "female", "height": 162.6, "weight": 70.5 }, { "gender": "female", "height": 167.6, "weight": 54.5 }, { "gender": "female", "height": 162.6, "weight": 54.5 }, { "gender": "female", "height": 160.7, "weight": 55.9 }, { "gender": "female", "height": 160, "weight": 59 }, { "gender": "female", "height": 157.5, "weight": 63.6 }, { "gender": "female", "height": 162.6, "weight": 54.5 }, { "gender": "female", "height": 152.4, "weight": 47.3 }, { "gender": "female", "height": 170.2, "weight": 67.7 }, { "gender": "female", "height": 165.1, "weight": 80.9 }, { "gender": "female", "height": 172.7, "weight": 70.5 }, { "gender": "female", "height": 165.1, "weight": 60.9 }, { "gender": "female", "height": 170.2, "weight": 63.6 }, { "gender": "female", "height": 170.2, "weight": 54.5 }, { "gender": "female", "height": 170.2, "weight": 59.1 }, { "gender": "female", "height": 161.3, "weight": 70.5 }, { "gender": "female", "height": 167.6, "weight": 52.7 }, { "gender": "female", "height": 167.6, "weight": 62.7 }, { "gender": "female", "height": 165.1, "weight": 86.3 }, { "gender": "female", "height": 162.6, "weight": 66.4 }, { "gender": "female", "height": 152.4, "weight": 67.3 }, { "gender": "female", "height": 168.9, "weight": 63 }, { "gender": "female", "height": 170.2, "weight": 73.6 }, { "gender": "female", "height": 175.2, "weight": 62.3 }, { "gender": "female", "height": 175.2, "weight": 57.7 }, { "gender": "female", "height": 160, "weight": 55.4 }, { "gender": "female", "height": 165.1, "weight": 104.1 }, { "gender": "female", "height": 174, "weight": 55.5 }, { "gender": "female", "height": 170.2, "weight": 77.3 }, { "gender": "female", "height": 160, "weight": 80.5 }, { "gender": "female", "height": 167.6, "weight": 64.5 }, { "gender": "female", "height": 167.6, "weight": 72.3 }, { "gender": "female", "height": 167.6, "weight": 61.4 }, { "gender": "female", "height": 154.9, "weight": 58.2 }, { "gender": "female", "height": 162.6, "weight": 81.8 }, { "gender": "female", "height": 175.3, "weight": 63.6 }, { "gender": "female", "height": 171.4, "weight": 53.4 }, { "gender": "female", "height": 157.5, "weight": 54.5 }, { "gender": "female", "height": 165.1, "weight": 53.6 }, { "gender": "female", "height": 160, "weight": 60 }, { "gender": "female", "height": 174, "weight": 73.6 }, { "gender": "female", "height": 162.6, "weight": 61.4 }, { "gender": "female", "height": 174, "weight": 55.5 }, { "gender": "female", "height": 162.6, "weight": 63.6 }, { "gender": "female", "height": 161.3, "weight": 60.9 }, { "gender": "female", "height": 156.2, "weight": 60 }, { "gender": "female", "height": 149.9, "weight": 46.8 }, { "gender": "female", "height": 169.5, "weight": 57.3 }, { "gender": "female", "height": 160, "weight": 64.1 }, { "gender": "female", "height": 175.3, "weight": 63.6 }, { "gender": "female", "height": 169.5, "weight": 67.3 }, { "gender": "female", "height": 160, "weight": 75.5 }, { "gender": "female", "height": 172.7, "weight": 68.2 }, { "gender": "female", "height": 162.6, "weight": 61.4 }, { "gender": "female", "height": 157.5, "weight": 76.8 }, { "gender": "female", "height": 176.5, "weight": 71.8 }, { "gender": "female", "height": 164.4, "weight": 55.5 }, { "gender": "female", "height": 160.7, "weight": 48.6 }, { "gender": "female", "height": 174, "weight": 66.4 }, { "gender": "female", "height": 163.8, "weight": 67.3 }, { "gender": "male", "height": 174, "weight": 65.6 }, { "gender": "male", "height": 175.3, "weight": 71.8 }, { "gender": "male", "height": 193.5, "weight": 80.7 }, { "gender": "male", "height": 186.5, "weight": 72.6 }, { "gender": "male", "height": 187.2, "weight": 78.8 }, { "gender": "male", "height": 181.5, "weight": 74.8 }, { "gender": "male", "height": 184, "weight": 86.4 }, { "gender": "male", "height": 184.5, "weight": 78.4 }, { "gender": "male", "height": 175, "weight": 62 }, { "gender": "male", "height": 184, "weight": 81.6 }, { "gender": "male", "height": 180, "weight": 76.6 }, { "gender": "male", "height": 177.8, "weight": 83.6 }, { "gender": "male", "height": 192, "weight": 90 }, { "gender": "male", "height": 176, "weight": 74.6 }, { "gender": "male", "height": 174, "weight": 71 }, { "gender": "male", "height": 184, "weight": 79.6 }, { "gender": "male", "height": 192.7, "weight": 93.8 }, { "gender": "male", "height": 171.5, "weight": 70 }, { "gender": "male", "height": 173, "weight": 72.4 }, { "gender": "male", "height": 176, "weight": 85.9 }, { "gender": "male", "height": 176, "weight": 78.8 }, { "gender": "male", "height": 180.5, "weight": 77.8 }, { "gender": "male", "height": 172.7, "weight": 66.2 }, { "gender": "male", "height": 176, "weight": 86.4 }, { "gender": "male", "height": 173.5, "weight": 81.8 }, { "gender": "male", "height": 178, "weight": 89.6 }, { "gender": "male", "height": 180.3, "weight": 82.8 }, { "gender": "male", "height": 180.3, "weight": 76.4 }, { "gender": "male", "height": 164.5, "weight": 63.2 }, { "gender": "male", "height": 173, "weight": 60.9 }, { "gender": "male", "height": 183.5, "weight": 74.8 }, { "gender": "male", "height": 175.5, "weight": 70 }, { "gender": "male", "height": 188, "weight": 72.4 }, { "gender": "male", "height": 189.2, "weight": 84.1 }, { "gender": "male", "height": 172.8, "weight": 69.1 }, { "gender": "male", "height": 170, "weight": 59.5 }, { "gender": "male", "height": 182, "weight": 67.2 }, { "gender": "male", "height": 170, "weight": 61.3 }, { "gender": "male", "height": 177.8, "weight": 68.6 }, { "gender": "male", "height": 184.2, "weight": 80.1 }, { "gender": "male", "height": 186.7, "weight": 87.8 }, { "gender": "male", "height": 171.4, "weight": 84.7 }, { "gender": "male", "height": 172.7, "weight": 73.4 }, { "gender": "male", "height": 175.3, "weight": 72.1 }, { "gender": "male", "height": 180.3, "weight": 82.6 }, { "gender": "male", "height": 182.9, "weight": 88.7 }, { "gender": "male", "height": 188, "weight": 84.1 }, { "gender": "male", "height": 177.2, "weight": 94.1 }, { "gender": "male", "height": 172.1, "weight": 74.9 }, { "gender": "male", "height": 167, "weight": 59.1 }, { "gender": "male", "height": 169.5, "weight": 75.6 }, { "gender": "male", "height": 174, "weight": 86.2 }, { "gender": "male", "height": 172.7, "weight": 75.3 }, { "gender": "male", "height": 182.2, "weight": 87.1 }, { "gender": "male", "height": 164.1, "weight": 55.2 }, { "gender": "male", "height": 163, "weight": 57 }, { "gender": "male", "height": 171.5, "weight": 61.4 }, { "gender": "male", "height": 184.2, "weight": 76.8 }, { "gender": "male", "height": 174, "weight": 86.8 }, { "gender": "male", "height": 174, "weight": 72.2 }, { "gender": "male", "height": 177, "weight": 71.6 }, { "gender": "male", "height": 186, "weight": 84.8 }, { "gender": "male", "height": 167, "weight": 68.2 }, { "gender": "male", "height": 171.8, "weight": 66.1 }, { "gender": "male", "height": 182, "weight": 72 }, { "gender": "male", "height": 167, "weight": 64.6 }, { "gender": "male", "height": 177.8, "weight": 74.8 }, { "gender": "male", "height": 164.5, "weight": 70 }, { "gender": "male", "height": 192, "weight": 101.6 }, { "gender": "male", "height": 175.5, "weight": 63.2 }, { "gender": "male", "height": 171.2, "weight": 79.1 }, { "gender": "male", "height": 181.6, "weight": 78.9 }, { "gender": "male", "height": 167.4, "weight": 67.7 }, { "gender": "male", "height": 181.1, "weight": 66 }, { "gender": "male", "height": 177, "weight": 68.2 }, { "gender": "male", "height": 174.5, "weight": 63.9 }, { "gender": "male", "height": 177.5, "weight": 72 }, { "gender": "male", "height": 170.5, "weight": 56.8 }, { "gender": "male", "height": 182.4, "weight": 74.5 }, { "gender": "male", "height": 197.1, "weight": 90.9 }, { "gender": "male", "height": 180.1, "weight": 93 }, { "gender": "male", "height": 175.5, "weight": 80.9 }, { "gender": "male", "height": 180.6, "weight": 72.7 }, { "gender": "male", "height": 184.4, "weight": 68 }, { "gender": "male", "height": 175.5, "weight": 70.9 }, { "gender": "male", "height": 180.6, "weight": 72.5 }, { "gender": "male", "height": 177, "weight": 72.5 }, { "gender": "male", "height": 177.1, "weight": 83.4 }, { "gender": "male", "height": 181.6, "weight": 75.5 }, { "gender": "male", "height": 176.5, "weight": 73 }, { "gender": "male", "height": 175, "weight": 70.2 }, { "gender": "male", "height": 174, "weight": 73.4 }, { "gender": "male", "height": 165.1, "weight": 70.5 }, { "gender": "male", "height": 177, "weight": 68.9 }, { "gender": "male", "height": 192, "weight": 102.3 }, { "gender": "male", "height": 176.5, "weight": 68.4 }, { "gender": "male", "height": 169.4, "weight": 65.9 }, { "gender": "male", "height": 182.1, "weight": 75.7 }, { "gender": "male", "height": 179.8, "weight": 84.5 }, { "gender": "male", "height": 175.3, "weight": 87.7 }, { "gender": "male", "height": 184.9, "weight": 86.4 }, { "gender": "male", "height": 177.3, "weight": 73.2 }, { "gender": "male", "height": 167.4, "weight": 53.9 }, { "gender": "male", "height": 178.1, "weight": 72 }, { "gender": "male", "height": 168.9, "weight": 55.5 }, { "gender": "male", "height": 157.2, "weight": 58.4 }, { "gender": "male", "height": 180.3, "weight": 83.2 }, { "gender": "male", "height": 170.2, "weight": 72.7 }, { "gender": "male", "height": 177.8, "weight": 64.1 }, { "gender": "male", "height": 172.7, "weight": 72.3 }, { "gender": "male", "height": 165.1, "weight": 65 }, { "gender": "male", "height": 186.7, "weight": 86.4 }, { "gender": "male", "height": 165.1, "weight": 65 }, { "gender": "male", "height": 174, "weight": 88.6 }, { "gender": "male", "height": 175.3, "weight": 84.1 }, { "gender": "male", "height": 185.4, "weight": 66.8 }, { "gender": "male", "height": 177.8, "weight": 75.5 }, { "gender": "male", "height": 180.3, "weight": 93.2 }, { "gender": "male", "height": 180.3, "weight": 82.7 }, { "gender": "male", "height": 177.8, "weight": 58 }, { "gender": "male", "height": 177.8, "weight": 79.5 }, { "gender": "male", "height": 177.8, "weight": 78.6 }, { "gender": "male", "height": 177.8, "weight": 71.8 }, { "gender": "male", "height": 177.8, "weight": 116.4 }, { "gender": "male", "height": 163.8, "weight": 72.2 }, { "gender": "male", "height": 188, "weight": 83.6 }, { "gender": "male", "height": 198.1, "weight": 85.5 }, { "gender": "male", "height": 175.3, "weight": 90.9 }, { "gender": "male", "height": 166.4, "weight": 85.9 }, { "gender": "male", "height": 190.5, "weight": 89.1 }, { "gender": "male", "height": 166.4, "weight": 75 }, { "gender": "male", "height": 177.8, "weight": 77.7 }, { "gender": "male", "height": 179.7, "weight": 86.4 }, { "gender": "male", "height": 172.7, "weight": 90.9 }, { "gender": "male", "height": 190.5, "weight": 73.6 }, { "gender": "male", "height": 185.4, "weight": 76.4 }, { "gender": "male", "height": 168.9, "weight": 69.1 }, { "gender": "male", "height": 167.6, "weight": 84.5 }, { "gender": "male", "height": 175.3, "weight": 64.5 }, { "gender": "male", "height": 170.2, "weight": 69.1 }, { "gender": "male", "height": 190.5, "weight": 108.6 }, { "gender": "male", "height": 177.8, "weight": 86.4 }, { "gender": "male", "height": 190.5, "weight": 80.9 }, { "gender": "male", "height": 177.8, "weight": 87.7 }, { "gender": "male", "height": 184.2, "weight": 94.5 }, { "gender": "male", "height": 176.5, "weight": 80.2 }, { "gender": "male", "height": 177.8, "weight": 72 }, { "gender": "male", "height": 180.3, "weight": 71.4 }, { "gender": "male", "height": 171.4, "weight": 72.7 }, { "gender": "male", "height": 172.7, "weight": 84.1 }, { "gender": "male", "height": 172.7, "weight": 76.8 }, { "gender": "male", "height": 177.8, "weight": 63.6 }, { "gender": "male", "height": 177.8, "weight": 80.9 }, { "gender": "male", "height": 182.9, "weight": 80.9 }, { "gender": "male", "height": 170.2, "weight": 85.5 }, { "gender": "male", "height": 167.6, "weight": 68.6 }, { "gender": "male", "height": 175.3, "weight": 67.7 }, { "gender": "male", "height": 165.1, "weight": 66.4 }, { "gender": "male", "height": 185.4, "weight": 102.3 }, { "gender": "male", "height": 181.6, "weight": 70.5 }, { "gender": "male", "height": 172.7, "weight": 95.9 }, { "gender": "male", "height": 190.5, "weight": 84.1 }, { "gender": "male", "height": 179.1, "weight": 87.3 }, { "gender": "male", "height": 175.3, "weight": 71.8 }, { "gender": "male", "height": 170.2, "weight": 65.9 }, { "gender": "male", "height": 193, "weight": 95.9 }, { "gender": "male", "height": 171.4, "weight": 91.4 }, { "gender": "male", "height": 177.8, "weight": 81.8 }, { "gender": "male", "height": 177.8, "weight": 96.8 }, { "gender": "male", "height": 167.6, "weight": 69.1 }, { "gender": "male", "height": 167.6, "weight": 82.7 }, { "gender": "male", "height": 180.3, "weight": 75.5 }, { "gender": "male", "height": 182.9, "weight": 79.5 }, { "gender": "male", "height": 176.5, "weight": 73.6 }, { "gender": "male", "height": 186.7, "weight": 91.8 }, { "gender": "male", "height": 188, "weight": 84.1 }, { "gender": "male", "height": 188, "weight": 85.9 }, { "gender": "male", "height": 177.8, "weight": 81.8 }, { "gender": "male", "height": 174, "weight": 82.5 }, { "gender": "male", "height": 177.8, "weight": 80.5 }, { "gender": "male", "height": 171.4, "weight": 70 }, { "gender": "male", "height": 185.4, "weight": 81.8 }, { "gender": "male", "height": 185.4, "weight": 84.1 }, { "gender": "male", "height": 188, "weight": 90.5 }, { "gender": "male", "height": 188, "weight": 91.4 }, { "gender": "male", "height": 182.9, "weight": 89.1 }, { "gender": "male", "height": 176.5, "weight": 85 }, { "gender": "male", "height": 175.3, "weight": 69.1 }, { "gender": "male", "height": 175.3, "weight": 73.6 }, { "gender": "male", "height": 188, "weight": 80.5 }, { "gender": "male", "height": 188, "weight": 82.7 }, { "gender": "male", "height": 175.3, "weight": 86.4 }, { "gender": "male", "height": 170.5, "weight": 67.7 }, { "gender": "male", "height": 179.1, "weight": 92.7 }, { "gender": "male", "height": 177.8, "weight": 93.6 }, { "gender": "male", "height": 175.3, "weight": 70.9 }, { "gender": "male", "height": 182.9, "weight": 75 }, { "gender": "male", "height": 170.8, "weight": 93.2 }, { "gender": "male", "height": 188, "weight": 93.2 }, { "gender": "male", "height": 180.3, "weight": 77.7 }, { "gender": "male", "height": 177.8, "weight": 61.4 }, { "gender": "male", "height": 185.4, "weight": 94.1 }, { "gender": "male", "height": 168.9, "weight": 75 }, { "gender": "male", "height": 185.4, "weight": 83.6 }, { "gender": "male", "height": 180.3, "weight": 85.5 }, { "gender": "male", "height": 174, "weight": 73.9 }, { "gender": "male", "height": 167.6, "weight": 66.8 }, { "gender": "male", "height": 182.9, "weight": 87.3 }, { "gender": "male", "height": 160, "weight": 72.3 }, { "gender": "male", "height": 180.3, "weight": 88.6 }, { "gender": "male", "height": 167.6, "weight": 75.5 }, { "gender": "male", "height": 186.7, "weight": 101.4 }, { "gender": "male", "height": 175.3, "weight": 91.1 }, { "gender": "male", "height": 175.3, "weight": 67.3 }, { "gender": "male", "height": 175.9, "weight": 77.7 }, { "gender": "male", "height": 175.3, "weight": 81.8 }, { "gender": "male", "height": 179.1, "weight": 75.5 }, { "gender": "male", "height": 181.6, "weight": 84.5 }, { "gender": "male", "height": 177.8, "weight": 76.6 }, { "gender": "male", "height": 182.9, "weight": 85 }, { "gender": "male", "height": 177.8, "weight": 102.5 }, { "gender": "male", "height": 184.2, "weight": 77.3 }, { "gender": "male", "height": 179.1, "weight": 71.8 }, { "gender": "male", "height": 176.5, "weight": 87.9 }, { "gender": "male", "height": 188, "weight": 94.3 }, { "gender": "male", "height": 174, "weight": 70.9 }, { "gender": "male", "height": 167.6, "weight": 64.5 }, { "gender": "male", "height": 170.2, "weight": 77.3 }, { "gender": "male", "height": 167.6, "weight": 72.3 }, { "gender": "male", "height": 188, "weight": 87.3 }, { "gender": "male", "height": 174, "weight": 80 }, { "gender": "male", "height": 176.5, "weight": 82.3 }, { "gender": "male", "height": 180.3, "weight": 73.6 }, { "gender": "male", "height": 167.6, "weight": 74.1 }, { "gender": "male", "height": 188, "weight": 85.9 }, { "gender": "male", "height": 180.3, "weight": 73.2 }, { "gender": "male", "height": 167.6, "weight": 76.3 }, { "gender": "male", "height": 183, "weight": 65.9 }, { "gender": "male", "height": 183, "weight": 90.9 }, { "gender": "male", "height": 179.1, "weight": 89.1 }, { "gender": "male", "height": 170.2, "weight": 62.3 }, { "gender": "male", "height": 177.8, "weight": 82.7 }, { "gender": "male", "height": 179.1, "weight": 79.1 }, { "gender": "male", "height": 190.5, "weight": 98.2 }, { "gender": "male", "height": 177.8, "weight": 84.1 }, { "gender": "male", "height": 180.3, "weight": 83.2 }, { "gender": "male", "height": 180.3, "weight": 83.2 }]
var axisData = []
for (var i = 0; i < data.length; i++) {
var height = data[i].height
var weight = data[i].weight
var newArr = [height,weight]
axisData.push(newArr)
}
console.log(axisData)
//准备配置项
var option = {
title:{
text: '身高体重散点图'
},
//textAlign: 'auto',
xAxis:{
type: 'value',
name: '身高',
scale:true //将scale设置给数值轴
},
yAxis:{
type: 'value', //设置成value，就不需要data了，这个需要在series中去找
name: '体重',
scale:true //将scale设置给数值轴
},
series: [
{
type: 'scatter', //散点图
data:axisData,
//symbolSize: 50 //控制散点大小，不设置此项则为默认大小
//支持回调函数
symbolSize: function (arg) {
//console.log(arg)
//return 20 //将会返回，即会控制散点大小
var height = arg[0] / 100 // / 100：使身高以m为单位
var weight = arg[1]
//bmi = 体重（kg） / (身高（m）*身高（m）) 大于28，就代表肥胖
var bmi = weight/(height*height)
if(bmi > 28){
return 20
}
return 5
},
//控制散点颜色
itemStyle:{
//color:'green'
//支持回调函数
color:function (arg) {
var height = arg.data[0] / 100 // / 100：使身高以m为单位
var weight = arg.data[1]
//bmi = 体重（kg） / (身高（m）*身高（m）) 大于28，就代表肥胖
var bmi = weight/(height*height)
if(bmi > 28){
return 'red' //肥胖的人呈现红色
}
return 'green' //不肥胖的人呈现绿色
}
}
}
]
}
//将配置项设置给实例
mEcharts.setOption(option)
</script>
</html>
常见效果：
-
气泡图效果：控制散点的大小和散点的颜色
控制散点的大小：symbolSize
控制散点的颜色：itemStyle
效果如上所示
-
涟漪动画效果：会动的散点图
type: 'effectScatter', //涟漪动画效果：会动的散点图 showEffectOn:'emphasis', //render:自动拥有涟漪效果（默认） emphasis:鼠标移到时才会展示 rippleEffect: { //scale: 5 //控制涟漪大小 }series: [ { //type: 'scatter', //散点图 type: 'effectScatter', //涟漪动画效果：会动的散点图 showEffectOn:'emphasis', //render:自动拥有涟漪效果（默认） emphasis:鼠标移到时才会展示 rippleEffect: { //scale: 5 //控制涟漪大小 }, data:axisData, //symbolSize: 50 //控制散点大小 //支持回调函数 symbolSize: function (arg) { //console.log(arg) //return 20 //将会返回，即会控制散点大小 var height = arg[0] / 100 // / 100：使身高以m为单位 var weight = arg[1] //bmi = 体重（kg） / (身高（m）*身高（m）) 大于28，就代表肥胖 var bmi = weight/(height*height) if(bmi > 28){ return 20 } return 5 }, //控制散点颜色 itemStyle:{ //color:'green' //支持回调函数 color:function (arg) { var height = arg.data[0] / 100 // / 100：使身高以m为单位 var weight = arg.data[1] //bmi = 体重（kg） / (身高（m）*身高（m）) 大于28，就代表肥胖 var bmi = weight/(height*height) if(bmi > 28){ return 'red' //肥胖的人呈现红色 } return 'green' //不肥胖的人呈现绿色 } } } ]
散点图特点：
- 散点图可以帮助我们推断出不同维度数据之间的相关性
- 散点图也经常用在地图的标注上
2.4.5 直角坐标系的常用配置
直角坐标系图表：柱状图 折线图 散点图
- 网格 grid
- 坐标轴 axis
- 区域缩放 dataZoom
网格 grid
grid 是用来控制直角坐标系的布局和大小
x 轴和 y 轴就是在 grid 的基础上进行绘制的
-
显示grid
grid:{ show: true, //显示grid borderWidth: 10, //设置grid的宽度 borderColor: 'blue', //设置grid的颜色 left:120, //控制grid距离左边的距离 top:120, //控制grid距离上边的距离 width: 500, //控制grid的宽度 height: 300 //控制grid的高度 } -
坐标轴 axis
坐标轴分为x轴和y轴，一个grid中最多有两种位置的x轴和y轴
-
坐标轴类型：type
type：数值轴，自动会从目标数据中读取数据
category：类目轴，该类型必须通过data设置类目数据
-
显示位置：position
xAxis：可取值为 top 或者 bottom
yAxis：可取值为 left 或者 right
-
-
区域缩放 dataZoom
dataZoom用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有
dataZoom是一个数组，意味着可以配置多个区域缩放器
-
类型type
slider：滑块
inside：内置，依靠鼠标滚轮或者双指缩放
-
指明产生作用的轴
xAxisIndex：设置缩放组件控制的是哪个x轴，一般写0即可
yAxisIndex：设置缩放组件控制的是哪个y轴，一般写0即可
-
指明初始状态的缩放情况
start: 0, //数据窗口范围的起始百分比 end: 50 //数据窗口范围的结束百分比
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>直角坐标系的常用配置</title>
<!--引入js-->
<script src="../lib/echarts.min.js"></script>
</head>
<body>
<!--准备一个盒子-->
<div style="width: 1000px;height: 600px"></div>
</body>
<script>
//初始化一个echarts实例对象，需要传一个dom参数绑定div盒子
var mEcharts = echarts.init(document.querySelector('div'))
var xDataArr = ['张三','李四','王五','赵六','田七','钱八','孙九','苏十'] //x轴数据，可设置成变量
//准备配置项
var option = {
//区域缩放器：是一个数组；只配置一个对象时，默认作用于x轴
dataZoom: [
{
//type: 'slider'
type: 'slider',
xAxisIndex: 0 //作用于第一个x轴
},
{
type: 'slider',
yAxisIndex: 0, //作用于第一个y轴
start: 0,
end: 50
}
],
toolbox:{
feature:{
dataZoom:{} //区域缩放
}
},
grid:{
show: true, //显示grid
borderWidth: 10, //设置grid的宽度
borderColor: 'blue', //设置grid的颜色
left:120, //控制grid距离左边的距离
top:120, //控制grid距离上边的距离
width: 500, //控制grid的宽度
height: 300 //控制grid的高度
},
title:{
text: 'java成绩'
},
//textAlign: 'auto',
xAxis:{
type: 'category',
name: '姓名',
data: xDataArr, //x轴数据
position: 'top' //将x轴数据放到顶部
},
yAxis:{
type: 'value', //设置成value，就不需要data了，这个需要在series中去找
name: '成绩',
position: 'right'
},
series: [
{
type: 'bar', //柱状图
name: 'java', //java成绩
data:[88,95,59,12,56,91,80,32], //y轴数据
barWidth: '40%'
}
]
}
//将配置项设置给实例
mEcharts.setOption(option)
</script>
</html>
2.4.6 饼图：series-pie
小明今年在各个购物平台的消费情况：
淘宝：5000
京东：6000
唯品会：2000
得物：4000
-
数据准备：
{ name: '淘宝', value: 5000 }, { name: '京东', value: 6000 }, { name: '唯品会', value: 2000 }, { name: '得物', value: 4000 } -
图标类型：在series下设置type: pie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼图</title>
<!--引入js-->
<script src="lib/echarts.min.js"></script>
</head>
<body>
<!--准备一个盒子-->
<div style="width: 800px;height: 600px"></div>
</body>
<script>
//初始化一个echarts实例对象，需要传一个dom参数绑定div盒子
var mEcharts = echarts.init(document.querySelector('div'))
// pieData就是需要设置给饼图的数据,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value
var pieData = [
{
name: '淘宝',
value: 5000
},
{
name: '京东',
value: 6000
},
{
name: '唯品会',
value: 2000
},
{
name: '得物',
value: 4000
}
]
var option = {
series:[
{
type: 'pie',
data: pieData
}
]
}
//将配置项设置给实例
mEcharts.setOption(option)
</script>
</html>
常见效果：
-
显示数值
label.formatter
-
圆环
radius:['50%','75%'] //第1个元素（50%）代表的是内圆的半径，第2个元素（75%）代表外圆的半径 -
南丁格尔玫瑰图
roseType: 'radius' //饼图的每一个区域的半径是不同的，会随着数值的变化而发生改变 -
选中效果
selectedMode: 'single', //single:能够将选中的区域偏离圆心一小段距离,重新选择其他会回去 //selectedMode: 'multiple', //multiple：能够将选中的区域偏离圆心一小段距离,重新选择其他不会回去（再次选择它会回去） selectedOffset: 30 //选中偏离量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>饼图</title>
<!--引入js-->
<script src="lib/echarts.min.js"></script>
</head>
<body>
<!--准备一个盒子-->
<div style="width: 800px;height: 600px"></div>
</body>
<script>
//初始化一个echarts实例对象，需要传一个dom参数绑定div盒子
var mEcharts = echarts.init(document.querySelector('div'))
// pieData就是需要设置给饼图的数据,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value
var pieData = [
{
name: '淘宝',
value: 5000
},
{
name: '京东',
value: 6000
},
{
name: '唯品会',
value: 2000
},
{
name: '得物',
value: 4000
}
]
var option = {
title:{
text: '小明今年在各个购物平台的消费情况',
left: 250, //控制标题位置距离div左边的多少
top: 10 //控制标题位置距离div上边的多少
},
series:[
{
type: 'pie',
data: pieData,
label:{
show: true, //饼图文字的显示,默认显示出来的
//决定文字显示的内容
//formatter: 'hehe'
formatter: function (arg) {
console.log(arg)
//return 'h'
return arg.name +'平台'+arg.value+'元\n'+arg.percent +'%'
}
},
//radius: 80 //饼图的半径，可控制饼图的大小
//radius: '80%' //饼图的百分比半径（参照div容器中宽度和高度较小的那一部分的一半来进行百分比设置），可控制饼图的大小
//radius:['50%','75%'] //第1个元素（50%）代表的是内圆的半径，第2个元素（75%）代表外圆的半径
roseType: 'radius', //饼图的每一个区域的半径是不同的，会随着数值的变化而发生改变
selectedMode: 'single', //single:能够将选中的区域偏离圆心一小段距离,重新选择其他会回去
//selectedMode: 'multiple', //multiple：能够将选中的区域偏离圆心一小段距离,重新选择其他不会回去（再次选择它会回去）
selectedOffset: 30 //选中偏离量
}
]
}
//将配置项设置给实例
mEcharts.setOption(option)
</script>
</html>
饼图特点
- 饼图可以很好的帮助用户快速了解不同分类的数据的占比情况
2.4.7 地图-geo-map
地图图表的使用方式
-
百度地图API
需要申请百度地图ak
-
矢量地图
需要准备矢量地图数据（以下基于矢量地图实现）
矢量地图的实现步骤
-
Echarts最基本的代码结构
-
准备中国的矢量地图json文件，放到json/map/的目录下
china.json
-
使用Ajax获取china.json
//function(chinaJson){}:是一个回调函数；当获取数据成功后会进行调用，返回一个chinaJson $.get('json/map/china.json',function(chinaJson){}) //$:jQuery里面的符号，需要引入jQuery； -
在回调函数中往Echarts全局对象注册地图的json数据
echarts.registerMap('chinaMap',chinaJson); //声明一个新的地图变量：chinaMap；将chinaJson赋值给chinaMap -
在geo下设置，将chinaMap赋值给map的value
type: 'map' map: 'chinaMap'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图</title>
<!--引入js-->
<script src="lib/echarts.min.js"></script>
<script src="lib/jquery.min.js"></script> <!--引入jquery-->
</head>
<body>
<!--准备一个盒子-->
<div style="width: 800px;height: 600px"></div>
</body>
<script>
//初始化一个echarts实例对象，需要传一个dom参数绑定div盒子
var mEcharts = echarts.init(document.querySelector('div'))
$.get('json/map/china.json',function (chinaJson){
//chinaJson：就是中国的各个省份的矢量地图数据
//console.log(chinaJson)
echarts.registerMap('chinaMap',chinaJson);
var option = {
geo:{
type: 'map',
map: 'chinaMap'
}
}
//将配置项设置给实例
mEcharts.setOption(option)
})
</script>
</html>
常用配置
-
缩放拖动
roam: true, //设置允许缩放以及拖动的效果 -
名称显示
label:{ show:true //展示每一个省份的名称 } -
初始化缩放的比例
zoom: 1.5 //初始化缩放的比例,默认值是：1 -
地图中心点
center: [87.617733,43.792818] //一个经纬度数组：新疆；设置之后就会以新疆为中心进行展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图</title>
<!--引入js-->
<script src="lib/echarts.min.js"></script>
<script src="lib/jquery.min.js"></script> <!--引入jquery-->
</head>
<body>
<!--准备一个盒子-->
<div style="width: 800px;height: 600px;border: 1px solid #f00"></div>
</body>
<script>
//初始化一个echarts实例对象，需要传一个dom参数绑定div盒子
var mEcharts = echarts.init(document.querySelector('div'))
$.get('json/map/china.json',function (chinaJson){
//chinaJson：就是中国的各个省份的矢量地图数据
//console.log(chinaJson)
echarts.registerMap('chinaMap',chinaJson);
var option = {
geo:{
type: 'map',
map: 'chinaMap',
roam: true, //设置允许缩放以及拖动的效果
label:{
show:true //展示每一个省份的名称
},
//zoom: 1.5, //初始化缩放的比例,默认值是：1
center: [87.617733,43.792818] //一个经纬度数组：新疆；设置之后就会以新疆为中心进行展示
}
}
//将配置项设置给实例
mEcharts.setOption(option)
})
</script>
</html>
-
显示某个区域（具体到市级单位）
- 加载该区域的矢量地图数据
- 通过registerMap注册到echarts全局对象中
- 指明geo配置下的type和map属性
- 通过zoom放大该区域
- 通过center定位中心点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>北京市</title> <!--引入js--> <script src="../lib/echarts.min.js"></script> <script src="../lib/jquery.min.js"></script> <!--引入jquery--> </head> <body> <!--准备一个盒子--> <div style="width: 800px;height: 600px;border: 1px solid #f00"></div> </body> <script> //初始化一个echarts实例对象，需要传一个dom参数绑定div盒子 var mEcharts = echarts.init(document.querySelector('div')) $.get('../json/map/beijing.json',function (beiJing){ //console.log(beiJing) echarts.registerMap('beiJingMap',beiJing); var option = { geo:{ type: 'map', map: 'beiJingMap', roam: true, //设置允许缩放以及拖动的效果 label:{ show:true //展示每一个省份的名称 }, //zoom: 1.5, //初始化缩放的比例,默认值是：1 //center: [经度,维度] } } //将配置项设置给实例 mEcharts.setOption(option) }) </script> </html>
-
不同城市显示不同的的颜色
-
显示基本的中国地图
-
城市的空气质量数据设置给series
-
将series下的数据和geo关联起来
geoIndex:0 (只有一个geo)、type:‘map’
-
结合visualMap配合使用
min
max
inRange
calculable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中国地图-不同省份的颜色不同</title> <!--引入js--> <script src="../lib/echarts.min.js"></script> <script src="../lib/jquery.min.js"></script> <!--引入jquery--> </head> <body> <!--准备一个盒子--> <div style="width: 800px;height: 600px;border: 1px solid #f00"></div> </body> <script> //初始化一个echarts实例对象，需要传一个dom参数绑定div盒子 var mEcharts = echarts.init(document.querySelector('div')) $.get('../json/map/china.json',function (chinaJson){ //chinaJson：就是中国的各个省份的矢量地图数据 //console.log(chinaJson) echarts.registerMap('chinaMap',chinaJson); //空气质量数组 var airData = [ { name: '北京', value: 39.92 }, { name: '天津', value: 39.13 }, { name: '上海', value: 31.22 }, { name: '重庆', value: 66 }, { name: '河北', value: 147 }, { name: '河南', value: 113 }, { name: '云南', value: 25.04 }, { name: '辽宁', value: 50 }, { name: '黑龙江', value: 114 }, { name: '湖南', value: 175 }, { name: '安徽', value: 117 }, { name: '山东', value: 92 }, { name: '新疆', value: 84 }, { name: '江苏', value: 67 }, { name: '浙江', value: 84 }, { name: '江西', value: 96 }, { name: '湖北', value: 273 }, { name: '广西', value: 59 }, { name: '甘肃', value: 99 }, { name: '山西', value: 39 }, { name: '内蒙古', value: 58 }, { name: '陕西', value: 61 }, { name: '吉林', value: 51 }, { name: '福建', value: 29 }, { name: '贵州', value: 71 }, { name: '广东', value: 38 }, { name: '青海', value: 57 }, { name: '西藏', value: 24 }, { name: '四川', value: 58 }, { name: '宁夏', value: 52 }, { name: '海南', value: 54 }, { name: '台湾', value: 88 }, { name: '香港', value: 66 }, { name: '澳门', value: 77 }, { name: '南海诸岛', value: 55 } ] var option = { geo:{ type: 'map', map: 'chinaMap', roam: true, //设置允许缩放以及拖动的效果 label:{ show:true //展示每一个省份的名称 } }, series:[ { data: airData, //将空气质量的数据和第0个geo配置关联在一起 geoIndex: 0, type: 'map' } ], visualMap:{ //空气质量数组中的value范围：min-max min: 0, max: 300, //进行渐变颜色控制 inRange:{ color:['white','red'] }, calculable: true //出现滑块筛选的一个效果 } } //将配置项设置给实例 mEcharts.setOption(option) }) </script> </html> -
-
地图和散点图结合
-
给series下增加新的对象
-
准备好散点数据，设置给新对象的data
-
配置新对象的type
type:effectScatter
-
让散点图使用地图坐标系统
coordinateSystem: ‘geo’
-
让涟漪动画的效果更加明显
rippleEffect:{
scale: 10
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地图和散点图的结合</title> <!--引入js--> <script src="../lib/echarts.min.js"></script> <script src="../lib/jquery.min.js"></script> <!--引入jquery--> </head> <body> <!--准备一个盒子--> <div style="width: 800px;height: 600px;border: 1px solid #f00"></div> </body> <script> //初始化一个echarts实例对象，需要传一个dom参数绑定div盒子 var mEcharts = echarts.init(document.querySelector('div')) $.get('../json/map/china.json',function (chinaJson){ //chinaJson：就是中国的各个省份的矢量地图数据 //console.log(chinaJson) echarts.registerMap('chinaMap',chinaJson); //产生涟漪效果的点坐标，可放入多个对象 var scatterData = [ { value:[121.472644, 31.231706] } ] //空气质量数组 var airData = [ { name: '北京', value: 39.92 }, { name: '天津', value: 39.13 }, { name: '上海', value: 31.22 }, { name: '重庆', value: 66 }, { name: '河北', value: 147 }, { name: '河南', value: 113 }, { name: '云南', value: 25.04 }, { name: '辽宁', value: 50 }, { name: '黑龙江', value: 114 }, { name: '湖南', value: 175 }, { name: '安徽', value: 117 }, { name: '山东', value: 92 }, { name: '新疆', value: 84 }, { name: '江苏', value: 67 }, { name: '浙江', value: 84 }, { name: '江西', value: 96 }, { name: '湖北', value: 273 }, { name: '广西', value: 59 }, { name: '甘肃', value: 99 }, { name: '山西', value: 39 }, { name: '内蒙古', value: 58 }, { name: '陕西', value: 61 }, { name: '吉林', value: 51 }, { name: '福建', value: 29 }, { name: '贵州', value: 71 }, { name: '广东', value: 38 }, { name: '青海', value: 57 }, { name: '西藏', value: 24 }, { name: '四川', value: 58 }, { name: '宁夏', value: 52 }, { name: '海南', value: 54 }, { name: '台湾', value: 88 }, { name: '香港', value: 66 }, { name: '澳门', value: 77 }, { name: '南海诸岛', value: 55 } ] var option = { geo:{ type: 'map', map: 'chinaMap', roam: true, //设置允许缩放以及拖动的效果 label:{ show:true //展示每一个省份的名称 } }, series:[ { data: airData, //将空气质量的数据和第0个geo配置关联在一起 geoIndex: 0, type: 'map' }, { data: scatterData, //配置散点的坐标数据 type: 'effectScatter', coordinateSystem: 'geo', //指明散点使用的坐标系统 geo的坐标系统 rippleEffect:{ scale: 10 //设置涟漪动画缩放的比例 } } ], visualMap:{ //空气质量数组中的value范围：min-max min: 0, max: 300, //进行渐变颜色控制 inRange:{ color:['white','red'] }, calculable: true //出现滑块筛选的一个效果 } } //将配置项设置给实例 mEcharts.setOption(option) }) </script> </html> -
常见效果
- 缩放拖动、初始缩放比例、中心点
- visualMap和地图的使用
- 散点图和地图的结合
地图特点
- 地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异
2.4.8 雷达图-series-radar
有两台手机在5个方面的打分数据如下：
华为
易用性 80、功能 90、拍照 70、跑分 92、续航 85
OPPO
易用性 90、功能 80、拍照 90、跑分 70、续航 90
实现步骤
-
Echarts最基本的代码结构
-
定义各个维度的最大值
indicator:[{name: ‘易用性’,max: 100},…]
-
准备具体产品的数据
data:[{name:‘华为’,value:[80,90,70,92,85]},…]
-
图表类型：
在series下设置type:radar
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雷达图</title> <!--引入js--> <script src="lib/echarts.min.js"></script> </head> <body> <!--准备一个盒子--> <div style="width: 800px;height: 600px"></div> </body> <script> //初始化一个echarts实例对象，需要传一个dom参数绑定div盒子 var mEcharts = echarts.init(document.querySelector('div')) var dataMax = [ { name: '易用性', max: 100 }, { name: '功能', max: 100 }, { name: '拍照', max: 100 }, { name: '跑分', max: 100 }, { name: '续航', max: 100 } ] var option = { radar: { indicator: dataMax, // 配置各个维度的最大值 shape: 'polygon' // 配置雷达图最外层的图形 circle polygon }, series: [ //数组，里面有许多对象！一个对象就表示一个图表 { type: 'radar', // radar 此图表时一个雷达图 label: { // 设置标签的样式 show: true // 显示数值 }, areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积 data: [ { name: '华为', value: [80, 90, 70, 92, 75] }, { name: 'OPPO', value: [90, 80, 90, 70, 90] } ] } ] } //将配置项设置给实例 mEcharts.setOption(option) </script> </html>
雷达图的特点
雷达图可以用来分析多个维度的数据与标准数据的对比情况
2.4.9 仪表盘图-series-gauge
仪表盘主要用在进度把控以及数据范围的检测
实现步骤
-
Echarts最基本的代码结构
-
准备数据，设置给series下的data
data:[{value: 55}]
-
图表类型：
在series下设置type:gauge
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仪表盘图</title>
<!--引入js-->
<script src="lib/echarts.min.js"></script>
</head>
<body>
<!--准备一个盒子-->
<div style="width: 800px;height: 600px"></div>
</body>
<script>
//初始化一个echarts实例对象，需要传一个dom参数绑定div盒子
var mEcharts = echarts.init(document.querySelector('div'))
var option = {
series: [
//数组，里面有许多对象！一个对象就表示一个图表
{
type: 'gauge',
data: [
//数组，每一个对象代表一个指针
{
value: 55,
//指针样式配置：
itemStyle:{
color: 'red'
}
},
{
value: 60,
//指针样式配置：
itemStyle:{
color: 'green'
}
}
],
min: 50, //设置仪表盘最小值
max: 80 //设置仪表盘最大值
}
]
}
//将配置项设置给实例
mEcharts.setOption(option)
</script>
</html>
仪表盘特点
仪表盘可以更直观的表现出某个指标的进度或实际情况
三、ECharts的高级使用
3.1 显示相关
3.1.1 主题
内置主题
-
Echarts中默认内置了两套主题：light、dark
-
在初始化对象方法init中可以指明
var chat = echarts.init(dom,‘light’);
var chat = echarts.init(dom,‘dark’);
//初始化一个echarts实例对象，第一个dom参数绑定div盒子,第二个参数代表需要使用哪一套主题 //默认内置了两套主题，light、dark var mEcharts = echarts.init(document.querySelector('div')/*,'light'*/,'dark')
自定义主题
-
在主题编辑器中编辑主题：https://echarts.apache.org/zh/theme-builder.html
-
下载主题，是一个js文件
-
引入主题js文件
-
在init方法中使用主题（ps：传入的第二个参数名字不取决于js文件名）
var mEcharts = echarts.init(document.querySelector('div'),'chalk')
3.1.2 调色盘
它是一组颜色，图形、系列会自动从其中选择颜色
-
主题调色盘
-
全局调色盘：如果配置了会覆盖主题中的调色盘
option:{ color:['red','green','blue'] } -
局部调色盘：如果设置了会覆盖全局调色盘
series:[ { type: 'pie', data: pieData, color:['pink','yellow','orange','red','black'], selectedOffset: 30 //选中偏离量 } -
调色盘的作用遵循就近原则
3.1.3 颜色渐变
-
线性渐变
itemStyle:{ //color: 'blue' //可控制柱的颜色 color: { type: 'linear', //线性渐变 //(0,0)-(0,1):渐变方向为从上到下 x:0, y:0, x2:0, y2:1, //渐变颜色 colorStops:[ { offset:0,color: 'red' //0%处的颜色为红色 }, { offset:1,color: 'blue' //100%处的颜色为红色 } ] } }, -
径向渐变
//径向渐变 color: { type: 'radial', //径向渐变 //(0.5,0.5)-(0.5):渐变方向为从圆心向外扩散 x:0.5, y:0.5, r:0.5, //半径 //渐变颜色 colorStops:[ { offset:0,color: 'red' //0%处的颜色为红色 }, { offset:1,color: 'blue' //100%处的颜色为红色 } ] }
3.1.4 样式
-
直接样式
itemStyle、textStyle、lineStyle、areaStyle、label
例：
var pieData = [ { name: '淘宝', value: 5000, //可控制淘宝这一区域的样式 itemStyle:{ color:'green' }, //控制文字样式 label: { color: 'pink' } } ] -
高亮样式
在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle、label
var pieData = [ { name: '淘宝', value: 5000, //可控制淘宝这一区域的样式 itemStyle:{ color:'green' }, //控制文字样式 label: { color: 'pink' }, //高亮样式 emphasis:{ itemStyle:{ color:'yellow' } } } ]
样式的优先级高，会覆盖主题中调色盘的效果
3.1.5 图标自适应实现
当浏览器的大小发生变化是，如果想让图表也能随之适配变化
- 监听窗口大小变化的事件
- 在时间处理函数中调用Echarts实例对象的resize即可
/* //监听窗口大小变化
window.onresize = function () {
//console.log('window.onresize') //当窗口变化的时候，回调函数里面的内容将会执行
//调用echarts实例对象的resize方法
mEcharts.resize()
}*/
window.onresize = mEcharts.resize()
3.2 动画的使用
3.2.1 图表加载动画的实现
Echarts已经内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可
-
显示加载动画
mCharts.showLoading()
-
隐藏加载动画
mCharts.hideLoading()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图表的加载动画</title> <!--引入js--> <script src="../lib/echarts.min.js"></script> <script src="../lib/jquery.min.js"></script> </head> <body> <!--准备一个盒子--> <div style="width: 1000px;height: 600px"></div> </body> <script> //初始化一个echarts实例对象，需要传一个dom参数绑定div盒子 var mEcharts = echarts.init(document.querySelector('div')) //x轴数据，可设置成变量 //var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157, "weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 59 }, { "gender": "female", "height": 159.1, "weight": 47.6 }, { "gender": "female", "height": 166, "weight": 69.8 }, { "gender": "female", "height": 176.2, "weight": 66.8 }, { "gender": "female", "height": 160.2, "weight": 75.2 }, { "gender": "female", "height": 172.5, "weight": 55.2 }, { "gender": "female", "height": 170.9, "weight": 54.2 }, { "gender": "female", "height": 172.9, "weight": 62.5 }, { "gender": "female", "height": 153.4, "weight": 42 }, { "gender": "female", "height": 160, "weight": 50 }, { "gender": "female", "height": 147.2, "weight": 49.8 }, { "gender": "female", "height": 168.2, "weight": 49.2 }, { "gender": "female", "height": 175, "weight": 73.2 }, { "gender": "female", "height": 157, "weight": 47.8 }, { "gender": "female", "height": 167.6, "weight": 68.8 }, { "gender": "female", "height": 159.5, "weight": 50.6 }, { "gender": "female", "height": 175, "weight": 82.5 }, { "gender": "female", "height": 166.8, "weight": 57.2 }, { "gender": "female", "height": 176.5, "weight": 87.8 }, { "gender": "female", "height": 170.2, "weight": 72.8 }, { "gender": "female", "height": 174, "weight": 54.5 }, { "gender": "female", "height": 173, "weight": 59.8 }, { "gender": "female", "height": 179.9, "weight": 67.3 }, { "gender": "female", "height": 170.5, "weight": 67.8 }, { "gender": "female", "height": 160, "weight": 47 }, { "gender": "female", "height": 154.4, "weight": 46.2 }, { "gender": "female", "height": 162, "weight": 55 }, { "gender": "female", "height": 176.5, "weight": 83 }, { "gender": "female", "height": 160, "weight": 54.4 }, { "gender": "female", "height": 152, "weight": 45.8 }, { "gender": "female", "height": 162.1, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 73.2 }, { "gender": "female", "height": 160.2, "weight": 52.1 }, { "gender": "female", "height": 161.3, "weight": 67.9 }, { "gender": "female", "height": 166.4, "weight": 56.6 }, { "gender": "female", "height": 168.9, "weight": 62.3 }, { "gender": "female", "height": 163.8, "weight": 58.5 }, { "gender": "female", "height": 167.6, "weight": 54.5 }, { "gender": "female", "height": 160, "weight": 50.2 }, { "gender": "female", "height": 161.3, "weight": 60.3 }, { "gender": "female", "height": 167.6, "weight": 58.3 }, { "gender": "female", "height": 165.1, "weight": 56.2 }, { "gender": "female", "height": 160, "weight": 50.2 }, { "gender": "female", "height": 170, "weight": 72.9 }, { "gender": "female", "height": 157.5, "weight": 59.8 }, { "gender": "female", "height": 167.6, "weight": 61 }, { "gender": "female", "height": 160.7, "weight": 69.1 }, { "gender": "female", "height": 163.2, "weight": 55.9 }, { "gender": "female", "height": 152.4, "weight": 46.5 }, { "gender": "female", "height": 157.5, "weight": 54.3 }, { "gender": "female", "height": 168.3, "weight": 54.8 }, { "gender": "female", "height": 180.3, "weight": 60.7 }, { "gender": "female", "height": 165.5, "weight": 60 }, { "gender": "female", "height": 165, "weight": 62 }, { "gender": "female", "height": 164.5, "weight": 60.3 }, { "gender": "female", "height": 156, "weight": 52.7 }, { "gender": "female", "height": 160, "weight": 74.3 }, { "gender": "female", "height": 163, "weight": 62 }, { "gender": "female", "height": 165.7, "weight": 73.1 }, { "gender": "female", "height": 161, "weight": 80 }, { "gender": "female", "height": 162, "weight": 54.7 }, { "gender": "female", "height": 166, "weight": 53.2 }, { "gender": "female", "height": 174, "weight": 75.7 }, { "gender": "female", "height": 172.7, "weight": 61.1 }, { "gender": "female", "height": 167.6, "weight": 55.7 }, { "gender": "female", "height": 151.1, "weight": 48.7 }, { "gender": "female", "height": 164.5, "weight": 52.3 }, { "gender": "female", "height": 163.5, "weight": 50 }, { "gender": "female", "height": 152, "weight": 59.3 }, { "gender": "female", "height": 169, "weight": 62.5 }, { "gender": "female", "height": 164, "weight": 55.7 }, { "gender": "female", "height": 161.2, "weight": 54.8 }, { "gender": "female", "height": 155, "weight": 45.9 }, { "gender": "female", "height": 170, "weight": 70.6 }, { "gender": "female", "height": 176.2, "weight": 67.2 }, { "gender": "female", "height": 170, "weight": 69.4 }, { "gender": "female", "height": 162.5, "weight": 58.2 }, { "gender": "female", "height": 170.3, "weight": 64.8 }, { "gender": "female", "height": 164.1, "weight": 71.6 }, { "gender": "female", "height": 169.5, "weight": 52.8 }, { "gender": "female", "height": 163.2, "weight": 59.8 }, { "gender": "female", "height": 154.5, "weight": 49 }, { "gender": "female", "height": 159.8, "weight": 50 }, { "gender": "female", "height": 173.2, "weight": 69.2 }, { "gender": "female", "height": 170, "weight": 55.9 }, { "gender": "female", "height": 161.4, "weight": 63.4 }, { "gender": "female", "height": 169, "weight": 58.2 }, { "gender": "female", "height": 166.2, "weight": 58.6 }, { "gender": "female", "height": 159.4, "weight": 45.7 }, { "gender": "female", "height": 162.5, "weight": 52.2 }, { "gender": "female", "height": 159, "weight": 48.6 }, { "gender": "female", "height": 162.8, "weight": 57.8 }, { "gender": "female", "height": 159, "weight": 55.6 }, { "gender": "female", "height": 179.8, "weight": 66.8 }, { "gender": "female", "height": 162.9, "weight": 59.4 }, { "gender": "female", "height": 161, "weight": 53.6 }, { "gender": "female", "height": 151.1, "weight": 73.2 }, { "gender": "female", "height": 168.2, "weight": 53.4 }, { "gender": "female", "height": 168.9, "weight": 69 }, { "gender": "female", "height": 173.2, "weight": 58.4 }, { "gender": "female", "height": 171.8, "weight": 56.2 }, { "gender": "female", "height": 178, "weight": 70.6 }, { "gender": "female", "height": 164.3, "weight": 59.8 }, { "gender": "female", "height": 163, "weight": 72 }, { "gender": "female", "height": 168.5, "weight": 65.2 }, { "gender": "female", "height": 166.8, "weight": 56.6 }, { "gender": "female", "height": 172.7, "weight": 105.2 }, { "gender": "female", "height": 163.5, "weight": 51.8 }, { "gender": "female", "height": 169.4, "weight": 63.4 }, { "gender": "female", "height": 167.8, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 47.6 }, { "gender": "female", "height": 167.6, "weight": 63 }, { "gender": "female", "height": 161.2, "weight": 55.2 }, { "gender": "female", "height": 160, "weight": 45 }, { "gender": "female", "height": 163.2, "weight": 54 }, { "gender": "female", "height": 162.2, "weight": 50.2 }, { "gender": "female", "height": 161.3, "weight": 60.2 }, { "gender": "female", "height": 149.5, "weight": 44.8 }, { "gender": "female", "height": 157.5, "weight": 58.8 }, { "gender": "female", "height": 163.2, "weight": 56.4 }, { "gender": "female", "height": 172.7, "weight": 62 }, { "gender": "female", "height": 155, "weight": 49.2 }, { "gender": "female", "height": 156.5, "weight": 67.2 }, { "gender": "female", "height": 164, "weight": 53.8 }, { "gender": "female", "height": 160.9, "weight": 54.4 }, { "gender": "female", "height": 162.8, "weight": 58 }, { "gender": "female", "height": 167, "weight": 59.8 }, { "gender": "female", "height": 160, "weight": 54.8 }, { "gender": "female", "height": 160, "weight": 43.2 }, { "gender": "female", "height": 168.9, "weight": 60.5 }, { "gender": "female", "height": 158.2, "weight": 46.4 }, { "gender": "female", "height": 156, "weight": 64.4 }, { "gender": "female", "height": 160, "weight": 48.8 }, { "gender": "female", "height": 167.1, "weight": 62.2 }, { "gender": "female", "height": 158, "weight": 55.5 }, { "gender": "female", "height": 167.6, "weight": 57.8 }, { "gender": "female", "height": 156, "weight": 54.6 }, { "gender": "female", "height": 162.1, "weight": 59.2 }, { "gender": "female", "height": 173.4, "weight": 52.7 }, { "gender": "female", "height": 159.8, "weight": 53.2 }, { "gender": "female", "height": 170.5, "weight": 64.5 }, { "gender": "female", "height": 159.2, "weight": 51.8 }, { "gender": "female", "height": 157.5, "weight": 56 }, { "gender": "female", "height": 161.3, "weight": 63.6 }, { "gender": "female", "height": 162.6, "weight": 63.2 }, { "gender": "female", "height": 160, "weight": 59.5 }, { "gender": "female", "height": 168.9, "weight": 56.8 }, { "gender": "female", "height": 165.1, "weight": 64.1 }, { "gender": "female", "height": 162.6, "weight": 50 }, { "gender": "female", "height": 165.1, "weight": 72.3 }, { "gender": "female", "height": 166.4, "weight": 55 }, { "gender": "female", "height": 160, "weight": 55.9 }, { "gender": "female", "height": 152.4, "weight": 60.4 }, { "gender": "female", "height": 170.2, "weight": 69.1 }, { "gender": "female", "height": 162.6, "weight": 84.5 }, { "gender": "female", "height": 170.2, "weight": 55.9 }, { "gender": "female", "height": 158.8, "weight": 55.5 }, { "gender": "female", "height": 172.7, "weight": 69.5 }, { "gender": "female", "height": 167.6, "weight": 76.4 }, { "gender": "female", "height": 162.6, "weight": 61.4 }, { "gender": "female", "height": 167.6, "weight": 65.9 }, { "gender": "female", "height": 156.2, "weight": 58.6 }, { "gender": "female", "height": 175.2, "weight": 66.8 }, { "gender": "female", "height": 172.1, "weight": 56.6 }, { "gender": "female", "height": 162.6, "weight": 58.6 }, { "gender": "female", "height": 160, "weight": 55.9 }, { "gender": "female", "height": 165.1, "weight": 59.1 }, { "gender": "female", "height": 182.9, "weight": 81.8 }, { "gender": "female", "height": 166.4, "weight": 70.7 }, { "gender": "female", "height": 165.1, "weight": 56.8 }, { "gender": "female", "height": 177.8, "weight": 60 }, { "gender": "female", "height": 165.1, "weight": 58.2 }, { "gender": "female", "height": 175.3, "weight": 72.7 }, { "gender": "female", "height": 154.9, "weight": 54.1 }, { "gender": "female", "height": 158.8, "weight": 49.1 }, { "gender": "female", "height": 172.7, "weight": 75.9 }, { "gender": "female", "height": 168.9, "weight": 55 }, { "gender": "female", "height": 161.3, "weight": 57.3 }, { "gender": "female", "height": 167.6, "weight": 55 }, { "gender": "female", "height": 165.1, "weight": 65.5 }, { "gender": "female", "height": 175.3, "weight": 65.5 }, { "gender": "female", "height": 157.5, "weight": 48.6 }, { "gender": "female", "height": 163.8, "weight": 58.6 }, { "gender": "female", "height": 167.6, "weight": 63.6 }, { "gender": "female", "height": 165.1, "weight": 55.2 }, { "gender": "female", "height": 165.1, "weight": 62.7 }, { "gender": "female", "height": 168.9, "weight": 56.6 }, { "gender": "female", "height": 162.6, "weight": 53.9 }, { "gender": "female", "height": 164.5, "weight": 63.2 }, { "gender": "female", "height": 176.5, "weight": 73.6 }, { "gender": "female", "height": 168.9, "weight": 62 }, { "gender": "female", "height": 175.3, "weight": 63.6 }, { "gender": "female", "height": 159.4, "weight": 53.2 }, { "gender": "female", "height": 160, "weight": 53.4 }, { "gender": "female", "height": 170.2, "weight": 55 }, { "gender": "female", "height": 162.6, "weight": 70.5 }, { "gender": "female", "height": 167.6, "weight": 54.5 }, { "gender": "female", "height": 162.6, "weight": 54.5 }, { "gender": "female", "height": 160.7, "weight": 55.9 }, { "gender": "female", "height": 160, "weight": 59 }, { "gender": "female", "height": 157.5, "weight": 63.6 }, { "gender": "female", "height": 162.6, "weight": 54.5 }, { "gender": "female", "height": 152.4, "weight": 47.3 }, { "gender": "female", "height": 170.2, "weight": 67.7 }, { "gender": "female", "height": 165.1, "weight": 80.9 }, { "gender": "female", "height": 172.7, "weight": 70.5 }, { "gender": "female", "height": 165.1, "weight": 60.9 }, { "gender": "female", "height": 170.2, "weight": 63.6 }, { "gender": "female", "height": 170.2, "weight": 54.5 }, { "gender": "female", "height": 170.2, "weight": 59.1 }, { "gender": "female", "height": 161.3, "weight": 70.5 }, { "gender": "female", "height": 167.6, "weight": 52.7 }, { "gender": "female", "height": 167.6, "weight": 62.7 }, { "gender": "female", "height": 165.1, "weight": 86.3 }, { "gender": "female", "height": 162.6, "weight": 66.4 }, { "gender": "female", "height": 152.4, "weight": 67.3 }, { "gender": "female", "height": 168.9, "weight": 63 }, { "gender": "female", "height": 170.2, "weight": 73.6 }, { "gender": "female", "height": 175.2, "weight": 62.3 }, { "gender": "female", "height": 175.2, "weight": 57.7 }, { "gender": "female", "height": 160, "weight": 55.4 }, { "gender": "female", "height": 165.1, "weight": 104.1 }, { "gender": "female", "height": 174, "weight": 55.5 }, { "gender": "female", "height": 170.2, "weight": 77.3 }, { "gender": "female", "height": 160, "weight": 80.5 }, { "gender": "female", "height": 167.6, "weight": 64.5 }, { "gender": "female", "height": 167.6, "weight": 72.3 }, { "gender": "female", "height": 167.6, "weight": 61.4 }, { "gender": "female", "height": 154.9, "weight": 58.2 }, { "gender": "female", "height": 162.6, "weight": 81.8 }, { "gender": "female", "height": 175.3, "weight": 63.6 }, { "gender": "female", "height": 171.4, "weight": 53.4 }, { "gender": "female", "height": 157.5, "weight": 54.5 }, { "gender": "female", "height": 165.1, "weight": 53.6 }, { "gender": "female", "height": 160, "weight": 60 }, { "gender": "female", "height": 174, "weight": 73.6 }, { "gender": "female", "height": 162.6, "weight": 61.4 }, { "gender": "female", "height": 174, "weight": 55.5 }, { "gender": "female", "height": 162.6, "weight": 63.6 }, { "gender": "female", "height": 161.3, "weight": 60.9 }, { "gender": "female", "height": 156.2, "weight": 60 }, { "gender": "female", "height": 149.9, "weight": 46.8 }, { "gender": "female", "height": 169.5, "weight": 57.3 }, { "gender": "female", "height": 160, "weight": 64.1 }, { "gender": "female", "height": 175.3, "weight": 63.6 }, { "gender": "female", "height": 169.5, "weight": 67.3 }, { "gender": "female", "height": 160, "weight": 75.5 }, { "gender": "female", "height": 172.7, "weight": 68.2 }, { "gender": "female", "height": 162.6, "weight": 61.4 }, { "gender": "female", "height": 157.5, "weight": 76.8 }, { "gender": "female", "height": 176.5, "weight": 71.8 }, { "gender": "female", "height": 164.4, "weight": 55.5 }, { "gender": "female", "height": 160.7, "weight": 48.6 }, { "gender": "female", "height": 174, "weight": 66.4 }, { "gender": "female", "height": 163.8, "weight": 67.3 }, { "gender": "male", "height": 174, "weight": 65.6 }, { "gender": "male", "height": 175.3, "weight": 71.8 }, { "gender": "male", "height": 193.5, "weight": 80.7 }, { "gender": "male", "height": 186.5, "weight": 72.6 }, { "gender": "male", "height": 187.2, "weight": 78.8 }, { "gender": "male", "height": 181.5, "weight": 74.8 }, { "gender": "male", "height": 184, "weight": 86.4 }, { "gender": "male", "height": 184.5, "weight": 78.4 }, { "gender": "male", "height": 175, "weight": 62 }, { "gender": "male", "height": 184, "weight": 81.6 }, { "gender": "male", "height": 180, "weight": 76.6 }, { "gender": "male", "height": 177.8, "weight": 83.6 }, { "gender": "male", "height": 192, "weight": 90 }, { "gender": "male", "height": 176, "weight": 74.6 }, { "gender": "male", "height": 174, "weight": 71 }, { "gender": "male", "height": 184, "weight": 79.6 }, { "gender": "male", "height": 192.7, "weight": 93.8 }, { "gender": "male", "height": 171.5, "weight": 70 }, { "gender": "male", "height": 173, "weight": 72.4 }, { "gender": "male", "height": 176, "weight": 85.9 }, { "gender": "male", "height": 176, "weight": 78.8 }, { "gender": "male", "height": 180.5, "weight": 77.8 }, { "gender": "male", "height": 172.7, "weight": 66.2 }, { "gender": "male", "height": 176, "weight": 86.4 }, { "gender": "male", "height": 173.5, "weight": 81.8 }, { "gender": "male", "height": 178, "weight": 89.6 }, { "gender": "male", "height": 180.3, "weight": 82.8 }, { "gender": "male", "height": 180.3, "weight": 76.4 }, { "gender": "male", "height": 164.5, "weight": 63.2 }, { "gender": "male", "height": 173, "weight": 60.9 }, { "gender": "male", "height": 183.5, "weight": 74.8 }, { "gender": "male", "height": 175.5, "weight": 70 }, { "gender": "male", "height": 188, "weight": 72.4 }, { "gender": "male", "height": 189.2, "weight": 84.1 }, { "gender": "male", "height": 172.8, "weight": 69.1 }, { "gender": "male", "height": 170, "weight": 59.5 }, { "gender": "male", "height": 182, "weight": 67.2 }, { "gender": "male", "height": 170, "weight": 61.3 }, { "gender": "male", "height": 177.8, "weight": 68.6 }, { "gender": "male", "height": 184.2, "weight": 80.1 }, { "gender": "male", "height": 186.7, "weight": 87.8 }, { "gender": "male", "height": 171.4, "weight": 84.7 }, { "gender": "male", "height": 172.7, "weight": 73.4 }, { "gender": "male", "height": 175.3, "weight": 72.1 }, { "gender": "male", "height": 180.3, "weight": 82.6 }, { "gender": "male", "height": 182.9, "weight": 88.7 }, { "gender": "male", "height": 188, "weight": 84.1 }, { "gender": "male", "height": 177.2, "weight": 94.1 }, { "gender": "male", "height": 172.1, "weight": 74.9 }, { "gender": "male", "height": 167, "weight": 59.1 }, { "gender": "male", "height": 169.5, "weight": 75.6 }, { "gender": "male", "height": 174, "weight": 86.2 }, { "gender": "male", "height": 172.7, "weight": 75.3 }, { "gender": "male", "height": 182.2, "weight": 87.1 }, { "gender": "male", "height": 164.1, "weight": 55.2 }, { "gender": "male", "height": 163, "weight": 57 }, { "gender": "male", "height": 171.5, "weight": 61.4 }, { "gender": "male", "height": 184.2, "weight": 76.8 }, { "gender": "male", "height": 174, "weight": 86.8 }, { "gender": "male", "height": 174, "weight": 72.2 }, { "gender": "male", "height": 177, "weight": 71.6 }, { "gender": "male", "height": 186, "weight": 84.8 }, { "gender": "male", "height": 167, "weight": 68.2 }, { "gender": "male", "height": 171.8, "weight": 66.1 }, { "gender": "male", "height": 182, "weight": 72 }, { "gender": "male", "height": 167, "weight": 64.6 }, { "gender": "male", "height": 177.8, "weight": 74.8 }, { "gender": "male", "height": 164.5, "weight": 70 }, { "gender": "male", "height": 192, "weight": 101.6 }, { "gender": "male", "height": 175.5, "weight": 63.2 }, { "gender": "male", "height": 171.2, "weight": 79.1 }, { "gender": "male", "height": 181.6, "weight": 78.9 }, { "gender": "male", "height": 167.4, "weight": 67.7 }, { "gender": "male", "height": 181.1, "weight": 66 }, { "gender": "male", "height": 177, "weight": 68.2 }, { "gender": "male", "height": 174.5, "weight": 63.9 }, { "gender": "male", "height": 177.5, "weight": 72 }, { "gender": "male", "height": 170.5, "weight": 56.8 }, { "gender": "male", "height": 182.4, "weight": 74.5 }, { "gender": "male", "height": 197.1, "weight": 90.9 }, { "gender": "male", "height": 180.1, "weight": 93 }, { "gender": "male", "height": 175.5, "weight": 80.9 }, { "gender": "male", "height": 180.6, "weight": 72.7 }, { "gender": "male", "height": 184.4, "weight": 68 }, { "gender": "male", "height": 175.5, "weight": 70.9 }, { "gender": "male", "height": 180.6, "weight": 72.5 }, { "gender": "male", "height": 177, "weight": 72.5 }, { "gender": "male", "height": 177.1, "weight": 83.4 }, { "gender": "male", "height": 181.6, "weight": 75.5 }, { "gender": "male", "height": 176.5, "weight": 73 }, { "gender": "male", "height": 175, "weight": 70.2 }, { "gender": "male", "height": 174, "weight": 73.4 }, { "gender": "male", "height": 165.1, "weight": 70.5 }, { "gender": "male", "height": 177, "weight": 68.9 }, { "gender": "male", "height": 192, "weight": 102.3 }, { "gender": "male", "height": 176.5, "weight": 68.4 }, { "gender": "male", "height": 169.4, "weight": 65.9 }, { "gender": "male", "height": 182.1, "weight": 75.7 }, { "gender": "male", "height": 179.8, "weight": 84.5 }, { "gender": "male", "height": 175.3, "weight": 87.7 }, { "gender": "male", "height": 184.9, "weight": 86.4 }, { "gender": "male", "height": 177.3, "weight": 73.2 }, { "gender": "male", "height": 167.4, "weight": 53.9 }, { "gender": "male", "height": 178.1, "weight": 72 }, { "gender": "male", "height": 168.9, "weight": 55.5 }, { "gender": "male", "height": 157.2, "weight": 58.4 }, { "gender": "male", "height": 180.3, "weight": 83.2 }, { "gender": "male", "height": 170.2, "weight": 72.7 }, { "gender": "male", "height": 177.8, "weight": 64.1 }, { "gender": "male", "height": 172.7, "weight": 72.3 }, { "gender": "male", "height": 165.1, "weight": 65 }, { "gender": "male", "height": 186.7, "weight": 86.4 }, { "gender": "male", "height": 165.1, "weight": 65 }, { "gender": "male", "height": 174, "weight": 88.6 }, { "gender": "male", "height": 175.3, "weight": 84.1 }, { "gender": "male", "height": 185.4, "weight": 66.8 }, { "gender": "male", "height": 177.8, "weight": 75.5 }, { "gender": "male", "height": 180.3, "weight": 93.2 }, { "gender": "male", "height": 180.3, "weight": 82.7 }, { "gender": "male", "height": 177.8, "weight": 58 }, { "gender": "male", "height": 177.8, "weight": 79.5 }, { "gender": "male", "height": 177.8, "weight": 78.6 }, { "gender": "male", "height": 177.8, "weight": 71.8 }, { "gender": "male", "height": 177.8, "weight": 116.4 }, { "gender": "male", "height": 163.8, "weight": 72.2 }, { "gender": "male", "height": 188, "weight": 83.6 }, { "gender": "male", "height": 198.1, "weight": 85.5 }, { "gender": "male", "height": 175.3, "weight": 90.9 }, { "gender": "male", "height": 166.4, "weight": 85.9 }, { "gender": "male", "height": 190.5, "weight": 89.1 }, { "gender": "male", "height": 166.4, "weight": 75 }, { "gender": "male", "height": 177.8, "weight": 77.7 }, { "gender": "male", "height": 179.7, "weight": 86.4 }, { "gender": "male", "height": 172.7, "weight": 90.9 }, { "gender": "male", "height": 190.5, "weight": 73.6 }, { "gender": "male", "height": 185.4, "weight": 76.4 }, { "gender": "male", "height": 168.9, "weight": 69.1 }, { "gender": "male", "height": 167.6, "weight": 84.5 }, { "gender": "male", "height": 175.3, "weight": 64.5 }, { "gender": "male", "height": 170.2, "weight": 69.1 }, { "gender": "male", "height": 190.5, "weight": 108.6 }, { "gender": "male", "height": 177.8, "weight": 86.4 }, { "gender": "male", "height": 190.5, "weight": 80.9 }, { "gender": "male", "height": 177.8, "weight": 87.7 }, { "gender": "male", "height": 184.2, "weight": 94.5 }, { "gender": "male", "height": 176.5, "weight": 80.2 }, { "gender": "male", "height": 177.8, "weight": 72 }, { "gender": "male", "height": 180.3, "weight": 71.4 }, { "gender": "male", "height": 171.4, "weight": 72.7 }, { "gender": "male", "height": 172.7, "weight": 84.1 }, { "gender": "male", "height": 172.7, "weight": 76.8 }, { "gender": "male", "height": 177.8, "weight": 63.6 }, { "gender": "male", "height": 177.8, "weight": 80.9 }, { "gender": "male", "height": 182.9, "weight": 80.9 }, { "gender": "male", "height": 170.2, "weight": 85.5 }, { "gender": "male", "height": 167.6, "weight": 68.6 }, { "gender": "male", "height": 175.3, "weight": 67.7 }, { "gender": "male", "height": 165.1, "weight": 66.4 }, { "gender": "male", "height": 185.4, "weight": 102.3 }, { "gender": "male", "height": 181.6, "weight": 70.5 }, { "gender": "male", "height": 172.7, "weight": 95.9 }, { "gender": "male", "height": 190.5, "weight": 84.1 }, { "gender": "male", "height": 179.1, "weight": 87.3 }, { "gender": "male", "height": 175.3, "weight": 71.8 }, { "gender": "male", "height": 170.2, "weight": 65.9 }, { "gender": "male", "height": 193, "weight": 95.9 }, { "gender": "male", "height": 171.4, "weight": 91.4 }, { "gender": "male", "height": 177.8, "weight": 81.8 }, { "gender": "male", "height": 177.8, "weight": 96.8 }, { "gender": "male", "height": 167.6, "weight": 69.1 }, { "gender": "male", "height": 167.6, "weight": 82.7 }, { "gender": "male", "height": 180.3, "weight": 75.5 }, { "gender": "male", "height": 182.9, "weight": 79.5 }, { "gender": "male", "height": 176.5, "weight": 73.6 }, { "gender": "male", "height": 186.7, "weight": 91.8 }, { "gender": "male", "height": 188, "weight": 84.1 }, { "gender": "male", "height": 188, "weight": 85.9 }, { "gender": "male", "height": 177.8, "weight": 81.8 }, { "gender": "male", "height": 174, "weight": 82.5 }, { "gender": "male", "height": 177.8, "weight": 80.5 }, { "gender": "male", "height": 171.4, "weight": 70 }, { "gender": "male", "height": 185.4, "weight": 81.8 }, { "gender": "male", "height": 185.4, "weight": 84.1 }, { "gender": "male", "height": 188, "weight": 90.5 }, { "gender": "male", "height": 188, "weight": 91.4 }, { "gender": "male", "height": 182.9, "weight": 89.1 }, { "gender": "male", "height": 176.5, "weight": 85 }, { "gender": "male", "height": 175.3, "weight": 69.1 }, { "gender": "male", "height": 175.3, "weight": 73.6 }, { "gender": "male", "height": 188, "weight": 80.5 }, { "gender": "male", "height": 188, "weight": 82.7 }, { "gender": "male", "height": 175.3, "weight": 86.4 }, { "gender": "male", "height": 170.5, "weight": 67.7 }, { "gender": "male", "height": 179.1, "weight": 92.7 }, { "gender": "male", "height": 177.8, "weight": 93.6 }, { "gender": "male", "height": 175.3, "weight": 70.9 }, { "gender": "male", "height": 182.9, "weight": 75 }, { "gender": "male", "height": 170.8, "weight": 93.2 }, { "gender": "male", "height": 188, "weight": 93.2 }, { "gender": "male", "height": 180.3, "weight": 77.7 }, { "gender": "male", "height": 177.8, "weight": 61.4 }, { "gender": "male", "height": 185.4, "weight": 94.1 }, { "gender": "male", "height": 168.9, "weight": 75 }, { "gender": "male", "height": 185.4, "weight": 83.6 }, { "gender": "male", "height": 180.3, "weight": 85.5 }, { "gender": "male", "height": 174, "weight": 73.9 }, { "gender": "male", "height": 167.6, "weight": 66.8 }, { "gender": "male", "height": 182.9, "weight": 87.3 }, { "gender": "male", "height": 160, "weight": 72.3 }, { "gender": "male", "height": 180.3, "weight": 88.6 }, { "gender": "male", "height": 167.6, "weight": 75.5 }, { "gender": "male", "height": 186.7, "weight": 101.4 }, { "gender": "male", "height": 175.3, "weight": 91.1 }, { "gender": "male", "height": 175.3, "weight": 67.3 }, { "gender": "male", "height": 175.9, "weight": 77.7 }, { "gender": "male", "height": 175.3, "weight": 81.8 }, { "gender": "male", "height": 179.1, "weight": 75.5 }, { "gender": "male", "height": 181.6, "weight": 84.5 }, { "gender": "male", "height": 177.8, "weight": 76.6 }, { "gender": "male", "height": 182.9, "weight": 85 }, { "gender": "male", "height": 177.8, "weight": 102.5 }, { "gender": "male", "height": 184.2, "weight": 77.3 }, { "gender": "male", "height": 179.1, "weight": 71.8 }, { "gender": "male", "height": 176.5, "weight": 87.9 }, { "gender": "male", "height": 188, "weight": 94.3 }, { "gender": "male", "height": 174, "weight": 70.9 }, { "gender": "male", "height": 167.6, "weight": 64.5 }, { "gender": "male", "height": 170.2, "weight": 77.3 }, { "gender": "male", "height": 167.6, "weight": 72.3 }, { "gender": "male", "height": 188, "weight": 87.3 }, { "gender": "male", "height": 174, "weight": 80 }, { "gender": "male", "height": 176.5, "weight": 82.3 }, { "gender": "male", "height": 180.3, "weight": 73.6 }, { "gender": "male", "height": 167.6, "weight": 74.1 }, { "gender": "male", "height": 188, "weight": 85.9 }, { "gender": "male", "height": 180.3, "weight": 73.2 }, { "gender": "male", "height": 167.6, "weight": 76.3 }, { "gender": "male", "height": 183, "weight": 65.9 }, { "gender": "male", "height": 183, "weight": 90.9 }, { "gender": "male", "height": 179.1, "weight": 89.1 }, { "gender": "male", "height": 170.2, "weight": 62.3 }, { "gender": "male", "height": 177.8, "weight": 82.7 }, { "gender": "male", "height": 179.1, "weight": 79.1 }, { "gender": "male", "height": 190.5, "weight": 98.2 }, { "gender": "male", "height": 177.8, "weight": 84.1 }, { "gender": "male", "height": 180.3, "weight": 83.2 }, { "gender": "male", "height": 180.3, "weight": 83.2 }] /*var axisData = [] for (var i = 0; i < data.length; i++) { var height = data[i].height var weight = data[i].weight var newArr = [height,weight] axisData.push(newArr) }*/ //获取数据之前设置加载动画 mEcharts.showLoading() //通过ajax进行访问json数据 $.get('../data/data.json',function (ret) { console.log(ret) mEcharts.hideLoading() //当服务器数据获取成功之后，隐藏加载动画 var axisData = [] for (var i = 0; i < ret.length; i++) { var height = ret[i].height var weight = ret[i].weight var newArr = [height, weight] axisData.push(newArr) } console.log(axisData) //准备配置项 var option = { title:{ text: '身高体重散点图' }, //textAlign: 'auto', xAxis:{ type: 'value', name: '身高', scale:true //将scale设置给数值轴 }, yAxis:{ type: 'value', //设置成value，就不需要data了，这个需要在series中去找 name: '体重', scale:true //将scale设置给数值轴 }, series: [ { //type: 'scatter', //散点图 type: 'effectScatter', //涟漪动画效果：会动的散点图 showEffectOn:'emphasis', //render:自动拥有涟漪效果（默认） emphasis:鼠标移到时才会展示 rippleEffect: { //scale: 5 //控制涟漪大小 }, data:axisData, //symbolSize: 50 //控制散点大小 //支持回调函数 symbolSize: function (arg) { //console.log(arg) //return 20 //将会返回，即会控制散点大小 var height = arg[0] / 100 // / 100：使身高以m为单位 var weight = arg[1] //bmi = 体重（kg） / (身高（m）*身高（m）) 大于28，就代表肥胖 var bmi = weight/(height*height) if(bmi > 28){ return 20 } return 5 }, //控制散点颜色 itemStyle:{ //color:'green' //支持回调函数 color:function (arg) { var height = arg.data[0] / 100 // / 100：使身高以m为单位 var weight = arg.data[1] //bmi = 体重（kg） / (身高（m）*身高（m）) 大于28，就代表肥胖 var bmi = weight/(height*height) if(bmi > 28){ return 'red' //肥胖的人呈现红色 } return 'green' //不肥胖的人呈现绿色 } } } ] } //将配置项设置给实例 mEcharts.setOption(option) }) </script> </html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-07ipQGnu-1677636577150)(C:\Users\kevin\AppData\Roaming\Typora\typora-user-images\image-20230227114547190.png)]
3.2.2 图表增量动画
-
mCharts.setOption()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图表增量动画的实现</title> <!--引入js--> <script src="../lib/echarts.min.js"></script> </head> <body> <!--准备一个盒子--> <div style="width: 1000px;height: 600px"></div> <button id="modify">修改数据</button> <button id="add">增加数据</button> </body> <script> //初始化一个echarts实例对象，需要传一个dom参数绑定div盒子 var mEcharts = echarts.init(document.querySelector('div')) var xDataArr = ['张三','李四','王五','赵六','田七','钱八','孙九','苏十'] //x轴数据 var yDataArr = [88,95,59,12,56,91,80,32] //准备配置项 //新的option var option = { title:{ text: 'java成绩' }, //textAlign: 'auto', xAxis:{ type: 'value', //设置成value，就不需要data了，这个需要在series中去找 name: '成绩' }, yAxis:{ type: 'category', name: '姓名', data: xDataArr //x轴数据 }, series: [ { type: 'bar', //柱状图 name: 'java', //java成绩 data: yDataArr, //y轴数据 markPoint: { data:[ { type: 'max',name: '最大值' }, { type: 'min',name: '最小值' } ] }, markLine:{ data:[ { type: 'average',name: '平均值' } ] }, label:{ show: true, rotate: 60, //position: 'inside' position: 'top' }, barWidth: '30%', } ] } //将配置项设置给实例 mEcharts.setOption(option) var btnmodify = document.querySelector('#modify') btnmodify.onclick = function () { var newXDataArr = ['王二小','李四','王五','赵六','田七','钱八','孙九','苏十'] //新旧option的关系并不是相互覆盖的关系，是相互整合的关系；我们在设置新的option的时候，只需要考虑到变化的部分就可以了 //旧的option var option = { yAxis:{ data: newXDataArr //x轴数据 } } //将配置项设置给实例，setOption可以设置多次 mEcharts.setOption(option) } var btnadd = document.querySelector('#add') btnadd.onclick = function () { xDataArr.push('小舒') yDataArr.push(100) var option = { xAxis: { data: xDataArr }, series: [ { data: yDataArr } ] } mEcharts.setOption(option) } </script> </html>
3.2.3 图表动画的配置项
-
开启动画
animation:true
-
动画时长
animationDuration:5000 //以毫秒为单位，支持回调函数
-
缓动动画
//animationEasing: 'linear', animationEasing: 'bounceOut' -
动画阈值，单种形式的元素数量大于这个阈值就会关闭动画
animationThreshold: 8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图表动画的配置项</title>
<!--引入js-->
<script src="../lib/echarts.min.js"></script>
</head>
<body>
<!--准备一个盒子-->
<div style="width: 1000px;height: 600px"></div>
</body>
<script>
//初始化一个echarts实例对象，需要传一个dom参数绑定div盒子
var mEcharts = echarts.init(document.querySelector('div'))
var xDataArr = ['张三','李四','王五','赵六','田七','钱八','孙九','苏十'] //x轴数据
var yDataArr = [88,95,59,12,56,91,80,32]
//准备配置项
var option = {
animation: true, //开启动画效果，默认开启
//animation: false, //关闭动画效果
//animationDuration: 7000,//动画的时长，它是以毫秒为单位的；支持回调函数
animationDirection: function(arg) {
console.log(arg)
return 2000 * arg
},
//animationEasing: 'linear',
animationEasing: 'bounceOut',
animationThreshold: 8,
title:{
text: 'java成绩'
},
//textAlign: 'auto',
xAxis:{
type: 'value', //设置成value，就不需要data了，这个需要在series中去找
name: '成绩'
},
yAxis:{
type: 'category',
name: '姓名',
data: xDataArr //x轴数据
},
series: [
{
type: 'bar', //柱状图
name: 'java', //java成绩
data: yDataArr, //y轴数据
markPoint: {
data:[
{
type: 'max',name: '最大值'
},
{
type: 'min',name: '最小值'
}
]
},
markLine:{
data:[
{
type: 'average',name: '平均值'
}
]
},
label:{
show: true,
rotate: 60,
//position: 'inside'
position: 'top'
},
barWidth: '30%',
}
]
}
//将配置项设置给实例
mEcharts.setOption(option)
</script>
</html>
3.3 交互API
3.3.1 全局的Echarts对象
全局echarts对象是引入echarts.js文件之后就可以直接使用的
例如：echarts.init()方法中的init
-
init：初始化echarts实例对象；使用主题
-
registerTheme：自定义主题时使用，注册主题（只有注册过的主题，才能在in）
-
registerMap：注册地图数据；geo组件使用地图数据
-
connect：
-
一个页面中可以有多个独立的图表
-
每一个图表对应一个Echarts实例对象
-
connect可以实现多个图表进行关联，传入联动目标为Echarts实例对象，支持数组
-
使用场景：
保存图片的自动拼接
刷新按钮
重置按钮
提示框联动、图例选择、数据范围修改等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全局echarts对象常见的方法</title> <!--引入js--> <script src="../lib/echarts.min.js"></script> <script src="../lib/jquery.min.js"></script> </head> <body> <!--准备一个盒子--> <div style="width: 1000px;height: 600px;border: 1px solid red"></div> <div style="width: 1000px;height: 600px;border: 1px solid green" id="div1"></div> </body> <script> //初始化一个echarts实例对象，需要传一个dom参数绑定div盒子 var mEcharts = echarts.init(document.querySelector('div')) var xDataArr = ['张三','李四','王五','赵六','田七','钱八','孙九','苏十'] //x轴数据 var yDataArr = [88,95,59,12,56,91,80,32] //准备配置项 var option = { animation: true, //开启动画效果，默认开启 //animation: false, //关闭动画效果 //animationDuration: 7000,//动画的时长，它是以毫秒为单位的；支持回调函数 animationDirection: function(arg) { console.log(arg) return 2000 * arg }, //animationEasing: 'linear', animationEasing: 'bounceOut', animationThreshold: 8, title:{ text: 'java成绩' }, //textAlign: 'auto', xAxis:{ type: 'value', //设置成value，就不需要data了，这个需要在series中去找 name: '成绩' }, yAxis:{ type: 'category', name: '姓名', data: xDataArr //x轴数据 }, series: [ { type: 'bar', //柱状图 name: 'java', //java成绩 data: yDataArr, //y轴数据 markPoint: { data:[ { type: 'max',name: '最大值' }, { type: 'min',name: '最小值' } ] }, markLine:{ data:[ { type: 'average',name: '平均值' } ] }, label:{ show: true, rotate: 60, //position: 'inside' position: 'top' }, barWidth: '30%', } ] } //将配置项设置给实例 mEcharts.setOption(option) var mEcharts1 = echarts.init(document.querySelector('#div1')) $.get('../json/map/china.json',function (ret) { echarts.registerMap('ChinaMap',ret) var option1 = { geo:{ type: 'map', map: 'ChinaMap' } } mEcharts1.setOption(option1) echarts.connect([mEcharts,mEcharts1]) //将柱状图和地图相关联 }) </script> </html> -
3.3.2 echartsInstance对象：通过全局的echarts对象方法调用之后得到的
例如：mEcharts
var mEcharts = echarts.init(document.querySelector('div'))
-
setOption
- 设置或修改图表实例的配置项以及数据
- 多次调用setOpion方法：合并新的配置项和旧的配置项（增量动画实现处使用过）
-
resize
- 重新计算和绘制图表
- 一般和window对象的resize事件结合使用（图表自适应处使用过）
-
on\off
on
-
绑定或者解绑事件处理函数
-
鼠标事件
常见事件：‘click’、‘dblclick’、‘mousedown’等
事件参数arg：和事件相关的数据信息
-
Echarts事件
legendselectchanged、dataZoom
事件参数arg：和事件相关的数据信息
off
mEcharts.off('click') //解绑click事件 -
-
dispatchAction
- 触发某些行为
- 使用代码模拟用户的行为：点击按钮进行图表高亮展示等
myChart.dispatchAction({ type: 'takeGlobalCursor', key: 'dataZoomSelect', // 启动或关闭 dataZoomSelectActive: true });
-
clear
- 清空当前实例，会移除实例中所有的组件和图表
- 清空之后可以再次setOption()
-
dispose
- 销毁实例，销毁之后不能再次setOption
