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

对接数据

Browse Source
main
jinna 3 years ago
parent 5e1ebf3f1f
commit 25e1f9a155
2 changed files with 295 additions and 45 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. 41
      src/views/components/showmap.vue
  2. 299
      src/views/dashboard/homepage.vue

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

@ -8,6 +8,9 @@ import prefecture from "@/assets/json/prefecture.json";
// import 'echarts/map/js/province/guangdong.js'
/*因为echarts 只内置了世界、中国、中国省的地图文件，如果你要使用市级的地图要去找相关的json或者js文件然后在渲染*/
export default {
props:{
mapData:Array
},
data() {
return {
//下面是经纬度，用哪个地方的就填哪个地方的就可以
@ -142,33 +145,11 @@ export default {
},
watch: {},
mounted() {
console.log(this.mapData)
this.createCharts1();
},
methods: {
createCharts1() {
// const convertData = (data) => {
// const res = [];
// for (let i = 0; i < data.length; i++) {
// const dataItem = data[i];
// const fromCoord = this.geoCoordMap[dataItem[1].name]; // 迁出点
// const toCoord = this.geoCoordMap[dataItem[0].name]; // 迁入点
// if (fromCoord && toCoord) {
// // console.log(dataItem)
// res.push([
// {
// coord: fromCoord,
// value: dataItem[0].value,
// name: dataItem[0].name,
// },
// {
// coord: toCoord,
// },
// ]);
// }
// }
// return res;
// };
var convertData = (data) => {
var res = [];
for (var i = 0; i < data.length; i++) {
@ -198,9 +179,9 @@ export default {
};
var yMax = 0;
for (var j = 0; j < this.chardata1.length; j++) {
if (yMax < this.chardata1[j].value) {
yMax = this.chardata1[j].value;
for (var j = 0; j < this.mapData.length; j++) {
if (yMax < this.mapData[j].value) {
yMax = this.mapData[j].value;
}
}
const series = [];
@ -317,7 +298,7 @@ export default {
},
},
},
data: this.chardata1,
data: this.mapData,
}
);
});
@ -331,9 +312,9 @@ export default {
// this.myCharts1.resize();
});
var yMax = 0;
for (var j = 0; j < this.chardata1.length; j++) {
if (yMax < this.chardata1[j].value) {
yMax = this.chardata1[j].value;
for (var j = 0; j < this.mapData.length; j++) {
if (yMax < this.mapData[j].value) {
yMax = this.mapData[j].value;
}
}
this.myChart1.hideLoading();

299
src/views/dashboard/homepage.vue
Unescape View File

@ -102,7 +102,8 @@
</div>
<div class="cen_bot">
<div class="echarts">
<ShowMap></ShowMap>
<!-- <ShowMap :mapData="mapData" :data1="datas"></ShowMap> -->
<div class="map_box" id="chart_map"></div>
</div>
<div class="echarts">
<div id="trendChart" class="trend_box"></div>
@ -129,7 +130,6 @@
</div>
</div>
</div>
</div>
<div class="right_center">
<div class="title_box">
@ -148,6 +148,7 @@
</template>
<script>
import prefecture from "@/assets/json/prefecture.json";
import Swiper from "swiper";
import axios from "axios";
import * as XLSX from "xlsx/xlsx.mjs";
@ -233,11 +234,37 @@ export default {
"#00b2cd",
"#ec3c3c",
],
mapData:[],
datas:[],
geoCoordMap: {
棋山镇: [118.895378, 35.877537],
东莞镇: [118.972146, 35.991826],
安庄镇: [118.815076, 35.812024],
果庄乡: [118.769212, 35.77904], //果庄乡
洛河镇: [118.833803, 35.753576], //洛河镇
库山乡: [118.979909, 35.92304], //库山乡
招贤镇: [118.929219, 35.723248], //招贤镇
桑园镇: [119.046012, 35.678553], //桑园镇
阎庄镇: [118.834585, 35.670621], //阎庄镇
莒县电子商务公共服务中心: [118.901658, 35.60688],
店子集镇:[118.914151,35.5844],
城阳街道: [118.82472, 35.583488], //城阳街道
峤山镇: [118.946005, 35.657339], //峤山镇
龙山镇: [119.003747, 35.515955],
陵阳镇: [118.890825, 35.545056],
寨里河镇: [118.931584, 35.469982],
莒县经济开发区: [118.851312, 35.626514],
浮来山镇: [118.744789, 35.596051],
刘官庄镇: [118.801123, 35.522202],
长岭镇: [118.844125, 35.484677],
小店镇: [118.81007, 35.422484],
夏庄镇: [118.700674, 35.419525],
},
};
},
created() {
this.getTime();
this.readExcelFile("http://192.168.1.36:8080/excel/wuliu.xlsx");
this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx");
this.$nextTick(() =>{
this.createCharts()
})
@ -501,6 +528,8 @@ export default {
this.villageData.push({ name: item.村点名称, upData: item.上行, downData: item.下行 });
});
content1[2].map((item, index) => {
this.mapData.push({name:item.名称,value:item.收件量})
this.datas.push([{ name: item.名称, value:item.收件量 }, { name: "莒县电子商务公共服务中心" }])
this.shouData.push({ name: item.名称, count: item.收件量 });
this.shouData = this.shouData.sort(function (a, b) {
return b.count - a.count;
@ -535,7 +564,8 @@ export default {
});
this.$nextTick(() => {
this.createChart();
this.createCharts()
this.createCharts();
this.createCharts1()
this.run();
});
},
@ -561,16 +591,6 @@ export default {
this.isFullFlag = true;
}
}
// console.log(this.isFullFlag);
// this.isFullFlag =!this.isFullFlag
// if (!screenfull.enabled) {
// this.$message({
// message: 'Your browser does not work',
// type: 'warning'
// })
// return false
// }
// screenfull.toggle()
},
createChart() {
@ -586,12 +606,15 @@ export default {
fontSize: 15,
color: "#fff",
},
top:12
},
legend: {
data: ["到件量", "派件量"],
textStyle: {
color: "#fff",
},
top:12,
right:10
},
tooltip: {
trigger: "axis",
@ -600,6 +623,7 @@ export default {
left: "3%",
right: "4%",
bottom: "3%",
top:"18%",
containLabel: true,
},
xAxis: {
@ -636,6 +660,247 @@ export default {
};
this.trendChart.setOption(option);
},
createCharts1() {
var convertData = (data) => {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = this.geoCoordMap[dataItem[0].name];
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,
},
]);
}
}
return res;
};
var yMax = 0;
for (var j = 0; j < this.mapData.length; j++) {
if (yMax < this.mapData[j].value) {
yMax = this.mapData[j].value;
}
}
const series = [];
var color = ['#000'];
// 迁入地特殊显示//广东
[[`${this.datas[0][1].name}`, this.datas]].forEach((item, i) => {
console.log(item)
console.log(convertData(item[1]));
series.push(
{
type: "lines",
zlevel: 2,
tooltip: {
trigger: "item",
formatter(params) {
// console.log(params);
},
},
effect: {
show: true,
period: 6, // 箭头指向速度，值越小速度越快
trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
symbol: "arrow", // 箭头图标
symbolSize: 5, // 图标大小
},
lineStyle: {
// normal: {
color: color[i],
width: 3, // 尾迹线条宽度
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]),
};
}),
},
{
name: "数据名称",
type: "map",
zlevel: 0,
mapType: "莒县",
selectedMode: "multiple",
tooltip: {
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",
},
},
},
},
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, {});
this.$echarts.registerMap("莒县", prefecture, {});
window.addEventListener("resize", function () {
this.myChart1.resize();
// this.myCharts1.resize();
});
var yMax = 0;
for (var j = 0; j < this.mapData.length; j++) {
if (yMax < this.mapData[j].value) {
yMax = this.mapData[j].value;
}
}
this.myChart1.hideLoading();
// this.myCharts1.hideLoading();
var option = {
animation: true,
tooltip: {
show: true,
},
visualMap: {
min: 0,
max: yMax,
text: ["高", "低"],
orient: "horizontal",
itemWidth: 15,
itemHeight: 200,
right: 0,
bottom: 30,
inRange: {
color: ["#75ddff", "#0e94eb"],
},
textStyle: {
color: "#fff",
},
bottom:"2%",
itemWidth: 10,
},
geo: {
map: "莒县",
// zoom: 1.2,
label: {
emphasis: {
show: false,
},
},
roam: true, // 是否允许缩放
itemStyle: {
normal: {
borderColor: "rgba(147, 235, 248, 1)",
borderWidth: 1,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [
{
offset: 0,
color: "rgba(175,238,238, 0)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(47,79,79, .1)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
},
shadowColor: "rgba(128, 217, 248, 1)",
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10,
},
emphasis: {
areaColor: "#389BB7",
borderWidth: 0,
},
},
},
series,
};
this.myChart1.setOption(option);
// this.myCharts1.setOption(option);
},
fn(str) {
let num = null;
@ -967,7 +1232,7 @@ export default {
.data_box {
width: 20%;
height: 100%;
height: 90%;
// background: green;
display: flex;
flex-direction: column;
@ -996,6 +1261,10 @@ export default {
.echarts {
width: 50%;
height: 100%;
.map_box{
width:100%;
height: 100%;
}
.trend_box {
width: 100%;
height: 100%;

Write Preview
Loading…
Cancel
Save