253 lines
6.7 KiB
JavaScript
Executable File
253 lines
6.7 KiB
JavaScript
Executable File
// 发送 AJAX 请求获取数据
|
|
fetch('http://127.0.0.1:5000/api/sales_province')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
var sales = [];
|
|
//将数据整理为地图的数据
|
|
var sales_province = [];
|
|
var profit_province = [];
|
|
data.forEach(item => {
|
|
sales.push(parseFloat(item.sales));
|
|
sales_set = {};
|
|
profit_set = {};
|
|
sales_set['name'] = item.province;
|
|
sales_set['value'] = item.sales;
|
|
profit_set['name'] = item.province;
|
|
profit_set['value'] = item.profit;
|
|
sales_province.push(sales_set);
|
|
profit_province.push(profit_set);
|
|
});
|
|
//添加总销售额的数据,用于在图表上方显示
|
|
var sales_total = Math.round(d3.sum(sales) / 10000);
|
|
console.log("=======sales_province========");
|
|
console.log(sales_province);
|
|
console.log("=======profit_province========");
|
|
console.log(profit_province);
|
|
console.log("sales_total:"+sales_total);
|
|
|
|
// console.log([sales_province,profit_province])
|
|
var myChart = echarts.init(document.getElementById('data_province'));
|
|
var mapName = 'china'
|
|
var geoCoordMap = {};
|
|
/*获取地图数据*/
|
|
myChart.showLoading();
|
|
var mapFeatures = echarts.getMap(mapName).geoJson.features;
|
|
myChart.hideLoading();
|
|
mapFeatures.forEach(function (v) {
|
|
// 地区名称
|
|
var name = v.properties.name;
|
|
// 地区经纬度
|
|
geoCoordMap[name] = v.properties.cp;
|
|
|
|
});
|
|
var max = 480,
|
|
min = 9; // todo
|
|
var maxSize4Pin = 100,
|
|
minSize4Pin = 20;
|
|
|
|
var convertData = function (data) {
|
|
var res = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
var geoCoord = geoCoordMap[data[i].name];
|
|
if (geoCoord) {
|
|
res.push({
|
|
name: data[i].name,
|
|
value: geoCoord.concat(data[i].value),
|
|
});
|
|
}
|
|
}
|
|
return res;
|
|
};
|
|
option = {
|
|
// backgroundColor: '#013954',
|
|
tooltip: {
|
|
padding: 0,
|
|
enterable: true,
|
|
transitionDuration: 1,
|
|
textStyle: {
|
|
color: '#000',
|
|
decoration: 'none',
|
|
},
|
|
formatter: function (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;">' + 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;">' + profit_province[params.dataIndex].value + '</span>' + '元' + '</p>'
|
|
+ '</div>' + '</div>';
|
|
return tipHtml;
|
|
}
|
|
|
|
},
|
|
|
|
visualMap: {
|
|
show: true,
|
|
min: 0,
|
|
max: 300000,
|
|
left: '10%',
|
|
top: 'bottom',
|
|
calculable: true,
|
|
seriesIndex: [1],
|
|
inRange: {
|
|
color: ['#04387b', '#467bc0'] // 蓝绿
|
|
},
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
geo: {
|
|
show: true,
|
|
map: mapName,
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
show: false,
|
|
}
|
|
},
|
|
roam: false,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#023677',
|
|
borderColor: '#1180c7',
|
|
},
|
|
emphasis: {
|
|
areaColor: '#4499d0',
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: '散点',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
data: convertData(profit_province),
|
|
symbolSize: function (val) {
|
|
return val[2] / 8000;
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'right',
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
show: true
|
|
}
|
|
},
|
|
// animation: false,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
type: 'map',
|
|
map: mapName,
|
|
geoIndex: 0,
|
|
aspectScale: 0.5, //长宽比
|
|
showLegendSymbol: false, // 存在legend时显示
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
},
|
|
emphasis: {
|
|
show: false,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
roam: true,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#031525',
|
|
borderColor: '#FFFFFF',
|
|
},
|
|
emphasis: {
|
|
areaColor: '#2B91B7'
|
|
}
|
|
},
|
|
animation: false,
|
|
data: sales_province
|
|
},
|
|
{
|
|
name: '点',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
zlevel: 6,
|
|
},
|
|
{
|
|
name: 'Top 5',
|
|
type: 'effectScatter',
|
|
// animation: false,
|
|
coordinateSystem: 'geo',
|
|
data: convertData(profit_province),
|
|
symbolSize: function (val) {
|
|
return val[2] / 8000;
|
|
},
|
|
showEffectOn: 'render',
|
|
rippleEffect: { //涟漪特效
|
|
period: 4, //动画时间，值越小速度越快
|
|
brushType: 'stroke', //波纹绘制方式 stroke, fill
|
|
scale: 4 //波纹圆环最大限制，值越大波纹越大
|
|
},
|
|
hoverAnimation: true,
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'left',
|
|
show: false
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'yellow',
|
|
shadowBlur: 10,
|
|
shadowColor: 'yellow'
|
|
}
|
|
},
|
|
zlevel: 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);
|
|
|
|
|
|
//为id为title1的div添加文字
|
|
var title1 = document.getElementById("title1");
|
|
title1.innerHTML = "2023年总销售额是<b style='color:#f48225;font-size:24px'> " + sales_total + " </b>万元" +
|
|
"<br/><br/>" + "审图号：<b style='color:#ffffff;font-size:14px'> GS(2023)2767号 </b>";
|
|
title1.style.color = "#467bc0";
|
|
title1.style.fontSize = "14px";
|
|
title1.style.fontWeight = "bold"
|
|
}) |