suojin
/
physical_distribution
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://42.192.7.176:3000/suojin/physical_distribution into main

Browse Source
main
xuechunyuan 3 years ago
parent 5948d7294a 2e611f00aa
commit 6a71a0c820
2 changed files with 132 additions and 210 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 236
      src/views/components/showmap.vue
  2. 106
      src/views/dashboard/home.vue

236
src/views/components/showmap.vue
Unescape View File

@ -11,6 +11,9 @@ export default {
props: {
mapData:{
type:Array,
},
datas:{
type:Array
}
},
data() {
@ -96,7 +99,7 @@ export default {
小店镇: [118.81007, 35.422484],
夏庄镇: [118.700674, 35.419525],
},
datas: [
datas1: [
[{ name: "夏庄镇", value: 120057.34 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "库山乡", value: 15477.48 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "棋山镇", value: 131686.1 }, { name: "莒县电子商务公共服务中心" }],
@ -146,26 +149,15 @@ export default {
};
},
mounted() {
// this.createCharts1();
this.myChart = this.$echarts.init(document.getElementById("chart_map"));
this.$echarts.registerMap("莒县", prefecture, {});
this.render3DMap();
this.createCharts1();
},
created() {
this.$nextTick(() =>{
console.log(this.$parent.mapData)
console.log(JSON.parse(JSON.stringify(this.$parent.mapData)))
})
// this.$nextTick(() =>{
// })
},
watch:{
mapData:{
handler(newValue,oldValue){
console.log(newValue)
// if(newValue.length !== 0){
// this.render3DMap();
// }
}
}
},
@ -179,34 +171,33 @@ export default {
var toCoord = this.geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push([
// {
// coord: toCoord,
// fromName: dataItem[0].name,
// value: dataItem[0].value,
// // name: dataItem[0].name,
// visualMap: false,
// },
// {
// coord: fromCoord,
// toName: dataItem[1].name,
// visualMap: false,
{
coord: toCoord,
fromName: dataItem[0].name,
value: dataItem[0].value,
// name: dataItem[0].name,
visualMap: false,
// },
},
{
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [
toCoord,
fromCoord,
coord: fromCoord,
toName: dataItem[1].name,
visualMap: false,
]
},
]);
}
}
return res;
};
this.mapData = this.mapData.sort(function (a, b) {
return b.value - a.value;
});
this.mapData.map((item,index) =>{
if(index > 2){
this.mapData[index].label = {show:false}
}
})
var yMax = 0;
for (var j = 0; j < this.mapData.length; j++) {
if (yMax < this.mapData[j].value) {
@ -217,8 +208,6 @@ export default {
var color = ['#000'];
// 迁入地特殊显示//广东
[[`${this.datas[0][1].name}`, this.datas]].forEach((item, i) => {
console.log(item[1])
console.log(convertData(this.datas));
series.push(
{
type: "lines",
@ -226,76 +215,77 @@ export default {
tooltip: {
trigger: "item",
formatter(params) {
// console.log(params);
},
},
effect: {
show: true,
period: 6, // 箭头指向速度，值越小速度越快
trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
period: 10, // 箭头指向速度，值越小速度越快
trailLength: 0.1, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", // 箭头图标
symbolSize: 5, // 图标大小
symbolSize: 6, // 图标大小
trailColor: '#ffd419',
color: '#ffd419', //流动点颜色
},
lineStyle: {
// normal: {
color: color[i],
width: 3, // 尾迹线条宽度
color: "#ffd419",
width: 1, // 尾迹线条宽度
opacity: 0.6, // 尾迹线条透明度
curveness: 0.2, // 尾迹线条曲直度
// },
},
data: convertData(item[1]),
},
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
// 涟漪特效
period: 4, // 动画时间，值越小速度越快
brushType: "stroke", // 波纹绘制方式 stroke, fill
scale: 3, // 波纹圆环最大限制，值越大波纹越大
},
tooltip: {
trigger: "item",
formatter(params) {
return params.data.name + ':' + params.data.value[2]
},
},
label: {
normal: {
show: true,
position: "right", // 显示位置
offset: [5, 0], // 偏移设置
formatter(params) {
// 圆环显示文字
return '';
},
fontSize: 13,
},
emphasis: {
show: true,
},
},
symbol: "circle",
symbolSize: 3,
// itemStyle: {
// normal: {
// // show: false,
// color: "#000",
// },
// },
itemStyle: {
color: "#000"
},
data: item[1].map((dataItem) => {
return {
visualMap: false,
name: dataItem[0].name,
value: this.geoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
};
}),
},
// {
// type: "effectScatter",
// coordinateSystem: "geo",
// zlevel: 2,
// rippleEffect: {
// // 涟漪特效
// period: 4, // 动画时间，值越小速度越快
// brushType: "stroke", // 波纹绘制方式 stroke, fill
// scale: 3, // 波纹圆环最大限制，值越大波纹越大
// },
// tooltip: {
// trigger: "item",
// formatter(params) {
// return params.data.name + ':' + params.data.value[2]
// },
// },
// label: {
// normal: {
// show: true,
// position: "right", // 显示位置
// offset: [5, 0], // 偏移设置
// formatter(params) {
// // 圆环显示文字
// return '';
// },
// fontSize: 13,
// },
// emphasis: {
// show: true,
// },
// },
// symbol: "circle",
// symbolSize: 3,
// // itemStyle: {
// // normal: {
// // // show: false,
// // color: "#000",
// // },
// // },
// itemStyle: {
// color: "#000"
// },
// data: item[1].map((dataItem) => {
// return {
// visualMap: false,
// name: dataItem[0].name,
// value: this.geoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
// };
// }),
// },
{
name: "数据名称",
type: "map",
@ -306,32 +296,38 @@ export default {
trigger: "item",
formatter: "{b}<br/>{c} (件)",
},
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "#0e94eb",
label: {
show: false,
},
},
emphasis: {
// 也是选中样式
borderWidth: 1,
borderColor: "#fff",
backgroundColor: "red",
label: {
show: true,
textStyle: {
color: "#fff",
},
},
},
aspectScale:'1.5',
label: {
show: true,
textStyle:{
color:'#fff'
}
},
// itemStyle: {
// normal: {
// borderWidth: 1,
// borderColor: "#0e94eb",
// // label: {
// // show: false,
// // },
// },
// emphasis: {
// // 也是选中样式
// borderWidth: 1,
// borderColor: "#fff",
// backgroundColor: "red",
// label: {
// show: false,
// textStyle: {
// color: "#fff",
// },
// },
// },
// },
data: this.mapData,
}
);
});
console.log(series);
this.myChart1 = this.$echarts.init(document.getElementById("chart_map"));
// this.myCharts1 = this.$echarts.init(document.getElementById('gdMaps'));
// this.$echarts.registerMap("china1", china1, {});
@ -359,14 +355,14 @@ export default {
text: ["高", "低"],
orient: "horizontal",
itemWidth: 15,
itemHeight: 200,
itemHeight: 150,
right: 0,
bottom: 30,
bottom: 3,
inRange: {
color: ["#75ddff", "#0e94eb"],
color: ["#1e73dd", "#04296f"],
},
textStyle: {
color: "#000",
color: "#fff",
},
},
geo: {
@ -377,6 +373,7 @@ export default {
show: false,
},
},
aspectScale:'1.5',
roam: true, // 是否允许缩放
itemStyle: {
normal: {
@ -442,9 +439,6 @@ export default {
}
return res;
};
console.log(convertData(this.datas))
// var color = ['#000'];
var seriesData = [];
this.datas.map((item, i) => {
seriesData.push(
@ -453,7 +447,6 @@ export default {
}
);
})
console.log(seriesData)
var yMax = 0;
for (var j = 0; j < this.mapData.length; j++) {
if (yMax < this.mapData[j].value) {
@ -468,7 +461,6 @@ export default {
this.mapData[index].label = {show:false}
}
})
console.log(this.mapData)
let option = {
// backgroundColor: '#000f1e',

106
src/views/dashboard/home.vue
Unescape View File

@ -166,8 +166,8 @@
</div>
<div class="center_bottom">
<div class="charts_box map-box">
<!-- <ShowMap :mapData="mapData"></ShowMap> -->
<div id="chart_map" class="map_box"></div>
<ShowMap :mapData="mapData" :datas="datas" v-if="mapData && datas && isMap"></ShowMap>
<!-- <div id="chart_map" class="map_box"></div> -->
</div>
<div class="charts_box">
<div id="trendChart" class="trend_box"></div>
@ -348,13 +348,14 @@ export default {
小店镇: [118.81007, 35.422484],
夏庄镇: [118.700674, 35.419525],
},
isMap:false
};
},
created() {
this.getTime();
this.readExcelFile("http://" + location.host + "/excel/wuliu.xlsx");
},
mounted() {
this.readExcelFile("http://" + location.host + "/excel/wuliu.xlsx");
queryWeath().then((res) => {
this.temp = res.result.now.temp;
this.weather = res.result.now.text;
@ -425,6 +426,7 @@ export default {
}
content1[2].map((item, index) => {
this.mapData.push({ name: item.名称, value: item.收件量 });
this.isMap = true
this.datas.push([
{ name: item.名称, value: item.收件量 },
{ name: "莒县电子商务公共服务中心" },
@ -450,6 +452,7 @@ export default {
return b.count - a.count;
});
});
content1[0].map((item) => {
this.pieData.push({
name: item.快递名称,
@ -460,9 +463,9 @@ export default {
this.pieData = this.pieData.sort(function (a, b) {
return b.y - a.y;
});
this.pieData[0].h = 15;
this.pieData[1].h = 10;
this.pieData[2].h = 5;
this.pieData[0].h = 10;
this.pieData[1].h = 5;
this.pieData[2].h = 2;
this.shouData.map((item, index) => {
if (index <= 10) {
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
@ -473,13 +476,13 @@ export default {
this.$nextTick(() => {
this.createChart();
this.createPieChart(this.pieData);
this.render3DMap()
// this.render3DMap()
this.run();
this.run1();
});
},
render3DMap() {
render3DMap() {
var convertData = (data) => {
var res = [];
for (var i = 0; i < data.length; i++) {
@ -691,14 +694,14 @@ export default {
fontSize: 15,
color: "#fff",
},
top: 12,
top: 0,
},
legend: {
data: ["到件量", "派件量"],
textStyle: {
color: "#fff",
},
top: 12,
top: 0,
right: 10,
itemHeight: 8,
},
@ -835,7 +838,7 @@ export default {
beta: 0,
},
backgroundColor: null,
marginTop: -45,
marginTop: -10,
},
colors: ["#00bdff", "#52f4c1", "#00dbec"],
title: {
@ -844,20 +847,14 @@ export default {
legend: {
enabled: false, // 关闭图例
},
tooltip: {
enabled: false,
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: "pointer",
depth: 35,
// dataLabels: {
// enabled: true,
// formatter: function (params) {
// //this 为当前的点（扇区）对象，可以通过 console.log(this) 来查看详细信息
// return `<span class="my-class" style="color:#e39054;font-size:0.16rem">${this.key}:</span>
// <span style="color:#e39054;font-size:0.14rem;">${((this.y / this.total) * 100).toFixed(2)}%</span><br />
// <span style="font-size:0.14rem;color:#fff;line-height: 0.12rem;font-family: 'FZSK';">${this.y}</span>`
// },
// },
depth: 15,
dataLabels: {
enabled: true, //是否显示饼图的线形tip
distance: "11%",
@ -896,73 +893,6 @@ export default {
],
});
},
//获取3d丙图的最高扇区的高度
getHeight3D(series, height) {
series.sort((a, b) => {
return b.pieData.value - a.pieData.value;
});
return (height * 25) / series[0].pieData.value;
},
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
// 计算
let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = true;
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== "undefined" ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32,
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
x: (u, v) => {
if (u < startRadian) {
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: (u, v) => {
if (u < startRadian) {
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: (u, v) => {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u) * h * 0.1;
}
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
},
// 按照日月更换数据
changeData(val) {
this.active = val;

Write Preview
Loading…
Cancel
Save