feat(数据可视化技术): 添加网店运营大屏前端和后端基础结构
- 新建前端项目配置文件和样式文件 - 创建后端 Flask 应用和数据库连接管理器 - 定义多个 API 路由以获取销售数据
This commit is contained in:
253
数据可视化技术/网店运营大屏（Flask框架）/frontend/js/sales_province.js
Executable file
253
数据可视化技术/网店运营大屏（Flask框架）/frontend/js/sales_province.js
Executable file
@@ -0,0 +1,253 @@
|
||||
// 发送 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"
|
||||
})
|
||||
Reference in New Issue
Block a user