下面是各种统计图表的配置与使用：
上面的仅对直角坐标系有用，下面的对非直角坐标系通用配置：
各种图表的名称：
第一种：柱状图，第二个：折线图，第三个：散点图与涟漪动画图，第四个：饼图，第五个：地图，第六个：雷达图，第七个：仪表盘图，
下面的内容需要用到如下的文件，需要可私信领取
各个图表的使用场景
在使用散点图时，若网络不好，则可以使用下面的动画加载，从而形成加载的动画过程。
具体使用方法：
<!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>echarts的快速上手</title>
<!-- 引入echarts.js文件 -->
<script src="./lab/echarts.min.js"></script>
<!-- 步骤1：引入echarts.js文件 -->
<!-- 步骤2，准备一个呈现图标的盒子 就是div -->
<!-- 步骤3：初识话echarts实例对象 -->
<!-- 步骤4：准备配置项 -->
<!-- 步骤5：将配置项设置给echarts实例对象 -->
</head>
<body>
<!-- 步骤2，准备一个呈现图标的盒子 就是div-->
<div style="width:700px;height:500px;"></div>
<script>
// init()是echarts的实例对象
//参数，dom 决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'));
var xdata = ['小明','小红','小王','小李','田思思','王五','赵六','张三','李四','孙林','阿婷']
var ydata = [70,92,87,67,89,90,45,89,70,90,100]
// xAxis代表直角坐标系中的x轴， yAxis代表直角坐标系中的y轴，series代表系列列表，
// 步骤4：准备配置项
var option = {
title:{ //文本 可根据echarts官网进行查找
text:'成绩',//主标题
link:'https://www.baidu.com/' //主标题超链接 必须配合主标题使用
},
yAxis:{
type:'category',//类目轴
data:xdata,
},
xAxis:{
type:'value'//数值轴 设置了value就不需要设置data值了
},
series:{
name:'语文',
type:'bar',//柱状图 pie 饼图 line折线图 这里是图表的类型
data:ydata,
markPoint:{
data:[
{
type:'max',name:'最大值'
},
{
type:'min',name:'最小值'
}
]
},
markLine:{
data:[
{
type:'average',name:'平均值'
}
]
},
label:{
show:true, //显示出每一个人的成绩信息
rotate:60, //将成绩以60度方向旋转
position:'inside',//每个人的数值显示
},
barWidth:'50%',//让每个人的柱状图变窄
}
}
// 根据x与y轴的角色更换可让数据横向排列
//步骤5：将配置项设置给echarts实例对象 在echarts内部有一个setOption实例对象
mCharts.setOption(option)
</script>
</body>
</html>
<!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>title的通用用法</title>
<!-- 引入echarts.js文件 -->
<script src="./lab/echarts.min.js"></script>
<!-- 步骤1：引入echarts.js文件 -->
<!-- 步骤2，准备一个呈现图标的盒子 就是div -->
<!-- 步骤3：初识话echarts实例对象 -->
<!-- 步骤4：准备配置项 -->
<!-- 步骤5：将配置项设置给echarts实例对象 -->
</head>
<body>
<!-- 步骤2，准备一个呈现图标的盒子 就是div-->
<div style="width:700px;height:500px;"></div>
<script>
// init()是echarts的实例对象
//参数，dom 决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'));
var xdata = ['小明','小红','小王','小李','田思思','王五','赵六','张三','李四','孙林','阿婷']
var ydata = [70,92,87,67,89,90,45,89,70,90,100]
// xAxis代表直角坐标系中的x轴， yAxis代表直角坐标系中的y轴，series代表系列列表，
// 步骤4：准备配置项
var option = {
title:{ //文本 可根据echarts官网进行查找
text:'成绩展示',//主标题
textStyle:{
color:'red',
},
borderWidth:5,//标题边框宽度
borderColor:'blue',//标题边框颜色
borderRadius:5,//标题的圆角
left:50,//从左移动
top:10,//从上移动
link:'https://www.baidu.com/' //主标题超链接 必须配合主标题使用
},
xAxis:{
type:'category',//类目轴
data:xdata,
},
yAxis:{
type:'value'//数值轴 设置了value就不需要设置data值了
},
series:{
name:'语文',
type:'bar',//柱状图 pie 饼图 line折线图 这里是图表的类型
data:ydata,
}
}
// 根据x与y轴的角色更换可让数据横向排列
//步骤5：将配置项设置给echarts实例对象 在echarts内部有一个setOption实例对象
mCharts.setOption(option)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<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>toolbox及tooltip的使用</title>
<!-- 引入echarts.js文件 -->
<script src="./lab/echarts.min.js"></script>
<!-- 步骤1：引入echarts.js文件 -->
<!-- 步骤2，准备一个呈现图标的盒子 就是div -->
<!-- 步骤3：初识话echarts实例对象 -->
<!-- 步骤4：准备配置项 -->
<!-- 步骤5：将配置项设置给echarts实例对象 -->
</head>
<body>
<!-- 步骤2，准备一个呈现图标的盒子 就是div-->
<div style="width:700px;height:500px;"></div>
<script>
// init()是echarts的实例对象
//参数，dom 决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'));
var xdata = ['小明','小红','小王','小李','田思思','王五','赵六','张三','李四','孙林','阿婷']
var ydata = [70,92,87,67,89,90,45,89,70,90,100]
// xAxis代表直角坐标系中的x轴， yAxis代表直角坐标系中的y轴，series代表系列列表，
// 步骤4：准备配置项
var option = {
title:{ //文本 可根据echarts官网进行查找
text:'成绩展示',//主标题
textStyle:{
color:'red',
},
borderWidth:5,//标题边框宽度
borderColor:'blue',//标题边框颜色
borderRadius:5,//标题的圆角
left:50,//从左移动
top:10,//从上移动
link:'https://www.baidu.com/' //主标题超链接 必须配合主标题使用
},
tooltip:{
// trigger:'item'//鼠标悬浮在柱状图上会显示出成绩
trigger:'axis', //坐标轴，在坐标轴上就显示
triggerOn:'click',//鼠标点击时就会触发
// triggerOn:'mouseover'//不显示效果
// formatter:'haha',//不管点击哪个学生成绩都是haha
// formatter:'{b}的成绩是{c}',//这里支持使用字符串模板和回调函数两种形式 具体每项代表什么可在官网查找
formatter:function(arg){
console.log(arg)
return arg[0].name+'的分数是:'+arg[0].data
}
},
toolbox:{
feature:{
saveAsImage:{},//导出图片的功能 将图片下载
dataView:{},//数据视图 可以点击编辑查看及修改
restore:{},//重置的功能 将数据还原
dataZoom:{},//区域缩放 同时也附加一个退出
magicType:{
type:['bar','line']//在不同情况下，可以让图片之间进行切换
}
}
},
xAxis:{
type:'category',//类目轴
data:xdata,
},
yAxis:{
type:'value'//数值轴 设置了value就不需要设置data值了
},
series:{
name:'语文',
type:'bar',//柱状图 pie 饼图 line折线图 这里是图表的类型
data:ydata,
}
}
// 根据x与y轴的角色更换可让数据横向排列
//步骤5：将配置项设置给echarts实例对象 在echarts内部有一个setOption实例对象
mCharts.setOption(option)
</script>
</body>
</html>
<!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>直角坐标系的常用配置</title>
<script src="./lab/echarts.min.js"></script>
</head>
<body>
<div style="width:600px; height:500px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'));
var xDataArr = ['张三','李四','王五','赵六','田思思','小李','闰土','小明','二妞','大强','茅台']
var yDataArr = [88,78,89,90,45,67,78,89,78,89,78]
var option = {
dataZoom:[
{
type:'slider', //左右滑块进行筛选 出现在x轴的下方
// type:'inside', //鼠标滚动或双击使得 左右滚动从而进行筛选
xAxisIndex:0 //指明哪个轴 进行缩放 x轴
},
{
type:'slider',
yAxisIndex:0, //指明哪个轴 进行缩放 y轴
start:0,//数据窗口范围的起始百分比
end:50 //数据窗口范围的结束百分比
//以上数据窗口范围的百分比控制之后 就会形成筛选 不在范围内的不显示 在范围内的显示出来
}
],
toolbox:{
feature:{
dataZoom:{} //区域缩放器
}
},
grid:{ //网格 可以设置大小及边框 x与y轴
show:true,
borderColor:'red',
},
xAxis:{
type:'category', //取值类型 value 或 category
data:xDataArr,
// position:'top'//让x轴上的类目轴置顶 即使得x在顶部
},
yAxis:{
type:'value',
// position:'right'//即y轴上的类目呈现在右侧
},
series:[
{
name:'语文',
type:'bar',
data:yDataArr,
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
<!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>折线统计图堆叠图</title>
<!-- 引入echarts.js文件 -->
<script src="./lab/echarts.min.js"></script>
</head>
<body>
<div style="width:700px;height:500px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'));
var xdata = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
var ydata1 = [3000,2800,2300,2400,2330,2900,3100,2300,3400,4000,3800,2500]
var ydata2 = [2000,3800,3300,1400,2330,2400,5100,2600,3500,4000,5800,2500]
var option={
xAxis:{
type:'category',
data:xdata,
// boundaryGap:false //紧挨边缘 与y轴紧挨着
},
yAxis:{
type:'value',
// scale:true //缩放脱离0值比例 例如数据相差较小时[200,201,202,199...] 一般看不出来，即这里可以使用scale:true 让数据不从0开始
//从而让数据更为明显精确 从当前数据中最小值起
},
series:[
{
// name:'康师傅1',
data:ydata1,
type:'line',
stack:'all', // 堆叠图 从低的一方到高的一方之间的差
areaStyle:{} //填充的背景颜色
},
{
// name:'康师傅2',
data:ydata2,
type:'line',
stack:'all',
areaStyle:{} //填充的背景颜色
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
<!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>折线统计图的基本实现</title>
<!-- 引入echarts.js文件 -->
<script src="./lab/echarts.min.js"></script>
</head>
<body>
<div style="width:700px;height:500px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'));
var xdata = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
var ydata = [3000,2800,2300,2400,2330,2900,3100,2300,3400,4000,3800,2500]
var option={
xAxis:{
type:'category',
data:xdata
},
yAxis:{
type:'value',
},
series:[
{
name:'康师傅',
data:ydata,
type:'line'
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
<!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>折线统计图常见的效果</title>
<!-- 引入echarts.js文件 -->
<script src="./lab/echarts.min.js"></script>
</head>
<body>
<div style="width:700px;height:500px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'));
var xdata = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
var ydata1 = [3000,2800,2300,2400,2330,2900,3100,2300,3400,4000,3800,2500]
var ydata2 = [2000,3800,3300,1400,2330,2400,5100,2600,3500,4000,5800,2500]
var option={
xAxis:{
type:'category',
data:xdata,
boundaryGap:false //紧挨边缘 与y轴紧挨着
},
yAxis:{
type:'value',
scale:true //缩放脱离0值比例 例如数据相差较小时[200,201,202,199...] 一般看不出来，即这里可以使用scale:true 让数据不从0开始
//从而让数据更为明显精确 从当前数据中最小值起
},
series:[
{
name:'康师傅',
data:ydata1,
type:'line',
markPoint:{ //显示数据的最大值及最小值
data:[
{
type:'max',
},
{
type:'min',
}
]
},
markLine:{//平均值
data:[
{
type:'average',
}
]
},
markArea:{
data:[
[ //开始值到结束值会在一个区间内通过阴影部分标注出来（柱状图）
{
xAxis:'1月', //开始值
},
{
xAxis:'2月', //结束值
}
],
[
{
xAxis:'7月', //开始值
},
{
xAxis:'8月', //结束值
}
]
]
},
smooth:true, //使得线条平滑
lineStyle:{ //风格
color:'green',//改变线条的颜色
type:'dotted' //线条 dotted //点线 solid //实线 dashed//虚线
},
areaStyle:{ //区域内部的背景颜色 又称填充风格
color:'pink'
}
},
{
name:'康师傅',
data:ydata1,
type:'line',
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<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>与seriex的配合使用及legend多数据筛选</title>
<!-- 引入echarts.js文件 -->
<script src="./lab/echarts.min.js"></script>
<!-- 步骤1：引入echarts.js文件 -->
<!-- 步骤2，准备一个呈现图标的盒子 就是div -->
<!-- 步骤3：初识话echarts实例对象 -->
<!-- 步骤4：准备配置项 -->
<!-- 步骤5：将配置项设置给echarts实例对象 -->
</head>
<body>
<!-- 步骤2，准备一个呈现图标的盒子 就是div-->
<div style="width:700px;height:500px;"></div>
<script>
// init()是echarts的实例对象
//参数，dom 决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'));
var xdata = ['小明','小红','小王','小李','田思思','王五','赵六','张三','李四','孙林','阿婷']
var ydata1 = [70,92,87,67,89,90,45,89,70,90,100] //语文成绩
var ydata2 = [60,72,78,70,67,50,75,67,90,80,80] //数学成绩
// xAxis代表直角坐标系中的x轴， yAxis代表直角坐标系中的y轴，series代表系列列表，
// 步骤4：准备配置项
var option = {
title:{ //文本 可根据echarts官网进行查找
text:'成绩展示',//主标题
textStyle:{
color:'red',
},
borderWidth:5,//标题边框宽度
borderColor:'blue',//标题边框颜色
borderRadius:5,//标题的圆角
left:50,//从左移动
top:10,//从上移动
link:'https://www.baidu.com/' //主标题超链接 必须配合主标题使用
},
tooltip:{
// trigger:'item'//鼠标悬浮在柱状图上会显示出成绩
trigger:'axis', //坐标轴，在坐标轴上就显示
triggerOn:'click',//鼠标点击时就会触发
// triggerOn:'mouseover'//不显示效果
// formatter:'haha',//不管点击哪个学生成绩都是haha
// formatter:'{b}的成绩是{c}',//这里支持使用字符串模板和回调函数两种形式 具体每项代表什么可在官网查找
formatter:function(arg){
console.log(arg)
return arg[0].name+'的分数是:'+arg[0].data
}
},
toolbox:{
feature:{
saveAsImage:{},//导出图片的功能 将图片下载
dataView:{},//数据视图 可以点击编辑查看及修改
restore:{},//重置的功能 将数据还原
dataZoom:{},//区域缩放 同时也附加一个退出
magicType:{
type:['bar','line']//在不同情况下，可以让图片之间进行切换
}
}
},
xAxis:{
type:'category',//类目轴
data:xdata,
},
yAxis:{
type:'value'//数值轴 设置了value就不需要设置data值了
},
series:[
{ //每一门成绩就是一个对象，所以可以将所有人的成绩放在一个数组中展示
name:'语文',
type:'bar',//柱状图 pie 饼图 line折线图 这里是图表的类型
data:ydata1,
},
{
name:'数学',
type:'bar',//柱状图 pie 饼图 line折线图 这里是图表的类型
data:ydata2,
},
],
legend:{ //与series配合使用，这里需要与series内部的name值进行合用 对系列的筛选
data:['语文','数学']
}
}
// 根据x与y轴的角色更换可让数据横向排列
//步骤5：将配置项设置给echarts实例对象 在echarts内部有一个setOption实例对象
mCharts.setOption(option)
</script>
</body>
</html>
<!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>散点图涟漪效果等</title>
<script src="./lab/echarts.min.js"></script>
</head>
<body>
<div style="width:600px; height:500px;"></div>
<script >
var eater = [
{"gender":"male","height":189,"weight":64.1},
{"gender":"male","height":176,"weight":69.9},
{"gender":"male","height":180,"weight":69.1},
{"gender":"male","height":168,"weight":70.2},
{"gender":"male","height":160,"weight":79.1},
{"gender":"male","height":160,"weight":64.1},
{"gender":"male","height":190,"weight":74.1},
{"gender":"male","height":170,"weight":44.1},
{"gender":"male","height":190,"weight":80.9},
{"gender":"male","height":189,"weight":78.0},
{"gender":"male","height":161,"weight":61.0},
{"gender":"male","height":150,"weight":70.0},
{"gender":"male","height":180,"weight":62.1},
{"gender":"male","height":156,"weight":64.7},
{"gender":"male","height":189,"weight":78.1},
{"gender":"male","height":166,"weight":69.1},
{"gender":"male","height":187,"weight":63.1},
{"gender":"male","height":184,"weight":74.3},
{"gender":"male","height":163,"weight":67.1},
{"gender":"male","height":180,"weight":68.1},
{"gender":"male","height":180,"weight":69.1},
{"gender":"male","height":178,"weight":87.0},
{"gender":"male","height":190,"weight":89.1},
{"gender":"male","height":180,"weight":77.3},
{"gender":"male","height":184,"weight":68.6},
{"gender":"male","height":185,"weight":69.9},
{"gender":"male","height":182,"weight":67.0},
{"gender":"male","height":181,"weight":98.0},
{"gender":"male","height":182,"weight":68.9},
{"gender":"male","height":188,"weight":68.3},
{"gender":"male","height":191,"weight":62.5},
{"gender":"male","height":167,"weight":81.0},
{"gender":"male","height":173,"weight":62.4},
{"gender":"male","height":175,"weight":61.0},
{"gender":"male","height":176,"weight":62.4},
{"gender":"male","height":189,"weight":64.2},
{"gender":"male","height":178,"weight":66.2},
{"gender":"male","height":167,"weight":67.0},
{"gender":"male","height":178,"weight":68.8},
{"gender":"male","height":189,"weight":69.0},
{"gender":"male","height":167,"weight":79.9},
{"gender":"male","height":188,"weight":80.0},
{"gender":"male","height":190,"weight":71.9},
{"gender":"male","height":167,"weight":86.1},
{"gender":"male","height":156,"weight":90.9},
{"gender":"male","height":167,"weight":89.9},
{"gender":"male","height":189,"weight":98.8},
{"gender":"male","height":178,"weight":78.9},
{"gender":"male","height":168,"weight":67.1},
{"gender":"male","height":180,"weight":64.1},
{"gender":"male","height":180,"weight":84.1},
{"gender":"male","height":178,"weight":69.9},
{"gender":"male","height":160,"weight":69.1},
{"gender":"male","height":188,"weight":70.2},
{"gender":"male","height":150,"weight":79.1},
{"gender":"male","height":150,"weight":64.1},
{"gender":"male","height":160,"weight":74.1},
{"gender":"male","height":150,"weight":64.1},
{"gender":"male","height":160,"weight":80.9},
{"gender":"male","height":179,"weight":78.0},
{"gender":"male","height":177,"weight":61.0},
{"gender":"male","height":176,"weight":60.0},
{"gender":"male","height":160,"weight":62.1},
{"gender":"male","height":186,"weight":74.7},
{"gender":"male","height":169,"weight":68.1},
{"gender":"male","height":176,"weight":69.1},
{"gender":"male","height":157,"weight":83.1},
{"gender":"male","height":152,"weight":64.3},
{"gender":"male","height":153,"weight":57.1},
{"gender":"male","height":160,"weight":68.1},
{"gender":"male","height":170,"weight":89.1},
{"gender":"male","height":180,"weight":64.1},
{"gender":"male","height":186,"weight":39.9},
{"gender":"male","height":170,"weight":69.1},
{"gender":"male","height":168,"weight":70.2},
{"gender":"male","height":160,"weight":79.1},
{"gender":"male","height":160,"weight":64.1},
{"gender":"male","height":167,"weight":74.1},
{"gender":"male","height":170,"weight":64.1},
{"gender":"male","height":190,"weight":80.9},
{"gender":"male","height":189,"weight":78.0},
{"gender":"male","height":191,"weight":61.0},
{"gender":"male","height":150,"weight":60.0},
{"gender":"male","height":180,"weight":72.1},
{"gender":"male","height":156,"weight":64.7},
{"gender":"male","height":189,"weight":78.1},
{"gender":"male","height":166,"weight":69.1},
{"gender":"male","height":187,"weight":63.1},
{"gender":"male","height":184,"weight":84.3},
{"gender":"male","height":163,"weight":97.1},
{"gender":"male","height":178,"weight":68.1},
{"gender":"male","height":182,"weight":69.1},
{"gender":"male","height":156,"weight":54.7},
{"gender":"male","height":179,"weight":68.1},
{"gender":"male","height":156,"weight":64.0},
{"gender":"male","height":177,"weight":43.1},
{"gender":"male","height":164,"weight":64.3},
{"gender":"male","height":183,"weight":65.3},
{"gender":"male","height":178,"weight":63.1},
{"gender":"male","height":168,"weight":72.9},
]
//创建一个空数组 将遍历好的数据存入数组中形成二维数组
var axisData = []
for (var i=0;i<eater.length;i++){
var height = eater[i].height
var weight = eater[i].weight
var data = [height,weight]
axisData.push(data)
}
console.log(axisData)
// init()是echarts的实例对象
//参数，dom 决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'))
//准备配置项
var option={
xAxis:{
type: 'value',
scale:true
},
yAxis:{
type:'value',
scale:true
},
series:[
{
//分步类型：散点型
// type:'scatter',//普通散点图效果
type:'effectScatter',//涟漪动画
showEffectOn:'emphasis',//鼠标移入时涟漪效果才显示出来 emphasis鼠标移入时显示涟漪效果 //render指的是每一个涟漪动画自动的显示出来默认值
rippleEffect:{ //涟漪动画效果 使得动画放大
scale:9
},
//数据
data:axisData,
//使散点图的圆点变大 这里symbolSize是支持回调函数的
symbolSize:function(arg){
console.log(arg)
//由于身高是以cm为单位的，所以在这里我们需要除以100
var height = arg[0]/100
var weight = arg[1]
//数学公式
//bmi = 体重/(身高*身高) 大于28 则是肥胖 小于28则不胖 三点即小些
var bmi = weight / (height*height)
if(bmi>28){
//符合条件 肥胖的即散点大些
return 20
}
//不符合条件 肥胖的即散点小些
return 5
},
itemStyle:{
color:function(btg){ // 这样可以实现肥胖与不肥胖的人都有不一样的颜色展示不同散点程度
console.log('#',btg) //通过打印可得 身高与体重的值在data内 所以这里是arg.data[0]
//由于身高是以cm为单位的，所以在这里我们需要除以100
var height = btg.data[0]/100
var weight = btg.data[1]
//数学公式
//bmi = 体重/(身高*身高) 大于28 则是肥胖 小于28则不胖 三点即
var bmi = weight / (height*height)
if(bmi>28){
//符合条件 肥胖的即散点大些
return 'red'
}
//不符合条件 肥胖的即散点小些
return 'green'
}
}
}
]
}
//气泡图 首先要保证大小不一致 以及颜色
mCharts.setOption(option)
</script>
</body>
</html>
<!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>雷达图的实现</title>
<script src="./lab/echarts.min.js"></script>
</head>
<body>
<div style="width:700px; height:600px;"></div>
<script>
//1,ECharts最基本的代码结构
//2,定义各个维度的最大值，通过radar属性配置
//易用性，功能性，拍照，跑分，续航，每个维度的最大值都是100
//3,准备产品数据,设置给series下的data
//4,将type的值设置为radar
//华为手机1:80,90,80,82,90
//中兴手机1:70,82,75,70,78
var mCharts = 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:{ //radar指的是雷达 配置各个维度的最大值
indicator:dataMax, //indicator指的是指示器
shape:'circle', //shape绘制类型 配置雷达图最外层的图形 circle雷达图最外层形成一个圆形 polygon最外层是多边形 (默认值)
},
series:[
{
type:'radar', //类型是雷达图
label:{ //设置标签的样式
show:true //显示数值
},
areaStyle:{},//将每一个产品的雷达图形成一个阴影的面积
data:[ //两条数据评分
{
name:'华为手机1',
value:[80,90,80,82,90]
},
{
name:'中兴手机1',
value:[70,82,75,70,78]
}
]
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
<!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>地图图表的基本实现</title>
<script src="./lab/echarts.min.js"></script>
<script src="./lab/jquery.min.js"></script>
</head>
<body>
<div style="width:700px; height:500px;"></div>
<script>
//1,ECharts最基本的代码解构
//2,准备中国地图的矢量数据
//3,使用Ajax获取矢量地图数据
//4,在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('chinaMap',矢量地图数据)
//5,配置geo的type为'map' ,map为'chinaMap'
var mCharts = echarts.init(document.querySelector('div'));
// 使用Ajax获取数据
$.get('./json/map/china.json',function(ret){
//打印出来的是中国各个省份的经纬度及矢量地图数据
// console.log(ret)
//注册矢量地图数据
echarts.registerMap('chinaMap',ret)//第一个数值是别名 第二个数值是函数的 参数
var option ={ //必须要在注册好之后就执行 不能放在外层执行
geo:{
type:'map', //类型是地图map
map:'chinaMap',//数据 创建的别名与上面注册的别名一致
roam:true,//设置允许缩放及拖拽的效果
label:{
show:true,//显示省份的名称
},
zoom:1,//设置初识话的缩放比例
center:[87.617733,43.792818]//设置地图中心带你的坐标
}
}
mCharts.setOption(option)
})
</script>
</body>
</html>
<!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>地图的常见效果_显示某个省份的地图</title>
<script src="./lab/echarts.min.js"></script>
<script src="./lab/jquery.min.js"></script>
</head>
<body>
<div style="width:700px; height:500px;"></div>
<script>
// 1,加载安徽第图的矢量数据
// 2,在Ajax的回调函数中注册地图矢量数据 echarts,registerMap('anhui' ,矢量地图数据)
// 3,配合geo的type为'map,map为anhui
// 4,通过zoom调整缩放比例
// 5,通过center调整中心点
var mCharts = echarts.init(document.querySelector('div'));
// 使用Ajax获取数据
$.get('./json/map/anhui.json',function(reg){
//打印出来的是中国各个省份的经纬度及矢量地图数据
// console.log(ret)
//注册矢量地图数据
echarts.registerMap('chinaMap',reg)//第一个数值是别名 第二个数值是函数的 参数
//省份与中国地图的加载只有一样不同 其余相同 获取数据的地址有所不同
console.log(reg)
echarts.registerMap('anhui',reg)//注册安徽地图
var option ={ //必须要在注册好之后执行
geo:{
type:'map',
map:'anhui',
zoom:1.2,
label:{
show:true
},
center:[116.507676, 31.752889]//通过打印可以查看到六安的经纬度直接将经纬度赋值即可 可以通过矢量地图获取数据
//调整中心点
}
}
mCharts.setOption(option)
})
</script>
</body>
</html>
<!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>不同城市显示不同颜色之与涟漪动画结合</title>
<script src="./lab/echarts.min.js"></script>
<script src="./lab/jquery.min.js"></script>
</head>
<body>
<div style="width:700px; height:500px;"></div>
<script>
//1,给series下增加一个新的对象
//2,准备数据散点数据 ，配置给series下的另一个对象
//3,配置series下的新对象的type值为effectScatter
//4,指明散点图的坐标系统未geo
//5,调整涟漪动画效果
var airData = [//空气质量的数据
{name:'北京',value:39.92},
{name:'天津',value:57.92},
{name:'上海',value:89.90},
{name:'重庆',value:90.0},
{name:'河北',value:68.56},
{name:'河南',value:67.23},
{name:'云南',value:34.34},
{name:'辽宁',value:16.92},
{name:'黑龙江',value:67.78},
{name:'湖南',value:54.78},
{name:'安徽',value:23.56},
{name:'山东',value:78.80},
{name:'新疆',value:56.78},
{name:'江苏',value:116},
{name:'浙江',value:89.35},
{name:'江西',value:35.80},
{name:'湖北',value:78.90},
{name:'广西',value:96.35},
{name:'甘肃',value:98.67},
{name:'山西',value:89.78},
{name:'内蒙古',value:56.78},
{name:'陕西',value:39.92},
{name:'吉林',value:89.67},
{name:'福建',value:56.87},
{name:'贵州',value:99.65},
{name:'广东',value:65.66},
{name:'青海',value:34.45},
{name:'西藏',value:34.56},
{name:'四川',value:114},
{name:'宁夏',value:55.78},
{name:'海南',value:67.35},
{name:'台湾',value:56.67},
{name:'香港',value:56.89},
{name:'澳门',value:67.78},
{name:'南海诸岛',value:56}
]
var scatter = [ //涟漪动画的数据
{
value:[117.283042,31.86119]
}
]
var mCharts = echarts.init(document.querySelector('div'));
//百度地图的api ‘./json/map/china.json’
$.get('./json/map/china.json',function(ret){
echarts.registerMap('chinaMap',ret)//第一个数值是别名 第二个数值是函数的 参数
var option ={ //必须要在注册好之后就执行 不能放在外层执行
geo:{
type:'map', //类型是地图map
map:'chinaMap',//数据 创建的别名与上面注册的别名一致
roam:true,//设置允许缩放及拖拽的效果
label:{
show:true,//显示省份的名称
}
},
series:[
{
type:'map',//类型：地图
data:airData,//获取数据
geoIndex:0,//将空气质量的数据和元素是第0个geo配置关联在一起
},
{
data:scatter,//配置散点的坐标数据
type:'effectScatter',//哪一种图标
coordinateSystem:'geo',//指明散点使用的坐标系统 geo的坐标系统 //即出现动画
rippleEffect:{ //设置涟漪动画是缩放比例10倍
scale:9
}
}
],
visualMap:{//给每个地区添加填充色
min:0,//空气质量最小值
max:200,//空气质量最大值
inRange:{
color:['white','red'],//根据每个城市的空气质量显示不同颜色 这里指的是从白色到红色之间的渐变
},
calculable:true,//筛选多少区间内的城市空气质量 渐变色 出现滑块的效果
},
}
mCharts.setOption(option)
})
</script>
</body>
</html>
<!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>不同城市显示不同的颜色</title>
<script src="./lab/echarts.min.js"></script>
<script src="./lab/jquery.min.js"></script>
</head>
<body>
<div style="width:700px; height:500px;"></div>
<script>
//1,显示基本的中国地图
//2,将空气质量的数据设置给series下的对象
//3,将series下的数据和geo关联起来
//4,配置visualMap
var airData = [//空气质量的数据
{name:'北京',value:39.92},
{name:'天津',value:57.92},
{name:'上海',value:89.90},
{name:'重庆',value:90.0},
{name:'河北',value:68.56},
{name:'河南',value:67.23},
{name:'云南',value:34.34},
{name:'辽宁',value:16.92},
{name:'黑龙江',value:67.78},
{name:'湖南',value:54.78},
{name:'安徽',value:23.56},
{name:'山东',value:78.80},
{name:'新疆',value:56.78},
{name:'江苏',value:116},
{name:'浙江',value:89.35},
{name:'江西',value:35.80},
{name:'湖北',value:78.90},
{name:'广西',value:96.35},
{name:'甘肃',value:98.67},
{name:'山西',value:89.78},
{name:'内蒙古',value:56.78},
{name:'陕西',value:39.92},
{name:'吉林',value:89.67},
{name:'福建',value:56.87},
{name:'贵州',value:99.65},
{name:'广东',value:65.66},
{name:'青海',value:34.45},
{name:'西藏',value:34.56},
{name:'四川',value:114},
{name:'宁夏',value:55.78},
{name:'海南',value:67.35},
{name:'台湾',value:56.67},
{name:'香港',value:56.89},
{name:'澳门',value:67.78},
{name:'南海诸岛',value:56}
]
var mCharts = echarts.init(document.querySelector('div'));
$.get('./json/map/china.json',function(ret){
echarts.registerMap('chinaMap',ret)//第一个数值是别名 第二个数值是函数的 参数
var option ={ //必须要在注册好之后就执行 不能放在外层执行
geo:{
type:'map', //类型是地图map
map:'chinaMap',//数据 创建的别名与上面注册的别名一致
roam:true,//设置允许缩放及拖拽的效果
label:{
show:true,//显示省份的名称
}
},
series:[
{
type:'map',//类型：地图
data:airData,//获取数据
geoIndex:0,//将空气质量的数据和元素是第0个geo配置关联在一起
}
],
visualMap:{//给每个地区添加填充色
min:0,//空气质量最小值
max:200,//空气质量最大值
inRange:{
color:['white','red'],//根据每个城市的空气质量显示不同颜色 这里指的是从白色到红色之间的渐变
},
calculable:true,//筛选多少区间内的城市空气质量 渐变色 出现滑块的效果
},
}
mCharts.setOption(option)
})
</script>
</body>
</html>
<!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>饼图的基本实现</title>
<script src="./lab/echarts.min.js"></script>
</head>
<body>
<div style="width:600px; height:500px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'));
//创建饼图数据 数组 数组中包含多个对象
var pieData = [
{name:'淘宝',value:11231},
{name:'京东',value:22673},
{name:'唯品会',value:6123},
{name:'1号店',value:8989},
{name:'聚美优品',value:6700},
]
var option ={
series:[ //由于饼图没有x与y轴 所以在这里只需要写series即可
{
type:'pie',
data:pieData,
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
<!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>饼图的常见效果</title>
<script src="./lab/echarts.min.js"></script>
</head>
<body>
<div style="width:600px; height:500px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'));
//创建饼图数据 数组 数组中包含多个对象
var pieData = [
{name:'淘宝',value:11231},
{name:'京东',value:22673},
{name:'唯品会',value:6123},
{name:'1号店',value:8989},
{name:'聚美优品',value:6700},
]
var option ={
series:[ //由于饼图没有x与y轴 所以在这里只需要写series即可
{
type:'pie',
data:pieData,
label:{
show:true, //显示文字
// formatter 决定文字显示的内容
formatter:function(arg){
console.log(arg);
return arg.name+'平台'+arg.value+'元\n'+arg.percent+'%'
}
},
// radius:20,//饼图的半径
// radius:'20%', //百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
// radius:['50%','70%'], //第0个元素代表的是内院的半径 第1个元素代表外圆的半径
roseType:'radius' , // 南丁格尔图 所占面积越大 那么半径也就越大 从而越突出 所以每一个饼图的半径是不同的
// selectedMode:'single', // 选中的效果 能够将选中的区域偏离圆点一小段距离
selectedMode:'multiple', // 选中的效果 能够将选中的区域偏离圆点一小段距离
selectedOffset:30, //选中偏移量
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
<!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>仪表盘图</title>
<script src="./lab/echarts.min.js"></script>
</head>
<body>
<div style="width:600px;height:500px;"></div>
<script>
//1,ECharts最基本的代码结构
//2,准备数据，设置给series下的data
//3,将type的值设置为gauge
var mCharts = echarts.init(document.querySelector('div'));
var option = {
series:[
{
type:'gauge',//类型
data:[
{
value :97,
itemStyle:{ //指针的样式
color:'pink'
}
},//每一个对象就代表一个指针
{ //第二个指针
value:56,
itemStyle:{ //指针的样式
color:'green'
}
}
],
min:50,//min 和max 控制仪表盘数值的范围
max:100,
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>