364 lines
12 KiB
HTML
Executable File
364 lines
12 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
|
||
<html>
|
||
|
||
<head>
|
||
|
||
<meta charset="utf-8">
|
||
<title>绘制第一个图表</title>
|
||
<script src="../js/echarts.min.js"></script>
|
||
<script src="../js/d3.min.js"></script>
|
||
<script src="../js/china.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
|
||
<div id="main" style="width: 1200px;height:500px;"></div>
|
||
<script>
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
// 使用ECharts库创建一个中国地图，并显示各个省份的销售数据
|
||
var mapName = 'china'
|
||
var the_sales_province = [
|
||
{ name: "北京", value: 199 },
|
||
{ name: "天津", value: 42 },
|
||
{ name: "河北", value: 102 },
|
||
{ name: "山西", value: 81 },
|
||
{ name: "内蒙古", value: 47 },
|
||
{ name: "辽宁", value: 67 },
|
||
{ name: "吉林", value: 82 },
|
||
{ name: "黑龙江", value: 123 },
|
||
{ name: "上海", value: 24 },
|
||
{ name: "江苏", value: 92 },
|
||
{ name: "浙江", value: 114 },
|
||
{ name: "安徽", value: 109 },
|
||
{ name: "福建", value: 116 },
|
||
{ name: "江西", value: 91 },
|
||
{ name: "山东", value: 119 },
|
||
{ name: "河南", value: 137 },
|
||
{ name: "湖北", value: 116 },
|
||
{ name: "湖南", value: 114 },
|
||
{ name: "重庆", value: 91 },
|
||
{ name: "四川", value: 125 },
|
||
{ name: "贵州", value: 62 },
|
||
{ name: "云南", value: 83 },
|
||
{ name: "西藏", value: 9 },
|
||
{ name: "陕西", value: 80 },
|
||
{ name: "甘肃", value: 56 },
|
||
{ name: "青海", value: 10 },
|
||
{ name: "宁夏", value: 18 },
|
||
{ name: "新疆", value: 180 },
|
||
{ name: "广东", value: 123 },
|
||
{ name: "广西", value: 59 },
|
||
{ name: "海南", value: 14 },
|
||
];
|
||
|
||
var geoCoordMap = {}; // 空对象，用于存储地理坐标信息
|
||
var the_profit_province = [
|
||
{ name: "北京", value: 9 },
|
||
{ name: "天津", value: 2 },
|
||
{ name: "河北", value: 2 },
|
||
{ name: "山西", value: 1 },
|
||
{ name: "内蒙古", value: 7 },
|
||
{ name: "辽宁", value: 7 },
|
||
{ name: "吉林", value: 2 },
|
||
{ name: "黑龙江", value: 3 },
|
||
{ name: "上海", value: 4 },
|
||
{ name: "江苏", value: 2 },
|
||
{ name: "浙江", value: 4 },
|
||
{ name: "安徽", value: 9 },
|
||
{ name: "福建", value: 6 },
|
||
{ name: "江西", value: 1 },
|
||
{ name: "山东", value: 9 },
|
||
{ name: "河南", value: 7 },
|
||
{ name: "湖北", value: 6 },
|
||
{ name: "湖南", value: 4 },
|
||
{ name: "重庆", value: 1 },
|
||
{ name: "四川", value: 5 },
|
||
{ name: "贵州", value: 2 },
|
||
{ name: "云南", value: 3 },
|
||
{ name: "西藏", value: 9 },
|
||
{ name: "陕西", value: 0 },
|
||
{ name: "甘肃", value: 6 },
|
||
{ name: "青海", value: 1 },
|
||
{ name: "宁夏", value: 8 },
|
||
{ name: "新疆", value: 8 },
|
||
{ name: "广东", value: 3 },
|
||
{ name: "广西", value: 9 },
|
||
{ name: "海南", value: 4 },
|
||
];
|
||
/*获取地图数据*/
|
||
myChart.showLoading(); // 显示加载动画
|
||
var mapFeatures = echarts.getMap(mapName).geoJson.features; // 获取地图的地理信息数据
|
||
console.log("========mapFeatures=========");
|
||
console.log(mapFeatures);
|
||
myChart.hideLoading(); // 隐藏加载动画
|
||
// 遍历地理信息数据中的每个地区，将地区名称和经纬度存储到 geoCoordMap 对象中。
|
||
// 对于每个地区，首先获取其名称和经纬度，然后将名称作为键，经纬度作为值存储到 geoCoordMap 对象中。
|
||
mapFeatures.forEach(function (v) {
|
||
console.log("==========v===========");
|
||
console.log(v);
|
||
// 地区名称
|
||
var name = v.properties.name;
|
||
// 地区经纬度
|
||
geoCoordMap[name] = v.properties.cp;
|
||
|
||
});
|
||
console.log("===========geoCoordMap=============");
|
||
console.log(geoCoordMap);
|
||
var max = 480,
|
||
min = 9; // todo
|
||
var maxSize4Pin = 100,
|
||
minSize4Pin = 20;
|
||
|
||
// 该函数的作用是将输入的数据转换为特定格式的数组。
|
||
var convertData = function (data) {
|
||
console.log("=======data========");
|
||
console.log(data);
|
||
var res = []; // 创建一个空数组 res
|
||
// 遍历输入数据 data 中的每个元素
|
||
for (var i = 0; i < data.length; i++) {
|
||
var geoCoord = geoCoordMap[data[i].name];
|
||
console.log("========geoCoord========");
|
||
console.log(geoCoord);
|
||
// 将该元素的名称和值（以及经纬度信息）组成一个新的对象，并将其添加到 res 数组中
|
||
if (geoCoord) {
|
||
res.push({
|
||
name: data[i].name,
|
||
value: geoCoord.concat(data[i].value),
|
||
});
|
||
}
|
||
}
|
||
console.log("========res=======");
|
||
console.log(res);
|
||
return res;
|
||
};
|
||
option = {
|
||
// backgroundColor: '#013954',
|
||
title: {
|
||
text: "2019年各省份销售和利润情况", // 标题的文本为 "2019年各省份销售和利润情况"
|
||
// 标题文本的样式信息，包括对齐方式（居中）、颜色（白色）和字体大小（20）
|
||
textStyle: {
|
||
align: 'center',
|
||
color: '#fff',
|
||
fontSize: 20,
|
||
},
|
||
top: '5%', // 标题的位置在垂直方向上为距离顶部5%
|
||
left: 'center', // 标题的位置在水平方向上为居中
|
||
},
|
||
tooltip: {
|
||
padding: 0, // 提示框内边距为0
|
||
enterable: true, // 提示框可以鼠标进入
|
||
transitionDuration: 1, // 提示框显示和隐藏的过渡时间为1秒
|
||
// 提示框文本的样式信息，包括颜色（黑色）、装饰（无）
|
||
textStyle: {
|
||
color: '#000',
|
||
decoration: 'none',
|
||
},
|
||
// 用于自定义提示框的内容
|
||
// 通过传入的参数params获取当前数据的名称、销售额和利润，然后拼接成一个HTML字符串作为提示框的内容。
|
||
formatter: function (params) {
|
||
console.log("========params========");
|
||
console.log(params);
|
||
var tipHtml = '';
|
||
tipHtml = '<div style="width:180px;height:120px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
|
||
+ '<div style="width:90%;height:30px;line-height:30px;border-bottom:2px solid rgba(7,166,255,0.7);padding:0 10px">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:30px;">' + '</i>'
|
||
+ '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>'
|
||
+ '<div style="padding:10px">'
|
||
+ '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
|
||
+ '销售额：' + '<span style="color:#11ee7d;margin:0 6px;">' + the_sales_province[params.dataIndex].value + '</span>' + '元' + '</p>'
|
||
+ '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' + '</i>'
|
||
+ '利润：' + '<span style="color:#f48225;margin:0 6px;">' + the_profit_province[params.dataIndex].value + '</span>' + '元' + '</p>'
|
||
+ '</div>' + '</div>';
|
||
// console.log("=======tipHtml========");
|
||
// console.log(tipHtml);
|
||
return tipHtml;
|
||
}
|
||
},
|
||
|
||
// 设置视觉映射组件（visualMap）的样式和属性
|
||
visualMap: {
|
||
show: true, // 显示视觉映射组件
|
||
min: 0, // 视觉映射组件的最小值
|
||
max: 200, // 视觉映射组件的最大值
|
||
left: '10%', // 视觉映射组件距离容器左侧的距离为容器宽度的10%
|
||
top: 'bottom', // 视觉映射组件的位置在容器底部
|
||
calculable: true, // 视觉映射组件可以计算数据
|
||
seriesIndex: [1], // 视觉映射组件关联的数据系列索引为1
|
||
// 视觉映射组件的颜色范围，从蓝色（#04387b）到浅蓝色（#467bc0）
|
||
inRange: {
|
||
color: ['#04387b', '#467bc0'] // 蓝绿
|
||
},
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
|
||
},
|
||
geo: {
|
||
show: true, // 显示地理坐标系组件
|
||
map: mapName, // 使用的地图名称为mapName
|
||
// 表示不显示标签
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
}
|
||
},
|
||
roam: false, // 禁止鼠标缩放和平移地图
|
||
// 地图区域的颜色和边框颜色
|
||
itemStyle: {
|
||
// 在正常状态下，区域颜色为深蓝色（#023677），边框颜色为浅蓝色（#1180c7）
|
||
normal: {
|
||
areaColor: '#023677',
|
||
borderColor: '#1180c7',
|
||
},
|
||
// 在高亮状态下，区域颜色为浅蓝色（#4499d0）
|
||
emphasis: {
|
||
areaColor: '#4499d0',
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '散点', // 图表的名称
|
||
type: 'scatter', // 图表类型为散点图
|
||
coordinateSystem: 'geo', // 使用的坐标系为地理坐标系
|
||
data: convertData(the_profit_province), // 使用convertData函数处理传入的数据作为散点图的数据源
|
||
symbolSize: function (val) {// 散点的大小由数据的第三个值决定
|
||
console.log("========val=========");
|
||
console.log(val);
|
||
return val[2];
|
||
},
|
||
// 标签的显示方式
|
||
label: {
|
||
// 在正常状态下，标签显示省份名称（{b}），位置在右侧，字体大小为8
|
||
normal: {
|
||
formatter: '{b}',
|
||
position: 'right',
|
||
show: true,
|
||
fontSize: 8,
|
||
},
|
||
// 在高亮状态下，标签始终显示。
|
||
emphasis: {
|
||
show: true,
|
||
|
||
}
|
||
},
|
||
// animation: false,
|
||
// 散点的颜色为白色
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#fff',
|
||
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'map', // 图表类型为地图
|
||
map: mapName, // 使用的地图名称为mapName
|
||
geoIndex: 0, // 地理坐标系组件在组件列表中的索引为0
|
||
aspectScale: 0.5, // 地图的长宽比为0.5
|
||
showLegendSymbol: false, // 存在图例时不显示图例中的符号
|
||
// 标签的显示方式
|
||
label: {
|
||
// 在正常状态下，标签始终显示
|
||
normal: {
|
||
show: true
|
||
},
|
||
// 在高亮状态下，标签不显示，并且文本颜色为白色
|
||
emphasis: {
|
||
show: false,
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
roam: true, // 允许鼠标缩放和平移地图
|
||
// 地图区域的颜色和边框颜色
|
||
itemStyle: {
|
||
// 在正常状态下，区域颜色为深蓝色（#031525），边框颜色为白色（#FFFFFF）
|
||
normal: {
|
||
areaColor: '#031525',
|
||
borderColor: '#FFFFFF',
|
||
},
|
||
// 在高亮状态下，区域颜色为浅蓝色（#2B91B7）。
|
||
emphasis: {
|
||
areaColor: '#2B91B7'
|
||
}
|
||
},
|
||
animation: false, // 不使用动画效果
|
||
data: the_sales_province // 地图的数据源
|
||
},
|
||
// 设置散点图的样式和属性
|
||
{
|
||
name: '点', // 图表的名称
|
||
type: 'scatter', // 图表类型为散点图
|
||
coordinateSystem: 'geo', // 使用的坐标系为地理坐标系
|
||
zlevel: 6, // 散点的层级为6，用于控制散点在图表中的显示顺序
|
||
},
|
||
// 设置特效散点图的样式和属性
|
||
{
|
||
name: 'Top 5', // 图表的名称
|
||
type: 'effectScatter', // 图表类型为特效散点图
|
||
// animation: false,
|
||
coordinateSystem: 'geo', // 使用的坐标系为地理坐标系
|
||
data: convertData(the_profit_province), // 使用convertData函数处理后的数据作为散点图的数据源
|
||
// 散点的大小由数据的第三个值决定
|
||
symbolSize: function (val) {
|
||
return val[2];
|
||
},
|
||
showEffectOn: 'render', // 在渲染时显示特效
|
||
rippleEffect: { //涟漪特效
|
||
period: 4, //动画时间，值越小速度越快
|
||
brushType: 'stroke', //波纹绘制方式为描边
|
||
scale: 4 //波纹圆环最大限制，值越大波纹越大
|
||
},
|
||
hoverAnimation: true, // 鼠标悬停时显示动画效果
|
||
// 标签的配置项
|
||
label: {
|
||
normal: {// 正常状态下
|
||
formatter: '{b}', // 标签显示省份名称（{b}）
|
||
position: 'left', // 标签位置在左侧
|
||
show: false // 不显示标签
|
||
}
|
||
},
|
||
// 散点样式的配置项
|
||
itemStyle: {
|
||
normal: {// 正常状态下
|
||
color: 'yellow', // 散点颜色为黄色
|
||
shadowBlur: 10, // 阴影模糊度为10
|
||
shadowColor: 'yellow' // 阴影颜色为黄色
|
||
}
|
||
},
|
||
zlevel: 1 // 散点的层级为1，用于控制散点在图表中的显示顺序
|
||
},
|
||
]
|
||
};
|
||
myChart.setOption(option)
|
||
var currentIndex = -1;
|
||
setInterval(function () {
|
||
var dataLen = option.series[0].data.length;
|
||
// 取消之前高亮的图形
|
||
myChart.dispatchAction({
|
||
type: 'downplay',
|
||
seriesIndex: 0,
|
||
dataIndex: currentIndex
|
||
});
|
||
currentIndex = (currentIndex + 1) % dataLen;
|
||
// 高亮当前图形
|
||
myChart.dispatchAction({
|
||
type: 'highlight',
|
||
seriesIndex: 0,
|
||
dataIndex: currentIndex
|
||
});
|
||
// 显示 tooltip
|
||
myChart.dispatchAction({
|
||
type: 'showTip',
|
||
seriesIndex: 0,
|
||
dataIndex: currentIndex
|
||
});
|
||
}, 1000);
|
||
</script>
|
||
</body>
|
||
|
||
</html> |