gcc/gcc-project-web-25-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化数据可视化项目

Browse Source
This commit is contained in:
dev_xulongjin
2025-04-27 08:48:28 +08:00
commit 1984d69e6d
41 changed files with 325354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
experiment_5/task4/echarts模板/.project Executable file
View File

@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>echarts模板</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.aptana.ide.core.unifiedBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.aptana.projects.webnature</nature>
</natures>
<filteredResources>
<filter>
<id>1596610898202</id>
<name></name>
<type>26</type>
<matcher>
<id>org.eclipse.ui.ide.multiFilter</id>
<arguments>1.0-name-matches-false-false-node_modules</arguments>
</matcher>
</filter>
</filteredResources>
</projectDescription>

227
experiment_5/task4/echarts模板/1_sales_month对照模板.html Executable file
View File

@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制第一个图表</title>
<script src="../js/echarts.min.js"></script>
<script src="../js/d3.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1000px;height:600px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
legend: {
data: ['注册总量', '访问总量'], // 图例的数据为两个指标，注册总量和访问总量
x: 'center', // 图例的水平位置为居中
y: 'top', // 图例的垂直位置为顶部
padding: [5, 0, 0, 0], // 图例的内边距，分别为上、右、下、左，这里设置为上边距为5。
textStyle: { // 设置图例文字的样式
// color: '00F1F3', // 图例文字的颜色
color: ['#E78932', '#2094CA'],
fontSize: 10, // 图例文字的字体大小为10
},
itemWidth: 28, // 图例项的宽度为28
itemHeight: 12, // 图例项的高度为12
},
grid: {
show: false, // 表示不显示网格
left: 0, // 网格距离容器左侧的距离为0
right: 20, // 网格距离容器右侧的距离为20
bottom: 0, // 网格距离容器底部的距离为0
top: '15%', // 网格距离容器顶部的距离为容器高度的15%
containLabel: true, // 网格区域包含数据标签
},
tooltip: {
show: true, // 显示提示框
trigger: 'axis', // 提示框的触发方式为坐标轴触发，即当鼠标悬停在坐标轴上时，提示框会显示相关信息
// 设置坐标轴指示器的样式
axisPointer: {
type: 'line', // 坐标轴指示器的类型为直线，即在触发点处显示一条直线标记
// 设置坐标轴指示器标签的样式
label: {
show: true, // 显示坐标轴指示器标签
// color:'none',
fontSize: 8, // 坐标轴指示器标签的字体大小为8
},
// 设置坐标轴指示器线条的样式
lineStyle: {
color: '#2094CA', // 坐标轴指示器线条的颜色为蓝色
type: 'dotted', // 坐标轴指示器线条的类型为虚线
},
},
textStyle: {
fontSize: 10, // 提示框文字的字体大小为10
},
},
// 设置x轴的样式和数据
xAxis: [
{
type: 'category', // x轴的类型为类别型，即显示的是离散的数据点。
boundaryGap: false, // 表示x轴两端不留空白
// 设置x轴标签的样式
axisLabel: {
fontSize: 8, // x轴标签的字体大小为8
color: '#2094CA', // x轴标签的颜色为蓝色
},
data: ['A', 'B', 'C', 'D', 'E', 'F'], // x轴的数据为['A', 'B', 'C', 'D', 'E', 'F']
}
],
// 设置y轴的样式
yAxis: [
{
splitLine: { show: false }, // 不显示y轴的分割线
type: 'value', // y轴的类型为数值型，即显示的是连续的数据值
// 设置y轴标签的样式
axisLabel: {
fontSize: 8, // y轴标签的字体大小为8
color: '#2094CA', // y轴标签的颜色为蓝色
},
}
],
series: [
{
name: '注册总量', // 该图表的名称为"注册总量"
type: 'line', // 图表类型为折线图
symbol: 'circle', // 数据点的形状为圆形
symbolSize: 4, // 数据点的大小为4
// 设置数据点的样式
itemStyle: {
normal: {// 正常状态下的数据点样式
color: '#E78932', // 数据点的颜色为橙色
},
},
lineStyle: {// 设置线条的样式
color: '#E78932', // 线条的颜色为橙色
width: 1, // 线条的宽度为1
},
label: {// 设置标签的样式
show: true, // 表示显示标签
position: 'top', // 标签的位置在数据点的上方
// 设置标签文字的样式
textStyle: {
color: '#E78932', // 标签文字的颜色为橙色
},
fontSize: 8, // 标签文字的字体大小为8
},
// 设置区域填充的样式
areaStyle: {
// 区域填充的颜色渐变
color: {
type: 'linear', // 颜色渐变的类型为线性渐变
// 渐变的起点和终点坐标
x: 0,
y: 0,
x2: 0,
y2: 1,
// 渐变的颜色停止点，颜色渐变是从上到下，从深橙色（#D98234）过渡到深灰色（#33313C）
colorStops: [{
offset: 0, color: '#D98234' // 0% 处的颜色 表示第一个颜色停止点，偏移量为0，颜色为深橙色
}, {
offset: 1, color: '#33313C' // 100% 处的颜色 表示第二个颜色停止点，偏移量为1，颜色为深灰色
}],
global: false // 渐变不全局应用
},
// color:'#CE7E35',
// color:'#1C7DEE',
// color:'#5FB397',
opacity: 0.5, // 区域的透明度为0.5
},
data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02], // 折线图的数据
showAllSymbol: true, // 显示所有数据点
},
{
name: '访问总量', // 图表的名称为"访问总量"
type: 'line', // 图表类型为折线图
symbol: 'circle', // 数据点的形状为圆形
symbolSize: 4, // 数据点的大小为4
itemStyle: {// 设置数据点的样式
normal: {// 正常状态下的数据点样式
// borderColor:'#0099FF',
color: '#0099FF', // 数据点的颜色为蓝色
},
},
label: {// 设置标签的样式
show: true, // 显示标签
position: 'top', // 标签的位置在数据点的上方
textStyle: {// 设置标签文字的样式
color: '#0099FF', // 标签文字的颜色为蓝色
},
fontSize: 8, // 标签文字的字体大小为8
},
lineStyle: {// 设置线条的样式
color: '#0099FF', // 线条的颜色为蓝色
width: 0, // 线条的宽度为0
},
areaStyle: {// 设置区域填充的样式
color: {// 区域填充的颜色渐变
type: 'linear', // 颜色渐变的类型为线性渐变
// 渐变的起点和终点坐标
x: 0,
y: 0,
x2: 0,
y2: 1,
// 渐变的颜色停止点
colorStops: [{
offset: 0, color: '#0099FF' // 0% 处的颜色 表示第一个颜色停止点，偏移量为0，颜色为蓝色
}, {
offset: 1, color: '#394E7F' // 100% 处的颜色 表示第二个颜色停止点，偏移量为1，颜色为深蓝色
}],
global: false // 渐变不全局应用
},
opacity: 0.3, // 区域的透明度为0.3
},
data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14], // 折线图的数据
showAllSymbol: true, // 显示所有数据点
},
]
};
// 将配置项和数据应用到图表上
myChart.setOption(option)
// 用于在图表中周期性地高亮显示数据点并显示相应的提示框（tooltip）
var currentIndex = -1; // 初始化当前索引为-1
// 设置一个定时器，每隔2000毫秒执行一次函数内的代码块
setInterval(function () {
var dataLen = option.series[0].data.length; // 获取图表中第一个系列的数据长度
console.log(option.series[0].data);
console.log(dataLen); // 6
// 调用 dispatchAction 方法来执行特定的操作，包括取消之前高亮的图形、高亮当前图形和显示提示框。
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0, // 表示操作第一个系列
dataIndex: currentIndex // 表示操作的数据索引为当前索引
});
/*
-1 0
0 1
1 2
...
5 0
*/
currentIndex = (currentIndex + 1) % dataLen; // 更新当前索引，使其循环递增，直到达到数据长度
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示提示框
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, 2000);
</script>
</body>
</html>

