echart图表
公共样式：
ul {
width: 400px;
height: 40px;
margin: 20px auto;
/* line-height: 40px; */
}
ul li {
float: left;
list-style: none;
}
ul li a {
display: block;
font-size: 18px;
color: orange;
text-decoration: none;
margin: 0 10px;
padding: 5px;
border: 1px solid transparent;
}
ul li a:hover {
border-radius: 5px;
border: 1px solid pink;
}
柱状图：
<!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>柱状图作业：01-06,13-15</title>
<script src="./js/echarts.js"></script>
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<!-- https://echarts.apache.org/zh/option.html手册 -->
<!-- 图标呈现的位置，样式是行内样式 -->
<header>
<ul>
<li>
<a href="./bar.html">柱状图</a>
</li>
<li>
<a href="./effectScatter.html">散点图</a>
</li>
<li>
<a href="./line.html">折线图</a>
</li>
<li>
<a href="./pie.html">饼图</a>
</li>
<li>
<a href="./map.html">地图</a>
</li>
</ul>
</header>
<div style="width: 920px;height: 630px;margin: 20px auto;"></div>
<script>
// 图表初始化
var myEcharts = echarts.init(document.querySelector("div"));
var xData = ['小二', '张三', '李四', '王五', '周六', '田七'];
var yData1 = [88, 90, 70, 76, 84, 97];
var yData2 = [77, 68, 80, 76, 80, 69];
// 配置项
var option = {
// 控制区域缩放效果的实现（筛选数据）可以与toolbox中feature中的dataZoom一样
dataZoom: [{
// 缩放类型，slider代表滑块，insider代表依靠鼠标滚轮
type: 'slider',
xAxisIndex: 0
}, {
// 缩放类型，slider代表滑块，insider代表依靠鼠标滚轮
type: 'slider',
yAxisIndex: 0,
// 数据筛选的初始值和结束值，百分比
// start: 0,
// end: 80
}],
// 直角坐标系的常用配置-grid
grid: {
// 是否显示边框
show: true,
// 边框宽度
borderWidth: 1,
// 边框颜色
borderColor: '#fac858',
// 离左侧，顶部的距离
left: 100,
top: 100,
// 图标的宽高
width: 750,
height: 450
},
// 标题组件
title: {
// 主标题文本
text: "图表-柱状图",
// 文本超连接（跳转）
link: "https://baidu.com",
// 新页面打开方式：self当前窗口打开；blank新窗口打开
target: "self",
// 是否显示标题组件
// show: false
// textStyle是一个对象，所以后面加{},字体的其他样式在{}里面以键值对存在
textStyle: {
color: 'orange',
fontFamily: "微软雅黑",
// font-size变为fontSize,去掉-，-后面的单词首字母大写
fontSize: 20
},
// 副标题文本，设置的内容跟标题文本一样
subtext: '这是一个作业练习',
// title离左侧的距离
// left: "center",
borderWidth: 1,
borderColor: '#fac858',
borderRadius: 5,
},
// 提示框
tooltip: {
// 提示框触发方式
triggerOn: "click",
// 触发类型
trigger: "axis",
formatter: function(data) {
// console.log(data);
// 提示框文字格式化
return data[0].name + '的分数是' + data[0].data + "分"
}
},
// 工具箱按钮
toolbox: {
feature: {
// 导出保存为图片按钮
saveAsImage: {},
// 查看数据列表
dataView: {},
// 重置，刷新按钮
restore: {},
// 区域缩放
dataZoom: {},
// 图标类型切换
magicType: {
type: [
'bar', 'line'
]
}
}
},
// 图例，图例中的data数据来源于series中每一个对象的name，图例可以帮助我们对图标进行筛选
legend: {
data: ['语文', '数学']
},
// 直角坐标系的常用配置-axis
xAxis: {
// category是类目，data就是类目显示的内容：['小明', '小红', '小王']
type: "category",
// 类目的内容，是一个数组
data: xData
},
yAxis: {
// value是指值，对应series中的data
// y轴是语文的数据，内容为[80, 90, 100]
type: 'value'
},
series: [{
name: '语文',
// bar是柱状图
type: 'bar',
// y轴的内容
data: yData1,
// 最值（大小）
markPoint: {
data: [{
type: 'max',
name: "最大值"
}, {
type: 'min',
name: "最小值"
}]
},
// 平均值线
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
},
// 每一个类目柱的数值
label: {
// 是否显示数值
show: true,
// 旋转角度
// rotate: 60,
// 显示的位置
position: 'top'
},
// 柱的宽度，百分比
barWidth: '30%',
}, {
name: '数学',
// bar是柱状图
type: 'bar',
// y轴的内容
data: yData2,
// 最值（大小）
markPoint: {
data: [{
type: 'max',
name: "最大值"
}, {
type: 'min',
name: "最小值"
}]
},
// 平均值线
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
},
// 每一个类目柱的数值
label: {
// 是否显示数值
show: true,
// 旋转角度
// rotate: 60,
// 显示的位置
position: 'top'
},
// 柱的宽度，百分比
barWidth: '30%',
}]
}
// setOption设置配置项
myEcharts.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>折线图作业：07-10</title>
<script src="./js/echarts.js"></script>
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<header>
<ul>
<li>
<a href="./bar.html">柱状图</a>
</li>
<li>
<a href="./effectScatter.html">散点图</a>
</li>
<li>
<a href="./line.html">折线图</a>
</li>
<li>
<a href="./pie.html">饼图</a>
</li>
<li>
<a href="./map.html">地图</a>
</li>
</ul>
</header>
<div style="width: 600ps;height: 600px;margin: 20px auto;"></div>
<script>
var xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
var yData1 = ['500', '450', '580', '490', '400', '800', '700', '900', '600', '750', '460', '530'];
var yData2 = ['380', '650', '780', '890', '600', '400', '450', '460', '400', '550', '560', '430'];
var myLine = echarts.init(document.querySelector("div"));
var option = {
// 设置图的颜色
color: ['#fac858', '#fac858'],
xAxis: {
type: "category",
data: xData,
// x轴的第一个元素与y轴是否要存在距离
// false则是和y轴贴一起
boundaryGap: false
},
yAxis: {
type: 'value',
// 留白政策（去掉无数据，占位的区域）
scale: true
},
series: [{
// 图标类型为折线图
type: "line",
name: "夏季销量",
data: yData1,
// 最值（标记点）
markPoint: {
data: [{
type: "max",
name: '最大值'
}, {
type: "min",
name: '最小值'
}]
},
// 平均值线（标记线）
markLine: {
data: [{
type: "average",
name: '平均值'
}]
},
// 标记区域
markArea: {
data: [
// 标记1月到2月
[{
xAxis: '1月'
}, {
xAxis: '2月'
}],
// 标记7月到8月
[{
xAxis: '7月'
}, {
xAxis: '8月'
}]
]
},
// 是否为平滑的曲线
smooth: true,
// 推叠图的设置,两个要取不一样的名字，不然那结果会累加
stack: 'y1',
// 曲线和x轴之间形成的区域设置
areaStyle: {
color: '#DF3033'
}
}, {
// 图标类型为折线图
type: "line",
name: "冬季销量",
data: yData2,
// 最值（标记点）
markPoint: {
data: [{
type: "max",
name: '最大值'
}, {
type: "min",
name: '最小值'
}]
},
// 平均值线（标记线）
markLine: {
data: [{
type: "average",
name: '平均值'
}]
},
// 标记区域
markArea: {
data: [
// 标记1月到2月
[{
xAxis: '1月'
}, {
xAxis: '2月'
}],
// 标记7月到8月
[{
xAxis: '7月'
}, {
xAxis: '8月'
}]
],
itemStyle: {
color: 'rgba(154, 96, 180,.6)'
}
},
// 是否为平滑的曲线
smooth: true,
// 推叠图的设置
stack: 'y2',
// 曲线和x轴之间形成的区域设置
areaStyle: {
color: '#F79100'
}
}]
}
myLine.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>散点图作业：11-12</title>
<script src="./js/echarts.js"></script>
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<header>
<ul>
<li>
<a href="./bar.html">柱状图</a>
</li>
<li>
<a href="./effectScatter.html">散点图</a>
</li>
<li>
<a href="./line.html">折线图</a>
</li>
<li>
<a href="./pie.html">饼图</a>
</li>
<li>
<a href="./map.html">地图</a>
</li>
</ul>
</header>
<div style="width: 600px;height: 600px;margin: 0 auto;"></div>
<script>
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 myEcharts = echarts.init(document.querySelector("div"));
var dataArray = [];
for (var i = 0; i < data.length; i++) {
var height = data[i].height;
var weight = data[i].weight;
var newArr = [height, weight];
dataArray.push(newArr);
}
var option = {
// color: ['#fac858'],
xAxis: {
type: "value",
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [{
// type: 'scatter',
// 知名图标为带涟漪动画的散点图
type: 'effectScatter',
// 出现涟漪动画的实际 render emphasis
// 鼠标经过散点时出现的动画
showEffectOn: 'emphasis',
rippleEffect: {
// 动画范围（缩放比例）
scale: 5
},
data: dataArray,
// 控制散点的大小
symbolSize: function(res) {
var height = res[0] / 100;
var weight = res[1];
// bmi大于28就代表肥胖
var bmi = weight / (height * height);
if (bmi > 28) {
return 20;
}
return 5;
},
// 控制散点的样式
itemStyle: {
color: function(res) {
var height = res.data[0] / 100;
var weight = res.data[1];
var bmi = weight / (height * height);
if (bmi > 28) {
return 'pink';
}
return 'orange';
}
}
}]
}
myEcharts.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>饼图作业：16-17</title>
<script src="./js/echarts.js"></script>
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<header>
<ul>
<li>
<a href="./bar.html">柱状图</a>
</li>
<li>
<a href="./effectScatter.html">散点图</a>
</li>
<li>
<a href="./line.html">折线图</a>
</li>
<li>
<a href="./pie.html">饼图</a>
</li>
<li>
<a href="./map.html">地图</a>
</li>
</ul>
</header>
<div style="width: 800px;height: 600px;margin: 0 auto;"></div>
<script>
var myEcharts = echarts.init(document.querySelector("div"));
// dataArray就是给饼图的数据，是一个数组，数组中存放的是对象，每一个对象中，需要有name和value
var dataArray = [{
name: '淘宝',
value: 323456
}, {
name: '京东',
value: 301546
}, {
name: '唯品会',
value: 256894
}, {
name: '聚美优品',
value: 197543
}, {
name: '拼多多',
value: 257543
}]
var option = {
series: [{
type: 'pie',
data: dataArray,
// 饼图的文字显示
label: {
// 是否显示文字
show: true,
// 文字显示的内容与格式
formatter: function(data) {
return data.name + '\n' + data.value + '元\n' + data.percent + '%'
}
},
// 饼图的半径
// radius: 200,
// 原始饼图半径的百分比
// radius: '50%',
// 同心圆效果，中间镂空，第一个参数是內圆的半径，第二参数是外圆的半径，內圆的半径要比外圆的半径小
// radius: ['50%', '75%'],
// 南丁格尔图，每一块的区域半径是不同的，按占的百分比算比例
roseType: 'radius',
// 点击选中的区域，该区域将偏离圆心一小段距离，再点击一次就会回到原位
// single：点击另一块区域后，上一个区域会恢复回原位，最多只有一个区域会偏离圆心
selectedMode: 'single',
// multiple：点击另一块区域后，上一块区域不会恢复回原位，最多是所有区域都偏离圆心
// selectedMode: 'multiple'
// 偏离圆心的距离
selectedOffset: 10
}]
}
myEcharts.setOption(option);
</script>
</body>
</html>
地图：
地图还要另外引入一个jq包
<script src="./js/jquery-1.11.0.js"></script>
<script src="./js/echarts.js"></script>
而且也要有中国的各个省份的矢量地图数据的json包
./js/china.json
<!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="./js/jquery-1.11.0.js"></script>
<script src="./js/echarts.js"></script>
<link rel="stylesheet" href="./css/public.css">
</head>
<body>
<header>
<ul>
<li>
<a href="./bar.html">柱状图</a>
</li>
<li>
<a href="./effectScatter.html">散点图</a>
</li>
<li>
<a href="./line.html">折线图</a>
</li>
<li>
<a href="./pie.html">饼图</a>
</li>
<li>
<a href="./map.html">地图</a>
</li>
</ul>
</header>
<div style="width: 800px;height: 600px;margin: 0 auto;border: 1px solid #5470c6;"></div>
<script>
var myEcharts = echarts.init(document.querySelector("div"));
$.get("./js/china.json", function(res) {
// res就是中国的各个省份的矢量地图数据
echarts.registerMap('chinaMap', res);
var option = {
geo: {
type: 'map',
// map的值'chinaMap'和registerMap的第一个参数一致
map: 'chinaMap',
// 设置允许缩放以及拖动的效果
roam: true,
label: {
// 是否展示标签
show: true,
color: 'white',
align: 'center'
},
// 高亮（鼠标经过）状态下的多边形和标签样式
emphasis: {
label: {
show: true,
color: "red",
fontSize: 26
},
itemStyle: {
areaColor: 'rgba(252, 131, 83,.5)'
}
},
// 设置初始化缩放比例
zoom: 1,
left: 200,
top: -10,
// 设置地图中心点的坐标
// 参数是经纬度
center: [116.405285, 39.904989],
// 各省份区域的多边形的图形样式
itemStyle: {
borderColor: '#fac858',
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0.2,
color: '#fc8452' // 0% 处的颜色
}, {
offset: 0.9,
color: '#ee6666' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
};
myEcharts.setOption(option);
})
</script>
</body>
</html>