ECharts的快速上手
ECharts 的入门使用特别简单, 5分钟就能够上手. 他大体分为这几个步骤
- 步骤1：引入 echarts.js 文件
echarts是一个 js 的库，当然得先引入这个库文件
<script src="js/echarts.min.js"></script>
- 步骤2：准备一个呈现图表的盒子
这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里
<div id="main" style="width: 600px;height:400px;"></div>
步骤3：初始化 echarts 实例对象
在这个步骤中, 需要指明图表最终显示在哪里的DOM元素
var myChart = echarts.init(document.getElementById('main'))
步骤4：准备配置项
这步很关键，我们最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的
var option = {
xAxis: {
type: 'category',
data: ['小明', '小红', '小王']
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: [70, 92, 87],
}
]
}
步骤5：将配置项设置给 echarts 实例对象
myChart.setOption(option)
通过简单的5个步骤, 就能够把一个简单的柱状图给显示在网页中了.这几个步骤中, 步骤4最重要,
一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表, 除了配置项会发生改变之外,
其他的代码 都是固定不变的.
相关配置
- xAxis
直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
呈现 - yAxis
直角坐标系 中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
series 下找数据进行图表的绘制 - series
系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据
配置项都是以键值对的形式存在, 并且配置项有很多, ECharts 的学习大多是针对于这些配置项的, 对于
配置项的学习, 大家可以不用死记硬背, 需要的时候查一查官方文档即可. 网址:
https://echarts.apache.org/zh/option.html , 常用的配置项多用几次, 你自然而然就记下了 - 以title为例
title: {
show: true,
text: '标题',
link: 'http://www.itcast.cn',
textStyle: {
color: 'red'
}
}
通用配置
- 使用 ECharts 绘制出来的图表, 都天生就自带一些功能, 这些功能是每一个图表都具备的, 我们可以通过
配置, 对这些功能进行设置. - 1.标题: title
var option = {
title: {
text: "成绩", // 标题文字
textStyle: {
color: 'red' // 文字颜色
},
borderWidth: 5, // 标题边框
borderColor: 'green', // 标题边框颜色
borderRadius: 5, // 标题边框圆角
left: 20, // 标题的位置
top: 20 // 标题的位置
}
}
image.png
- 2提示框: tooltip
tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框 - 触发类型: trigger
可选值有item\axis
触发时机: triggerOn
可选值有 mouseOver\click
格式化显示: formatter
字符串模板
var option = {
tooltip: {
trigger: 'item',
triggerOn: 'click',
formatter: '{b}:{c}'
}
}
// 这个{b} 和 {c} 所代表的含义不需要去记, 在官方文档中有详细的描述
image.png
回调函数
var option = {
tooltip: {
trigger: 'item',
triggerOn: 'click',
formatter: function (arg) {
return arg.name + ':' + arg.data
}
}
}
image.png
3.工具按钮: toolbox
toolbox 是 ECharts 提供的工具栏, 内置有 导出图片，数据视图, 重置, 数据区域缩放, 动态类型切
换五个工具
工具栏的按钮是配置在 feature 的节点之下
var option = {
toolbox: {
feature: {
saveAsImage: {}, // 将图表保存为图片
dataView: {}, // 是否显示出原始数据
restore: {}, // 还原图表
dataZoom: {}, // 数据缩放
magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
type: ['bar', 'line']
}
}
}
}
image.png
5.图例: legend
legend 是图例,用于筛选类别,需要和 series 配合使用
legend 中的 data 是一个数组
legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致
var option = {
legend: {
data: ['语文', '数学']
},
xAxis: {
type: 'category',
data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: [88, 92, 63, 77, 94, 80, 72, 86]
}, {
name: '数学',
type: 'bar',
data: [93, 60, 61, 82, 95, 70, 71, 86]
}
]
}
image.png
折线图的实现步骤
- 1 ECharts 最基本的代码结构
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var option = {}
mCharts.setOption(option)
</script>
</body>
</html>
此时 option 是一个空空如也的对象
- 2 准备 x 轴的数据
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
'10月', '11月', '12月']
- 3 准备 y 轴的数据
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800,
600]
4 准备 option , 将 series 中的 type 的值设置为: line
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
data: yDataArr
}
]
}
image.png
折线图的常见效果
最大值\最小值
var option = {
series: [
{
data: [
{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}
]
}
}
image.png
- 平均值 markLine
var option = {
series: [
{
......
markLine: {
data: [
{
type: 'average',
name: '平均值'
}
]
}
}
]
}
image.png
- 标注区间 markArea
var option = {
series: [
{
......
markArea: {
data: [
[
{
xAxis: '1月'
}, {
xAxis: '2月'
}
],
[
{
xAxis: '7月'
}, {
xAxis: '8月'
}
]
]
}
}
]
}
image.png
线条控制
- 1.平滑线条 smooth
var option = {
series: [
{
......
smooth: true
}
]
}
image.png
- 线条样式 lineStyle
var option = {
series: [
{
......
smooth: true,
lineStyle: {
color: 'green',
type: 'dashed' // 可选值还有 dotted solid
}
}
]
}
image.png
- 填充风格 areaStyle
var option = {
series: [
{
type: 'line',
data: yDataArr,
areaStyle: {
color: 'pink'
}
}
]
}
image.png
- 紧挨边缘 boundaryGap
boundaryGap 是设置给 x 轴的, 让起点从 x 轴的0坐标开始
var option = {
xAxis: {
type: 'category',
data: xDataArr,
boundaryGap: false
}
}
image.png
- 缩放, 脱离0值比例
如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况
var yDataArr = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005,
3004, 3001, 3009] // 此时y轴的数据都在3000附近, 每个数之间相差不多
image.png
这显然不是我们想要的效果, 因此可以配置上 scale , 让其摆脱0值比例
scale 配置
scale 应该配置给 y 轴
var option = {
yAxis: {
type: 'value',
scale: true
}
}
image.png
堆叠图
堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加
如果在一个图表中有两个或者多个折线图, 在没有使用堆叠配置的时候, 效果如下:
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
var yDataArr1 = [120, 132, 101, 134, 90, 230, 210]
var yDataArr2 = [20, 82, 191, 94, 290, 330, 310]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'line',
data: yDataArr1
},
{
type: 'line',
data: yDataArr2
}
]
}
mCharts.setOption(option)
</script>
image.png
- 使用了堆叠图之后:
var option = {
series: [
{
type: 'line',
data: yDataArr1,
stack: 'all' // series中的每一个对象配置相同的stack值, 这个all可以任意写
},
{
type: 'line',
data: yDataArr2,
stack: 'all' // series中的每一个对象配置相同的stack值, 这个all可以任意写
}
]
}
image.png
蓝色这条线的y轴起点, 不再是y轴, 而是红色这条线对应的点. 所以相当于蓝色是在红色这条线的基
础之上进行绘制. 基于前一个图表进行堆叠
散点图的实现步骤
- 1 ECharts 最基本的代码结构
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var option = {}
mCharts.setOption(option)
</script>
</body>
</html>
2 准备 x 轴和 y 轴的数据
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 },...此处省略...]
假设这个数据是从服务器获取到的, 数组中的每一个元素都包含3个维度的数据: 性别,身高,体重, 而
散点图需要的数据是一个二维数组, 所以我们需要将从服务器获取到的这部分数据,通过代码生成散
点图需要的数据
var axisData = []
for (var i = 0; i < data.length; i++) {
var height = data[i].height
var weight = data[i].weight
var itemArr = [height, weight]
axisData.push(itemArr)
}
axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个
代表身高, 一个代表体重
- 3 准备配置项
xAxis 和 yAxis 的 type 都要设置为 value
在 series 下设置 type:scatter
var option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
series: [
{
type: 'scatter',
data: axisData
}
]
}
- 4 调整配置项, 脱离0值比例
给 xAxis 和 yAxis 配置 scale 的值为 true
var option = {
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'scatter',
data: axisData,
}
]
}
image.png
散点图的常见效果
- 气泡图效果
要能够达到气泡图的效果, 其实就是让每一个散点的大小不同, 让每一个散点的颜色不同
symbolSize控制散点的大小
itemStyle.color控制散点的颜色
这两个配置项都支持固定值的写法, 也支持回调函数的写法
固定值的写法如下:
var option = {
series: [
{
type: 'scatter',
data: axisData,
symbolSize: 25,
itemStyle: {
color: 'green',
}
}
]
}
image.png
- 回调函数的写法如下:
var option = {
series: [
{
type: 'scatter',
data: axisData,
symbolSize: function (arg) {
var weight = arg[1]
var height = arg[0] / 100
// BMI > 28 则代表肥胖, 肥胖的人用大的散点标识, 正常的人用小散点标识
// BMI: 体重/ 身高*身高 kg m
var bmi = weight / (height * height)
if (bmi > 28) {
return 20
}
return 5
},
itemStyle: {
color: function (arg) {
var weight = arg.data[1]
var height = arg.data[0] / 100
var bmi = weight / (height * height)
if (bmi > 28) {
return 'red'
}
return 'green'
}
}
}
]
}
image.png
涟漪动画效果
type:effectScatter
将 type 的值从 scatter 设置为 effectScatter 就能够产生涟漪动画的效果
rippleEffect
rippleEffect 可以配置涟漪动画的大小
var option = {
series: [
{
type: 'effectScatter',
rippleEffect:{
scale:3
}
}
]
}
image.png
showEffectOn
showEffectOn 可以控制涟漪动画在什么时候产生, 它的可选值有两个: render 和 emphasis
render 代表界面渲染完成就开始涟漪动画
emphasis 代表鼠标移过某个散点的时候, 该散点开始涟漪动画
var option = {
series: [
{
type: 'effectScatter',
showEffectOn: 'emphasis',
rippleEffect:{
scale:3
}
}
]
}
var option = {
series: [
{
type: 'effectScatter',
showEffectOn: 'emphasis',
rippleEffect:{
scale:3
}
}
]
}
结合地图
散点图也经常结合地图来进行地图区域的标注, 这个效果将在讲解地图时实现
- 散点图的特点
散点图可以帮助我们推断出不同维度数据之间的相关性, 比如上述例子中,看得出身高和体重是正相关, 身
高越高, 体重越重
散点图也经常用在地图的标注上
直角坐标系的常见配置
直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图
针对于直角坐标系的图表, 有一些通用的配置
- 配置1: 网格 grid
grid是用来控制直角坐标系的布局和大小, x轴和y轴就是在grid的基础上进行绘制的
显示 grid
show: true
grid 的边框
borderWidth : 10
grid 的位置和大小
left top right bottom
width height
var option = {
grid: {
show: true, // 显示grid
borderWidth: 10, // grid的边框宽度
borderColor: 'red', // grid的边框颜色
left: 100, // grid的位置
top: 100,
width: 300, // grid的大小
height: 150
}
}
- 配置2: 坐标轴 axis
坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴
坐标轴类型 type
value : 数值轴, 自动会从目标数据中读取数据
category : 类目轴, 该类型必须通过 data 设置类目数据
坐标轴位置
xAxis : 可取值为 top 或者 bottom
yAxis : 可取值为 left 或者 right
var option = {
xAxis: {
type: 'category',
data: xDataArr,
position: 'top'
},
yAxis: {
type: 'value',
position: 'right'
}
}
- 配置3: 区域缩放 dataZoom
dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着
可以配置多个区域缩放器
区域缩放类型 type
slider : 滑块
inside : 内置, 依靠鼠标滚轮或者双指缩放
产生作用的轴
xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可
yAxisIndex :设置缩放组件控制的是哪个 y 轴, 一般写0即可
指明初始状态的缩放情况
start : 数据窗口范围的起始百分比
end : 数据窗口范围的结束百分比
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
dataZoom: [
{
type: 'slider',
xAxisIndex: 0
},
{
type: 'slider',
yAxisIndex: 0,
start: 0,
end: 80
}
]
}
image.png
需要注意的是, 针对于非直角坐标系图表, 比如饼图 地图 等, 以上三个配置可能就不会生效了
饼图的实现步骤
- 1 ECharts 最基本的代码结构
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var option = {}
mCharts.setOption(option)
</script>
</body>
</html>
- 2 准备数据
var pieData = [
{
value: 11231,
name: "淘宝",
},
{
value: 22673,
name: "京东"
},
{
value: 6123,
name: "唯品会"
},
{
value: 8989,
name: "1号店"
},
{
value: 6700,
name: "聚美优品"
}
]
- 3 准备配置项 在 series 下设置 type:pie
var option = {
series: [
{
type: 'pie',
data: pieData
}
]
}
image.png
注意:
饼图的数据是由 name 和 value 组成的字典所形成的数组
饼图无须配置 xAxis 和 yAxis
饼图的常见效果
显示数值
label.show : 显示文字
label.formatter : 格式化文字
var option = {
series: [
{
type: 'pie',
data: pieData,
label: {
show: true,
formatter: function (arg) {
return arg.data.name + '平台' + arg.data.value + '元\n' +
arg.percent + '%'
}
}
}
]
南丁格尔图
南丁格尔图指的是每一个扇形的半径随着数据的大小而不同, 数值占比越大, 扇形的半径也就越大
roseType:'radius'
var option = {
series: [
{
type: 'pie',
data: pieData,
label: {
show: true,
formatter: function (arg) {
return arg.data.name + '平台' + arg.data.value + '元\n' +
arg.percent + '%'
}
},
roseType: 'radius'
}
]
}
image.png
- 选中效果
selectedMode: 'multiple'
选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可
选 'single' ， 'multiple' ，分别表示单选还是多选
selectedOffset: 30
选中扇区的偏移距离
var option = {
series: [
{
type: 'pie',
data: pieData,
selectedMode: 'multiple', //
selectedOffset: 30
}
]
}
image.png
- 圆环
radius
饼图的半径。可以为如下类型：
number ：直接指定外半径值。 string ：例如， '20%' ，表示外半径为可视区尺寸（容器高宽中
较小一项）的 20% 长度。 Array. ：数组的第一项是内半径，第二项是外半径, 通过 Array , 可以
将饼图设置为圆环图
var option = {
series: [
{
type: 'pie',
data: pieData,
radius: ['50%', '70%']
}
]
}
image.png
地图
-地图图表的使用方式
百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak
矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据
接下来的实现是通过矢量图的方式来实现的
矢量地图的实现步骤
1 ECharts 最基本的代码结构
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var option = {}
mCharts.setOption(option)
</script>
</body>
</html>
-
2 准备中国的矢量 json 文件, 放到 json/map/ 目录之下
image.png
- 3 使用 Ajax 获取 china.json
$.get('json/map/china.json', function (chinaJson) {
})
- 4 在Ajax的回调函数中, 往 echarts 全局对象注册地图的 json 数据
echarts.registerMap('chinaMap', chinaJson)
$.get('json/map/china.json', function (chinaJson) {
echarts.registerMap('chinaMap', chinaJson)
})
- 5 获取完数据之后, 需要配置 geo 节点, 再次的 setOption
type : 'map'
map : 'chinaMap'
var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/china.json', function (chinaJson) {
echarts.registerMap('chinaMap', chinaJson)
var option = {
geo: {
type: 'map',// map是一个固定的值
map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致
}
};
mCharts.setOption(option)
})
image.png
注意: 需要注意的是, 由于在代码中使用了 Ajax , 所以, 关于此文件的打开, 不能以 file 的协议打开, 应
该将其置于 HTTP 的服务之下方可正常展示地图
地图的常见配置
- 缩放拖动: roam
var option = {
geo: {
type: 'map',// map是一个固定的值
map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
roam: true, // 运行使用鼠标进行拖动和缩放
}
}
- 名称显示: label
var option = {
geo: {
type: 'map',// map是一个固定的值
map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
roam: true,
label: {
show: true
}
}
}
image.png
- 初始缩放比例: zoom
- 地图中心点: center
var option = {
geo: {
type: 'map',// map是一个固定的值
map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
roam: true,
label: {
show: true
},
zoom: 0.8, // 地图的缩放比例, 大于1代表放大, 小于1代表缩小
center: [87.617733, 43.792818] // 当前视角的中心点，用经纬度表示
}
}
image.png
地图的常见效果
- 显示某个区域
-
准备安徽省的矢量地图数据
image.png
- 加载安徽省地图的矢量数据
$.get('json/map/anhui.json', function (anhuiJson) {
})
在Ajax的回调函数中注册地图矢量数据
echarts.registerMap('anhui', anhuiJson)
配置 geo 的 type:'map' , map:'anhui'
通过 zoom 调整缩放比例
通过 center 调整中心点
<script>
var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/anhui.json', function (anhuiJson) {
console.log(anhuiJson)
echarts.registerMap('anhui', anhuiJson)
var option = {
geo: {
type: 'map',
map: 'anhui',
label: {
show: true
},
zoom: 1.2,
center: [116.507676, 31.752889]
}
};
mCharts.setOption(option)
})
</script>
image.png
不同城市颜色不同
- 1.显示基本的中国地图
<body>
<div style="width: 600px;height:400px;border:1px solid red"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/china.json', function (chinaJson) {
echarts.registerMap('chinaMap', chinaJson)
var option = {
geo: {
type: 'map',
map: 'chinaMap',
roam: true,
label: {
show: true
}
}
}
mCharts.setOption(option)
})
</script>
</body>
</html>
- 2.准备好城市空气质量的数据, 并且将数据设置给 series
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 = {
......
series: [
{
data: airData
}
]
}
- 3.将 series 下的数据和 geo 关联起来
geoIndex: 0
type: 'map'
var option = {
series: [
{
data: airData,
geoIndex: 0,
type: 'map'
}
]
}
- 4.结合 visualMap 配合使用
visualMap 是视觉映射组件, 和之前区域缩放 dataZoom 很类似, 可以做数据的过滤. 只不过
dataZoom 主要使用在直角坐标系的图表, 而 visualMap 主要使用在地图或者饼图中
var option = {
geo: {
type: 'map',
map: 'chinaMap',
roam: true,
label: {
show: true
}
},
series: [
{
data: airData,
geoIndex: 0,
type: 'map'
}
],
visualMap: {
min: 0, // 最小值
max: 300, // 最大值
inRange: {
color: ['white', 'red'] // 颜色的范围
},
calculable: true // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
}
}
地图和散点图结合
1.给 series 这个数组下增加新的对象
2.准备好散点数据,设置给新对象的 data
var scatterData = [
{
value: [117.283042, 31.86119] // 散点的坐标, 使用的是经纬度
}
]
3.配置新对象的 type
type:effectScatter
让散点图使用地图坐标系统
coordinateSystem: 'geo'
让涟漪的效果更加明显
rippleEffect: { scale: 10 }
var option = {
series: [
{
data: airData,
geoIndex: 0,
type: 'map'
}, {
data: scatterData,
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
scale: 10
}
}
]
}
image.png
雷达图
- 1 ECharts 最基本的代码结构
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var option = {}
mCharts.setOption(option)
</script>
</body>
</html>
- 2 定义各个维度的最大值
var dataMax = [
{
name: '易用性', max: 100
},
{
name: '功能', max: 100
},
{
name: '拍照', max: 100
},
{
name: '跑分', max: 100
},
{
name: '续航', max: 100
}
]
- 3 准备具体产品的数据
var hwScore = [80, 90, 80, 82, 90]
var zxScore = [70, 82, 75, 70, 78]
- 4 在 series 下设置 type:radar
var option = {
radar: {
indicator: dataMax
},
series: [
{
type: 'radar',
data: [
{
name: '华为手机1',
value: hwScore
},
{
name: '中兴手机1',
value: zxScore
}
]
}
]
}
image.png
雷达图的常见效果
- 显示数值 label
var option = {
series: [
{
type: 'radar',
label: {
show: true
},
data: [
{
name: '华为手机1',
value: hwScore
},
{
name: '中兴手机1',
value: zxScore
}
]
}
]
}
image.png
- 区域面积 areaStyle
var option = {
series: [
{
type: 'radar',
label: {
show: true
},
areaStyle: {},
data: [
{
name: '华为手机1',
value: hwScore
},
{
name: '中兴手机1',
value: zxScore
}
]
}
]
}
image.png
- 绘制类型 shape
雷达图绘制类型，支持 'polygon' 和 'circle'
'polygon' : 多边形
'circle' 圆形
var option = {
radar: {
indicator: dataMax,
shape: 'circle'
},
series: [
{
type: 'radar',
label: {
show: true
},
data: [
{
name: '华为手机1',
value: hwScore
},
{
name: '中兴手机1',
value: zxScore
}
]
}
]
}
image.png
仪表盘图
- 1 ECharts 最基本的代码结构
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var option = {}
mCharts.setOption(option)
</script>
</body>
</html>
- 2: 准备数据, 设置给 series 下的 data
data:[97]
- 3: 在 series 下设置 type:gauge
var option = {
series: [
{
type: 'gauge',
data: [{
value: 97,
}]
}
]
}
image.png
仪表盘的常见效果
数值范围: max min
多个指针: 增加data中数组的元素
多个指针颜色的差异: itemStyle
var option = {
series: [
{
type: 'gauge',
data: [{
value: 97,
itemStyle: {
color: 'pink'
}
}, {
value: 85,
itemStyle: {
color: 'green'
}
}],
min: 50
}
]
}
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
主题
默认主题
ECharts 中默认内置了两套主题: light dark
在初始化对象方法 init 中可以指明
var chart = echarts.init(dom, 'light')
var chart = echarts.init(dom, 'dark')
自定义主题
- 1.在主题编辑器中编辑主题
主题编辑器的地址为: https://www.echartsjs.com/theme-builder/
在该地址中, 你可以定义一个主题的很多方面的内容:
image.png
-
2.下载主题, 是一个 js 文件
在线编辑完主题之后, 可以点击下载主题按钮, 下载主题的js文件
image.png
- 3.引入主题 js 文件
<script src="js/echarts.min.js"></script>
<script src="js/itcast.js"></script>
其中, itcast.js 就是下载下来的主题文件
- 4.在 init 方法中使用主题
var mCharts = echarts.init(document.querySelector("div"), 'itcast')
init方法中的第二个参数itcast就是主题的名称, 这个名称叫什么我们可以在itcast.js的代码中
看出
image.png
调色盘
它是一组颜色，图形、系列会自动从其中选择颜色, 不断的循环从头取到尾, 再从头取到尾, 如此往复.
- 主题调色盘
echarts.registerTheme('itcast', {
"color": [
"#893448",
"#d95850",
"#eb8146",
"#ffb248",
"#f2d643",
"#ebdba4"
],
"backgroundColor": "rgba(242,234,191,0.15)",
......
})
- 全局调色盘
全局调色盘是在 option 下增加一个 color 的数组
var option = {
// 全局调色盘
color: ['red', 'green', 'blue'],
......
}
mCharts.setOption(option)
- 局部调色盘
局部调色盘就是在 series 下增加一个 color 的数组
var option = {
// 全局调色盘
color: ['red', 'green', 'blue'],
series: [
{
type: 'pie',
data: pieData,
// 局部调色盘
color: ['pink', 'yellow', 'black']
}
]
}
mCharts.setOption(option)
需要注意一点的是, 如果全局的调色盘和局部的调色盘都设置了, 局部调色盘会产生效果, 这里面遵 循的是就近原则
渐变颜色的实现
在 ECharts 中, 支持线性渐变和径向渐变两种颜色渐变的方式
线性渐变
线性渐变的类型为 linear , 他需要配置线性的方向, 通过 x, y, x2, y2 即可进行配置
x , y , x2 , y2 , 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 global 为 true ，则
该四个值是绝对的像素位置
在下述代码中的 0 0 0 1 意味着从上往下进行渐变
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大
强']
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: yDataArr,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
]
};
mCharts.setOption(option)
</script>
</body>
</html>
image.png
- 径向渐变
线性渐变的类型为 radial , 他需要配置径向的方向, 通过 x , y , r 即可进行配置
前三个参数分别是圆心 x , y 和半径，取值同线性渐变
在下述代码中的 0.5 0.5 0.5 意味着从柱的重点点, 向外径向扩散半径为宽度一半的圆
series: [
{
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
]
image.png
样式
直接样式
itemStyle
textStyle
lineStyle
areaStyle
label
data: [
{
value: 11231,
name: "淘宝",
itemStyle: {
color: 'black'
}
}
]
title: {
text: '我是标题',
textStyle: {
color: 'red'
}
}
label: {
color: 'green'
}
这些样式一般都可以设置颜色或者背景或者字体等样式, 他们会覆盖主题中的样式
高亮样式
图表中, 其实有很多元素都是有两种状态的, 一种是默认状态, 另外一种就是鼠标滑过或者点击形成
的高亮状态. 而高亮样式是针对于元素的高亮状态设定的样式
那它的使用也非常简单,在 emphasis 中包裹原先的 itemStyle 等等, 我们来试一下
series: [
{
type: 'pie',
label: {
color: 'green'
},
emphasis: {
label: {
color: 'red'
},
},
data: [{
value: 11231,
name: "淘宝",
itemStyle: {
color: 'black'
},
emphasis: {
itemStyle: {
color: 'blue'
},
}
},
自适应
步骤1: 监听窗口大小变化事件
步骤2: 在事件处理函数中调用 ECharts 实例对象的 resize 即可
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style=" height:400px;border:1px solid red"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大
强']
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: yDataArr
}
]
};
mCharts.setOption(option)
// 监听window大小变化的事件
window.onresize = function () {
// 调用echarts示例对象的resize方法
mCharts.resize()
}
// window.onresize = mCharts.resize
</script>
</body>
</html>
动画的使用
- 加载动画
eCharts 已经内置好了加载数据的动画, 我们只需要在合适的时机显示或者隐藏即可 - 显示加载动画
mCharts.showLoading()
一般, 我们会在获取图表数据之前 显示加载动画
image.png
- 隐藏加载动画
mCharts.hideLoading()
一般, 我们会在获取图表数据之后 隐藏加载动画, 显示图表
增量动画
所有数据的更新都通过 setOption 实现, 我们不用考虑数据到底产生了那些变化, ECharts 会找到两组
数据之间的差异然后通过合适的动画去表现数据的变化。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<button>修改数据</button>
<button id="btnAdd">增加数据</button>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: yDataArr
}
]
};
mCharts.setOption(option)
var btn = document.querySelector('button');
btn.onclick = function () {
var newArr = [68, 62, 93, 67, 64, 90, 52, 36]
// setOption的方法可以被调用多次
// 新的option 和旧的option配置
// 新旧option配置项他们之间不是替换的关系,是相互整合的关系
// 我们在设置新的option的时候,只需要考虑到将变化的配置项配置就可以了
var option = {
series: [
{
data: newArr,
}
]
};
mCharts.setOption(option)
}
var btnAdd = document.querySelector('#btnAdd')
btnAdd.onclick = function () {
setInterval(function () {
//增加数据
xDataArr.push('小明')
yDataArr.push(parseInt(50 + Math.random() * 10))
var option = {
xAxis: {
data: xDataArr
},
series: [
{
data: yDataArr
}
]
}
mCharts.setOption(option)
}, 1000)
}
</script>
</body>
</html>
动画的配置
开启动画
animation: true
动画时长
animationDuration: 5000
缓动动画
animationEasing : 'bounceOut'
linear ,线性变化, 这样动画效果会很均匀
bounceOut ,这样动画效果会有一个回弹效果
缓动动画的可选值如下图:
image.png
动画阈值
animationThreshold: 8
单种形式的元素数量大于这个阈值时会关闭动画
交互API
全局echarts对象
全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的
echarts.init
- 初始化ECharts实例对象
使用主题 - echarts.registerTheme
注册主题
只有注册过的主题,才能在init方法中使用该主题 - echarts.registerMap
// 注册地图数据
$.get('json/map/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
});
geo组件使用地图数据
var option = {
geo: {
type: 'map',
map: 'china',
},
})
- echarts.connect
一个页面中可以有多个独立的图表
每一个图表对应一个 ECharts 实例对象
connect 可以实现多图关联，传入联动目标为 EChart 实例，支持数组
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px;border:1px solid red"></div>
<div style="width: 600px;height:400px;border:1px solid green" id="div1">
</div>
<script>
var mCharts = echarts.init(document.querySelector("div"), 'itcast')
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大
强']
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
toolbox: {
feature: {
saveAsImage: {}
}
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: yDataArr
}
]
};
mCharts.setOption(option)
$.get('json/map/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson)
var mCharts2 = echarts.init(document.querySelector('#div1'));
var option2 = {
geo: {
type: 'map',
map: 'china'
}
}
mCharts2.setOption(option2)
echarts.connect([mCharts, mCharts2])
})
</script>
</body>
</html>
这样, 由于我们打开了toolbox中的saveAsImage, 所以会出现下载图片的按钮. 而通过
echarts.connect([mCharts, mCharts2]) , 此时点击下载图片按钮, 保存下来的图片就是两个图
表的图片了.
echartsInstance对象
eChartsInstance 对象是通过 echarts.init 方法调用之后得到的
- echartsInstance.setOption
设置或修改图表实例的配置项以及数据
多次调用setOption方法
合并新的配置和旧的配置
增量动画 - echartsInstance.resize
重新计算和绘制图表
一般和window对象的resize事件结合使用
window.onresize = function(){
myChart.resize();
}
- echartsInstance.on
echartsInstance.off
绑定或者解绑事件处理函数 - 鼠标事件
常见事件: 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup' 等
事件参数 arg: 和事件相关的数据信息
mCharts.on('click', function (arg) {
// console.log(arg)
console.log('饼图被点击了')
})
解绑事件:
mCharts.off('click')
- ECharts 事件
常见事件:
legendselectchanged、'datazoom'、'pieselectchanged'、'mapselectchanged'
等
事件参数 arg: 和事件相关的数据信息
mCharts.on('legendselectchanged', function (arg) {
console.log(arg)
console.log('图例选择发生了改变...')
})
- echartsInstance.dispatchAction
主动触发某些行为, 使用代码模拟用户的行为
// 触发高亮的行为
mCharts.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 1
})
// 触发显示提示框的行为
mCharts.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: 3
})
echartsInstance.clear
清空当前实例，会移除实例中所有的组件和图表
清空之后可以再次 setOption
echartsInstance.dispose
销毁实例
销毁后实例无法再被使用
网友评论