199
experiment_5/task4/echarts模板/2_sales_product对照模板.html Executable file
View File

@@ -0,0 +1,199 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制第一个图表</title>
<script src="../js/echarts.min.js"></script>
<script src="../js/d3.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
// 对象数组
var dtlData = [{
name: '一账通', // 节点的名称
value: 2474, // 节点的值
// 子节点的数组
children: [{
name: 'JKOSS',
value: 426
}, {
name: 'JKTOA',
value: 73
}, {
name: 'JKTOALF_EBD',
value: 12
}, {
name: 'JKTOALF_TOASER',
value: 101
}, {
name: 'TOA',
value: 1083
}, {
name: 'TOAMALL',
value: 709
}, {
name: 'TOAWEB_CMS',
value: 58
}, {
name: 'TOAFLLF_MAAM',
value: 12
}]
}, {
name: '开放平台',
value: 9422,
children: [{
name: 'CDE',
value: 259
}, {
name: 'CMPCC',
value: 1161
}, {
name: 'PACCF1',
value: 3564
}, {
name: 'PAEBD_PAEBD',
value: 2231
}, {
name: 'QHZX',
value: 384
}, {
name: 'PCDP_CDP',
value: 205
}, {
name: 'PIMP_PIMP',
value: 51
}, {
name: 'ZXAR',
value: 94
}, {
name: 'ZXCD1',
value: 918
}, {
name: 'ZXPD1',
value: 555
}]
}, {
name: '银行一账通',
value: 6576,
children: [{
name: 'FO007',
value: 1078
}, {
name: 'FO008',
value: 799
}, {
name: 'FO009',
value: 483
}, {
name: 'FO023',
value: 665
}, {
name: 'FO024',
value: 644
}, {
name: 'FO025',
value: 1040
}, {
name: 'FO027',
value: 685
}, {
name: 'FCES01',
value: 215
}, {
name: 'FPPG_MIP',
value: 61
}, {
name: 'NMPMS_NMPMS',
value: 32
}, {
name: 'FOGZ',
value: 546
}, {
name: 'FO047',
value: 328
}]
}];
var color = [
"#00C6FB",
"#5781FD",
"#4DB1CB",
// "#3EBD7C",
// "#F7A925",
// "#bda29a",
// "#ca8622",
// "#749f83",
// "#6e7074",
// "#546570",
// "#c4ccd3"
];
option = {
tooltip: {},
series: [{
name: '数据库', // 图表的名称
type: 'treemap', // 图表的类型树状图
roam: false, // 是否允许鼠标缩放和平移，这里设置为false，表示不允许
nodeClick: false, // 是否允许点击节点进行交互，这里设置为false，表示不允许
breadcrumb: false, // 是否显示导航路径，这里设置为false，表示不显示
// 分别设置图表的左边距、右边距、上边距和下边距，这里都设置为0。
left: 0,
right: 0,
top: 0,
bottom: 0,
itemStyle: {
borderColor: '#062e62' // 定义节点的样式，这里设置了边框颜色为'#062e62'
},
// 定义节点标签的样式，这里设置了字体大小为8，颜色为白色
label: {
fontSize: 8,
color: '#fff',
},
// 用于定义树状图的层级样式
levels: [{// 定义了多个层级的样式
color: color, // 设置节点的颜色
itemStyle: {// 定义节点的样式
normal: {// 正常状态下的样式
borderWidth: 0, // 边框宽度，这里设置为0，表示无边框
borderColor: '#062e62', // 设置边框颜色
gapWidth: 5 // 设置节点之间的间隔宽度
}
}
},
{
//colorSaturation: [0.35, 0.6],
colorAlpha: [1, 0.5], // 节点颜色的透明度，这里设置为[1, 0.5]，表示正常状态下节点的颜色透明度为1，鼠标悬停时透明度为0.5。
upperLabel: {// 定义上层节点标签的样式
normal: {// 定义正常状态下的样式
color: '#00C6FB', // 设置标签颜色
fontSize: 10, // 设置标签字体大小
show: true, // 是否显示标签，这里设置为true，表示显示
height: 15 // 设置标签高度
}
},
itemStyle: {// 定义节点的样式
normal: {// 定义正常状态下的样式
borderWidth: 5, // 设置边框宽度
borderColor: '#062e62', // 设置边框颜色
gapWidth: 1, // 设置节点之间的间隔宽度
},
emphasis: {// 定义鼠标悬停时的样式
borderColor: '#ccc' // 设置边框颜色
}
}
}
],
leafDepth: 2, // 树的叶子节点深度，其值为2
data: dtlData // 数据源
}]
};
myChart.setOption(option)
</script>
</body>
</html>

