ECharts
文章目录
一、ECharts快速入门
- 引入echarts.js文件
- 准备一个图表容器盒子
- 初始化echarts实例对象
- 准备配置项！
- 将配置项设置给echarts实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入echarts.js文件 -->
<script src="./lib/echarts.min.js"></script>
<script>
onload=()=>{
// 初始化echarts实例对象 其中init函数参数为dom元素，决定图标最终展示的位置
var myECharts = echarts.init(document.querySelector('#root'));
// 准备配置项！
var option ={
xAxis:{ //直角坐标系中的x轴
type:'category', //类目轴
data:['兰博基尼','劳斯莱斯','梅赛德斯'] //具体的类目
},
yAxis:{ //直角坐标系中的y轴
type:'value' //数值轴 从series中取得数据
},
series:[ //系列列表，每个系列通过type决定自己的图表类型
{
name:'价格',
type:'bar', //图表类型
data:[50000000,52000000,49000000]
}
]
}
// 将配置项设置给echarts实例对象
myECharts.setOption(option);
}
</script>
</head>
<body>
<!-- 准备一个图表容器盒子 -->
<div id="root" style="width: 700px; height: 500px;"></div>
</body>
</html>
二、ECharts中的常用图表
tip:通用配置
-
title：标题
- 文字样式 textStyle
- 标题边框
- borderWidth
- borderColor
- borderRadius
- 标题位置
- top
- bottom
- left
- right
title:{ //标题 text:'汽车价格柱状图', //标题文字 textStyle:{ //文字样式 color:'#4DBCFF' }, borderWidth:1, //标题边框宽度 borderColor:'#302C3A', //边框颜色 borderRadius:5, //边框圆角 left:30 //标题位置偏移 }, -
tooltip：提示
- 触发类型：trigger
- item
- axis
- 触发时机：triggerOn
- mousemove
- click
- 格式化：formatter
- 模板字符串
- 回调函数
tooltip: { //提示 trigger: 'item', //触发类型 item/axis triggerOn: 'click', //触发时机 mousemove/click formatter(arg) { // console.log(arg) return arg.name + '的价格：' + arg.data } //格式化 }, - 触发类型：trigger
-
toolbox：工具按钮
- saveAsImage：导出图片
- dataView：数据视图
- restore：重置
- dataZoom：区域缩放
- magicType：切换图表类型
toolbox:{ //工具 feature:{ saveAsImage:{}, //导出图片 dataView:{}, //数据视图 restore:{}, //重置 dataZoom:{}, //区域缩放 magicType:{ //切换图表类型 type:['bar','line'] //line:折线图 } } }, -
legend：图例筛选
legend:{ data:['价格','人气'] }, //与系列配合 series: [ //系列列表，每个系列通过type决定自己的图表类型 { name: '价格', type: 'bar', //图表类型（柱状图） data: [50000000, 52000000, 49000000, 25000000, 36000000] }, { name: '人气', type: 'bar', //图表类型（柱状图） data: [50052118, 42358004, 49447899, 95880012, 36000000] } ]
tip:直角坐标系中的常用配置
-
网格 grid
grid:{ show:true, borderWidth:5, borderColor:'skyblue', width:500, height:350, top:50, left:100, }, -
坐标轴 axis
- 分为 xAxis（x轴），yAxis（y轴）
- 轴类型 type
- value：数值轴，自动会从目标数据中读取数据
- category：类目轴，该类型必须通过data设置类目数据
- 显示位置 position
- xAxis：可以取值为top或者bottom
- yAxis：可以取值为left或者right
-
区域缩放 dataZoom
- 用于区域缩放，对数据范围过滤，x轴y轴等候可以拥有
- dataZoom是一个数组，可以配置多个缩放区域
- 类型 type
- slider：滑块
- inside：内置，通过鼠标滚轮
- 指明作用轴
- xAxisIndex
- yAxisIndex
- 指明初始缩放情况
- start：起始百分比
- end：终止百分比
1.柱状图 bar
- 常见效果
- 标记
- markPoint：标记点（最大值，最小值）
- markLine：标记线（平均值）
- 显示
- label：数值显示
- barWidth：柱宽度
- 调换x轴y轴实现横向柱状图
- 标记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入echarts.js文件 -->
<script src="./lib/echarts.min.js"></script>
<script>
onload=()=>{
// 初始化echarts实例对象 其中init函数参数为dom元素，决定图标最终展示的位置
var myECharts = echarts.init(document.querySelector('#root'));
// 准备配置项！
var option ={
//纵向柱状图
// xAxis:{ //直角坐标系中的x轴
// type:'category', //类目轴
// data:['兰博基尼','劳斯莱斯','梅赛德斯','BMW中国','保时捷'] //具体的类目
// },
// yAxis:{ //直角坐标系中的y轴
// type:'value' //数值轴 从series中取得数据
// },
// 横向柱状图
xAxis:{ //直角坐标系中的x轴
type:'value' //数值轴 从series中取得数据
},
yAxis:{ //直角坐标系中的y轴
type:'category', //类目轴
data:['兰博基尼','劳斯莱斯','梅赛德斯','BMW中国','保时捷'] //具体的类目
},
series:[ //系列列表，每个系列通过type决定自己的图表类型
{
name:'价格',
type:'bar', //图表类型（柱状图）
markPoint:{ //标记点
data:[
//最大值和最小值
{
type:'max',
name:'最大值'
},
{
type:'min',
name:'最小值'
}
]
},
markLine:{ //标记线
data:[
//平均值
{
type:'average',
name:'平均值'
}
]
},
label:{ //显示数值
show:true,
},
barWidth:'70px', //柱宽度
data:[50000000,52000000,49000000,25000000,36000000]
}
]
}
// 将配置项设置给echarts实例对象
myECharts.setOption(option);
}
</script>
</head>
<body>
<!-- 准备一个图表容器盒子 -->
<div id="root" style="width: 700px; height: 700px;"></div>
</body>
</html>
2.折线图 line
常见效果
- 标记
- markPoint：标记点（最大值，最小值）
- markLine：标记线（平均值）
- markArea：标注区间
- 线条控制
- smooth：平滑
- lineStyle：线条样式
- 填充风格
- areaStyle：填充区域风格
- 紧挨边缘
- boundaryGap (配置在xAxis中)
- 缩放：脱离0值比例
- scale
- 堆叠图（当有多个系列使图表显得杂乱无章时使用）
- atack
- 显示
- label：数值显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入echarts.js文件 -->
<script src="./lib/echarts.min.js"></script>
<script>
onload = () => {
// 初始化echarts实例对象 其中init函数参数为dom元素，决定图标最终展示的位置
var myECharts = echarts.init(document.querySelector('#root'));
// 准备配置项！
var option = {
xAxis: { //直角坐标系中的x轴
type: 'category', //类目轴
data: ['兰博基尼', '劳斯莱斯', '梅赛德斯', 'BMW中国', '保时捷'], //具体的类目
boundaryGap: false //紧挨边缘
},
yAxis: { //直角坐标系中的y轴
type: 'value', //数值轴 从series中取得数据
scale: true //缩放：脱离0值比例
},
series: [ //系列列表，每个系列通过type决定自己的图表类型
{
name: '价格',
type: 'line', //图表类型（折线图）
markPoint: { //标记点
data: [
//最大值和最小值
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: { //标记线
data: [
//平均值
{
type: 'average',
name: '平均值'
}
]
},
markArea: {
data: [
[
{ xAxis: '兰博基尼' }, //标记开始值
{ xAxis: '劳斯莱斯' } //标记终止值
],
[
{ xAxis: 'BMW中国' },
{ xAxis: '保时捷' }
]
]
},
// smooth: true, //平滑
lineStyle: { //线条样式
color: 'blue', //颜色
type: 'solid' //dashed/dotted/solid
},
areaStyle: { //填充区域风格
color: '#36CBCE'
},
label: { //显示数值
show: true,
},
stack: 'a', //堆叠图
data: [5000000, 5200000, 4900000, 2500000, 3600000]
},
{
name: '人气',
type: 'line', //图表类型（折线图）
markPoint: { //标记点
data: [
//最大值和最小值
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: { //标记线
data: [
//平均值
{
type: 'average',
name: '平均值'
}
]
},
label: { //显示数值
show: true,
},
stack: 'a',
data: [905211, 235800, 944789, 588001, 600000]
}
]
}
// 将配置项设置给echarts实例对象
myECharts.setOption(option);
}
</script>
</head>
<body>
<!-- 准备一个图表容器盒子 -->
<div id="root" style="width: 700px; height: 700px;"></div>
</body>
</html>
3.散点图 scatter
常见效果
-
气泡图
- symbolSize：点大小
- 可以是回调函数
- itemStyle：点样式
- color （也支持回调函数）
- symbolSize：点大小
-
涟漪动画
- type:effectScatter
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 引入echarts.js文件 --> <script src="./lib/echarts.min.js"></script> <script> onload = () => { // 初始化echarts实例对象 其中init函数参数为dom元素，决定图标最终展示的位置 var myECharts = echarts.init(document.querySelector('#root')); // 准备配置项！ var option = { //纵向柱状图 xAxis: { //直角坐标系中的x轴 type: 'value', scale:true //脱离0值比例 }, yAxis: { //直角坐标系中的y轴 type: 'value', scale:true //脱离0值比例 }, series: [ //系列列表，每个系列通过type决定自己的图表类型 { // type:'scatter', //图表类型（散点图） type: 'effectScatter', //具有涟漪动画的散点图 showEffectOn:'emphasis', //涟漪时机 render/emphasis rippleEffect:{ scale:5 //涟漪大小 }, data: [ [175,80],[162,80],[158,49],[180,75],[149,78],[170,70],[171,72],[170,100],[174,76],[159,65], [165,62],[168,68],[185,82],[173,75],[132,45],[155,50],[162,52],[178,68],[162,53],[176,70] ], symbolSize(arg){ //点大小 // console.log(arg) return (arg[1]/(arg[0]*arg[0]/10000)) > 28 ? 14:8 }, itemStyle:{ color(arg){ return (arg.data[1]/(arg.data[0]*arg.data[0]/10000)) > 28 ? 'red':'green' } } } ] } // 将配置项设置给echarts实例对象 myECharts.setOption(option); } </script> </head> <body> <!-- 准备一个图表容器盒子 --> <div id="root" style="width: 700px; height: 700px;"></div> </body> </html>
4.饼图 pie
常见效果
-
显示数值
- label
- show
- formatter （回调函数）
- label
-
圆环
- radius：饼半径，设置两个半径即圆环radius:[‘30%’,‘80%’]
-
南丁格尔图 （饼图的每一个区域的半径不一样，随着数值变化）
- roseType:‘radius’
-
选中效果
- selectedMode：设置选中效果 single/multiple
- selectedOffset：设置选中偏移量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./node_modules/echarts/dist/echarts.min.js"></script> <script> onload =function(){ // 初始化echarts实例对象 其中init函数参数为dom元素，决定图标最终展示的位置 var myECharts = echarts.init(document.querySelector('#root')); // 准备数据 var domeData=[ {name:'吃喝',value:700}, {name:'学习',value:9000}, {name:'出行',value:2000}, {name:'服饰',value:1825}, {name:'玩乐',value:654}, {name:'其他',value:269} ] // 准备配置项！ var option = { series:[ { type:'pie', //饼图 data:domeData, label:{ show:true, formatter(arg){ // console.log(arg) return `${arg.name}-${arg.value}-${arg.percent}%` } }, // radius:100, // radius:'50%', //百分比参照的是高度及宽度较小的一个的一半的百分比 // radius:['30%','80%'], //设置为数组，第0个元素表示内圆半径，第1个表示外圆半径 roseType:'radius', selectedMode:'single', //设置选中效果 single/multiple selectedOffset:15 //设置选中偏移量 } ] } // 将配置项设置给echarts实例对象 myECharts.setOption(option) } </script> </head> <body> <!-- 准备一个图表容器盒子 --> <div id="root" style="width: 700px; height: 700px;"></div> </body> </html>
5.地图 map
使用方式
- 百度地图API
- 申请百度地图ak
- 矢量地图
- 准备矢量地图数据 （json文件，在json/map/目录下）
- 使用Ajax获取矢量地图数据 json文件
- 在回调函数中往echarts全局对象注册地图json数据
echarts.registerMap('testMap',testJson) - 配置geo
- type:‘map’
- map:‘testMap’
常见效果
-
缩放拖动
- roam
-
名称展示
- label
- show
- label
-
初始缩放值
- zoom
-
初始地图中心点
- center:[100,100] //经纬度
-
不同城市显示不同效果
-
准备数据 （对象数组）
var data=[ { name: '北京', value: 39.92 }, { name: '天津', value: 39.13 }, { name: '上海', value: 31.22 }, ... ] -
配置series
- geoIndex
- type:‘map’
-
配置visualMap
- min 最小值
- max 最大值
- inRange 颜色改变范围
- calculable 可筛选
-
-
地图+散点图
- 在series中增加一个系列（散点图）
- 让散点图使用地图坐标系统 coordinateSystem:‘geo’
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./node_modules/echarts/dist/echarts.min.js"></script> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script> onload = function () { // 初始化echarts实例对象 其中init函数参数为dom元素，决定图标最终展示的位置 var myECharts = echarts.init(document.querySelector('#root')); 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: 228 }, { 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 badAirData = [] $.ajax({ type: 'get', url: './json/map/china.json', success(data) { console.log(data) // 处理数据 airData.forEach((value, index) => { if (value.value > 200) { // data.features.properties.name // data.features.properties.cp data.features.forEach((v, i) => { if (v.properties.name === value.name) { badAirData.push({ value: v.properties.cp }); } }) } }) // console.log(badAirData) // 在回调函数中往echarts全局对象注册地图json数据 echarts.registerMap('chinaMap', data) // 直接在回调中配置并将配置项设置给echarts实例对象 var option = { geo: { type: 'map', //地图类型 map: 'chinaMap', roam: true, //缩放拖动 label: { // show:true, //显示名称 }, zoom: 1, //初始缩放值 // center: [116.405285, 39.904989], //设置地图初始中心点 }, series: [ { data: airData, geoIndex: 0, //将空气质量数据与第0个geo配置关联 type: 'map' }, { //在series中增加一个系列（散点图） data: badAirData, type: 'effectScatter', coordinateSystem: 'geo', //让散点图使用地图坐标系统 rippleEffect: { scale: 5 //涟漪大小 } } ], visualMap: { //配置visualMap min: 0, max: 300, inRange: { color: ['green', 'yellow'] // color:['yellow','red'] }, calculable: true //可筛选 } } // 将配置项设置给echarts实例对象 myECharts.setOption(option) }, error(err) { console.log(err) } }) } </script> </head> <body> <!-- 准备一个图表容器盒子 --> <div id="root" style="width: 700px; height: 700px; border: rgb(95, 95, 94) 2px solid;"></div> </body> </html>
6.雷达图 radar
使用方式
- 定义各个维度的最大值
indicator:[{name:'伤害',max:100},...] - 准备具体数据
data:[{name:'国服韩信',value:[10,...]},...]
常见效果
-
显示数值 label
-
填充区域 areaStyle
-
最外层图形 shape （在 radar中配置）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./node_modules/echarts/dist/echarts.min.js"></script> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script> onload = function () { // 初始化echarts实例对象 其中init函数参数为dom元素，决定图标最终展示的位置 var myECharts = echarts.init(document.querySelector('#root')); var maxData = [ { name: '伤害', value: 100 }, { name: '参团', value: 100 }, { name: '发育', value: 100 }, { name: '承伤', value: 100 }, { name: '其他', value: 100 }, ] var playerData = [ { name: '国服韩信', value: [57, 24, 88, 62, 71] }, { name: '最菜中单', value: [85, 88, 79, 55, 83] } ] var option = { radar: { //配置各个维度最大值 indicator: maxData, shape: 'polygon' //最外层图形 polygon/circle }, series: [ { type: 'radar', //雷达图 data: playerData, label: { show: true, //显示数值 }, areaStyle: {}, //填充区域 } ] } // 将配置项设置给echarts实例对象 myECharts.setOption(option) } </script> </head> <body> <!-- 准备一个图表容器盒子 --> <div id="root" style="width: 700px; height: 700px;"></div> </body> </html>
7.仪表盘图 gauge
使用方法
- 数据准备
data:[{value:35},...]
常见效果
-
数值范围 max min
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./node_modules/echarts/dist/echarts.min.js"></script> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script> onload = function () { // 初始化echarts实例对象 其中init函数参数为dom元素，决定图标最终展示的位置 var myECharts = echarts.init(document.querySelector('#root')); var domeData = [{ value: 166 }] var option = { series: [ { type: 'gauge', //仪表盘图 data: domeData, min: 0, max: 200 } ] } // 将配置项设置给echarts实例对象 myECharts.setOption(option) } </script> </head> <body> <!-- 准备一个图表容器盒子 --> <div id="root" style="width: 700px; height: 700px;"></div> </body> </html>
三、Echarts高级使用
1.显示相关
1.1主题
- 内置主题
- light/dark
- 在初始化对象时指定
var myECharts = echarts.init(document.querySelector('#root'),'light')
- 自定义主题
- 在主题编辑器编辑主题 主题编辑器
- 下载主题
- 引入主题文件
- 在初始化对象时指定
1.2调色盘
-
主题调色盘（在主题文件中）
-
全局调色盘
-
可在color中配置
var option = { color:[ '#DD5246', '#619FF3', '#302C3A', '#36CBCE', '#4DBCFF', ... ] }
-
-
局部调色盘
- 在 series的某个系列通过color配置
-
全局调色盘覆盖主题调色盘，局部调色盘覆盖全局调色盘
-
颜色渐变
-
线性渐变
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 } } -
径向渐变
itemStyle:{ color:{ type:'radial', x:0.5, y:0.5, r:0.5, colorStops[ {offset:0,color:'red'}, //0%处的颜色 {offset:1,color:'blue'}, //100%处的颜色 ], globalCoord:false //缺省为 false } }
-
1.3样式
- 直接样式
- itemStyle
- textStyle
- lineStyle
- areaStyle
- label
- 高亮样式
- 在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle、label
1.4自适应
-
监听窗口大小变化
-
调用ECharts的resize方法
window.onresize=function(){ myECharts.resize(); }
2.动画使用
2.1加载动画
- 显示加载动画
myECharts.showLoading() - 隐藏加载动画
myECharts.hideLoading()
2.2增量动画
- 在数据改变后，重新定义配置并调用
myCharts.setOption(option)（option中只需要包含改变的配置即可）
2.3动画配置
- 动画效果
animation:true - 动画时长
animationDuration:2000以毫秒为单位，支持回调函数，函数参数arg表示动画编号！ - 缓动动画
animationEasing:'linear'linear/bounceOut… - 动画阈值
animationThreshold:10某种形式动画数量大于该值就会关闭动画
3.交互API
-
全局echarts对象
-
echartsInstance对象
var myECharts = echarts.init(document.querySelector('#root')) //全局echarts对象:echarts echartsInstance对象:myECharts
3.1全局echarts对象常用方法
-
init ：初始化得到echartsInstance对象
-
registerTheme：注册主题
-
registerMap：注册地图数据
-
connect：将多个图表进行关联，关联后，保存图片自动拼接，刷新、重置、提示框联动、图例选择、数据范围修改等通通关联上
echarts.connect([myECharts1,myECharts2])
3.2echartsInstance对象常用方法
-
setOption：设置及修改配置项
-
resize：重新计算并绘制图表
-
on/off：绑定或者解绑事件处理函数
-
鼠标事件：
- click
- dblclick
- mousedown
- mousemove
- mouseup
- …
myECharts.on('click',function(arg){ //通过arg可以获得事件区域的详细信息 }) -
ECharts事件
-
-
dispatchAction：触发某些行为，即通过js代码模拟用户行为触发相应事件
myECharts.dispatchAction({ type:'highlight', //事件类型 seriesIndex:0, //图表系列索引 dataIndex:1 //图表中响应事件的项目索引 }) -
clear：清空当前echartsInstance对象，清空只是清空配置，重新设置配置后图表依然存在
-
dispose：销毁当前echartsInstance对象，销毁后无法再使用
160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