161
experiment_5/task4/echarts模板/3_sales_region对照模板.html Executable file
View File

@@ -0,0 +1,161 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制第一个图表</title>
<script src="../js/echarts.min.js"></script>
<script src="../js/d3.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor: '#323a5e', // 图表的背景颜色为 '#323a5e'
tooltip: {
trigger: 'axis', // 表示提示框的触发方式为坐标轴触发，即当鼠标悬停在坐标轴上时，提示框会显示相关信息。
axisPointer: {
type: 'shadow' // 表示坐标轴指示器的样式为阴影，即鼠标悬停时，会在对应的数据点周围显示一个阴影区域。
},
textStyle: {// 提示框文本的样式，包括颜色（蓝色）和字体大小（10像素）。
color: '#0099FF',
fontSize: 10,
}
},
grid: {
left: '2%', // 图表距离容器左侧的距离为2%
right: '4%', // 图表距离容器右侧的距离为4%
bottom: '14%', // 图表距离容器底部的距离为14%
top: '16%', // 图表距离容器顶部的距离为16%
containLabel: true // 是否包含坐标轴刻度标签在内，设置为true表示包含
},
// 设置图例（legend）的样式和位置
legend: {
data: ['销售额', '利润'], // 表示图例中包含两个数据项
right: 10, // 图例距离容器右侧的距离为10
top: 12, // 图例距离容器顶部的距离为12
// 图例文本的颜色为白色，字体大小为10
textStyle: {
color: "#fff",
fontSize: 10,
},
itemWidth: 12, // 图例中每个数据项的宽度为12
itemHeight: 10, // 图例中每个数据项的高度为10
// itemGap: 35
},
xAxis: {
type: 'category', // x轴的类型为类别型，即显示的是离散的数据点。
data: ['2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
axisLine: {
lineStyle: {
color: 'white' // x轴线的颜色为白色
}
},
// x轴刻度标签的字体大小为8，颜色为蓝色
axisLabel: {
fontSize: 8,
color: '#2094CA',
},
},
yAxis: {
type: 'value', // y轴的类型为数值型，即显示的是连续的数据点
// y轴线显示，并且线的颜色为白色
axisLine: {
show: true,
lineStyle: {
color: 'white'
}
},
// y轴的分割线显示，分割线的颜色为半透明的白色
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
// y轴刻度标签的字体大小为8，颜色为蓝色
axisLabel: {
fontSize: 8,
color: '#2094CA',
},
},
series: [{
name: '销售额', // 图表的名称
type: 'bar', // 图表类型为柱状图
barWidth: '15%', // 柱子的宽度为图表宽度的15%
label: { show: false }, // 不显示柱子上的标签
// 柱子的颜色使用渐变色，从上到下由黄色（#fccb05）渐变为橙色（#f5804d），并且柱子的边框圆角半径为12
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fccb05'
}, {
offset: 1,
color: '#f5804d'
}]),
barBorderRadius: 12,
},
},
data: [400, 400, 300, 300, 300, 400, 400, 400, 300], // 柱状图的数据
},
{
name: '利润', // 图表的名称
type: 'bar', // 图表类型为柱状图
barWidth: '15%', // 柱子的宽度为图表宽度的15%
label: { show: false }, // 不显示柱子上的标签
// 柱子的颜色使用渐变色，从上到下由绿色（#8bd46e）渐变为深蓝色（#09bcb7），并且柱子的边框圆角半径为11个单位
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#8bd46e'
}, {
offset: 1,
color: '#09bcb7'
}]),
barBorderRadius: 11,
}
},
data: [400, 500, 500, 500, 500, 400, 400, 500, 500], // 柱状图的数据
}]
};
// 这段代码的作用是在 ECharts 图表中每隔 2 秒自动切换高亮的图形，并显示相应的提示框。
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
});
}, 2000);
myChart.setOption(option)
</script>
</body>
</html>

187
experiment_5/task4/echarts模板/4_sales_manager对照模板.html Executable file
View File

@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制第一个图表</title>
<script src="../js/echarts.min.js"></script>
<script src="../js/d3.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 400px;height:300px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main')); // 初始化一个图表实例
var names = ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6'];
var sales_data = [
{ value: 50, name: 'rose1' },
{ value: 55, name: 'rose2' },
{ value: 35, name: 'rose3' },
{ value: 65, name: 'rose4' },
{ value: 80, name: 'rose5' },
{ value: 105, name: 'rose6' },
]
var profit_data = [
{ value: 10, name: 'rose1' },
{ value: 5, name: 'rose2' },
{ value: 15, name: 'rose3' },
{ value: 25, name: 'rose4' },
{ value: 20, name: 'rose5' },
{ value: 35, name: 'rose6' },
];
option = {
// 颜色数组，包括6种不同的颜色值
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
// 图表的标题，文本为"销售情况 利润情况"，位置在左侧，字体颜色为蓝色（#0099FF），字体大小为10。
title: {
text: ' 销售情况 利润情况',
left: 'left',
textStyle: {
color: '#0099FF',
fontSize: 10,
}
},
// 提示框配置
tooltip: {
// 表示当鼠标悬停在数据项上时触发提示框
trigger: 'item',
// 定义了提示框的显示格式，包括数据系列的名称（{a}）、数据项的名称（{b}）、数值（{c}）和百分比（{d}%）
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center', // 图例水平居中显示
top: 'bottom', // 图例位于图表底部
data: names, // 图例的数据项为names数组，即每个数据项的名称
// 图例文本的样式，包括颜色数组
textStyle: {
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
},
padding: 0, // 图例的内边距为0
itemGap: 3, // 图例项之间的间距为3
itemWidth: 30, // 图例项的宽度为30
},
series: [
{
name: '销售额', // 图表的名称
type: 'pie', // 饼图
radius: [5, 85], // 饼图的半径范围，从5到85
center: ['30%', '50%'], // 饼图的中心位置在容器的30%宽度和50%高度处
roseType: 'area', // 使用面积模式绘制玫瑰图
// 标签的显示方式，这里设置为不显示标签
label: {
show: false
},
// 标签线的显示方式，这里设置为不显示标签线
labelLine: {
normal: {
show: false,
},
emphasis: {
show: false
}
},
// 高亮状态下的样式，这里设置为不显示高亮状态下的标签
emphasis: {
label: {
show: false
}
},
data: sales_data, // 饼图的数据为sales_data数组
},
{
name: '利润', // 图表的名称
type: 'pie', // 饼图
radius: [5, 85], // 饼图的半径范围，从5到85
center: ['80%', '50%'], // 饼图的中心位置在容器的80%宽度和50%高度处
roseType: 'area', // 使用面积模式绘制玫瑰图
// 标签的显示方式，这里设置为不显示标签
label: {
show: false,
},
// 标签线的显示方式，这里设置为不显示标签线
labelLine: {
normal: {
show: false,
},
emphasis: {
show: false
}
},
data: profit_data, // 饼图的数据为profit_data数组
}
]
};
myChart.setOption(option);
// 这段代码是用于在 ECharts 图表中实现自动轮播的效果。
// 每隔2秒钟，图表会自动切换到下一个数据项，并高亮显示当前数据项以及显示对应的提示框（tooltip）。
var currentIndex = -1;
var pie_index = -1;
var pie_index1 = 0
setInterval(function () {
var dataLen = option.series[1].data.length;
console.log(option.series[1].data);
console.log(dataLen); // 6
/*
pie_index
-1 0
0 1
1 2
...
10 11
11 0
*/
pie_index = pie_index == 11 ? 0 : (pie_index + 1)
// console.log(currentIndex1)
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
/*
seriesIndex
0
*/
seriesIndex: pie_index1,
dataIndex: currentIndex
});
/*
currentIndex
-1 0
0 1
1 2
...
5 0
*/
currentIndex = (currentIndex + 1) % dataLen;
/*
pie_index
0 0
1 0
...
5 0
6 1
...
11 1
*/
pie_index1 = parseInt(pie_index / 6)
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: pie_index1,
dataIndex: currentIndex
});
// 显示提示框
myChart.dispatchAction({
type: 'showTip',
seriesIndex: pie_index1,
dataIndex: currentIndex
});
}, 2000);
</script>
</body>
</html>

364
experiment_5/task4/echarts模板/5_sales_province对照模板.html Executable file
View File

@@ -0,0 +1,364 @@
<!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>