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

Browse Source
main
jinna 3 years ago
parent 08c5e4e57b fce8394474
commit 616e0c00ac
3 changed files with 108 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. 2
      package.json
  2. BIN
      src/assets/images/map_bg.png
  3. 151
      src/views/components/showmap.vue

2
package.json
Unescape View File

@ -13,7 +13,7 @@
"echarts": "^5.4.0",
"echarts-gl": "^2.0.9",
"element-ui": "^2.15.12",
"highcharts": "^9.2.2",
"highcharts": "^9.3.3",
"js-cookie": "^3.0.1",
"postcss-pxtorem": "^6.0.0",
"screenfull": "^5.2.0",

BIN
src/assets/images/map_bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 MiB

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

@ -8,8 +8,8 @@ import prefecture from "@/assets/json/prefecture.json";
// import 'echarts/map/js/province/guangdong.js'
/*因为echarts 只内置了世界、中国、中国省的地图文件，如果你要使用市级的地图要去找相关的json或者js文件然后在渲染*/
export default {
props:{
mapData:Array
props: {
mapData: Array
},
data() {
return {
@ -81,7 +81,7 @@ export default {
桑园镇: [119.046012, 35.678553], //桑园镇
阎庄镇: [118.834585, 35.670621], //阎庄镇
莒县电子商务公共服务中心: [118.901658, 35.60688],
店子集镇:[118.914151,35.5844],
店子集镇: [118.914151, 35.5844],
城阳街道: [118.82472, 35.583488], //城阳街道
峤山镇: [118.946005, 35.657339], //峤山镇
龙山镇: [119.003747, 35.515955],
@ -95,8 +95,8 @@ export default {
夏庄镇: [118.700674, 35.419525],
},
datas: [
[{ name: "夏庄镇", value:120057.34 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "库山乡", value: 15477.48 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "夏庄镇", value: 120057.34 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "库山乡", value: 15477.48 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "棋山镇", value: 131686.1 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "安庄镇", value: 6992.6 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "果庄乡", value: 44045.49 }, { name: "莒县电子商务公共服务中心" }],
@ -113,7 +113,7 @@ export default {
[{ name: "刘官庄镇", value: 9172.94 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "陵阳镇", value: 3368 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "长岭镇", value: 306.98 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "寨里河镇", value: 810.66 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "寨里河镇", value: 810.66 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "东莞镇", value: 542.2 }, { name: "莒县电子商务公共服务中心" }],
[{ name: "小店镇", value: 256.38 }, { name: "莒县电子商务公共服务中心" }],
],
@ -145,38 +145,39 @@ export default {
},
watch: {},
mounted() {
console.log(this.mapData)
this.createCharts1();
// console.log(this.mapData)
// this.createCharts1();
this.render3DMap();
},
methods: {
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,
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,
},
{
coord: fromCoord,
toName: dataItem[1].name,
visualMap: false,
},
]);
}
}
return res;
};
},
]);
}
}
return res;
};
var yMax = 0;
for (var j = 0; j < this.mapData.length; j++) {
@ -208,12 +209,12 @@ export default {
symbolSize: 5, // 图标大小
},
lineStyle: {
// normal: {
color: color[i],
width: 3, // 尾迹线条宽度
opacity: 0.6, // 尾迹线条透明度
curveness: 0.2, // 尾迹线条曲直度
// },
// normal: {
color: color[i],
width: 3, // 尾迹线条宽度
opacity: 0.6, // 尾迹线条透明度
curveness: 0.2, // 尾迹线条曲直度
// },
},
data: convertData(item[1]),
},
@ -227,7 +228,7 @@ export default {
brushType: "stroke", // 波纹绘制方式 stroke, fill
scale: 3, // 波纹圆环最大限制，值越大波纹越大
},
tooltip: {
tooltip: {
trigger: "item",
formatter(params) {
return params.data.name + ':' + params.data.value[2]
@ -249,19 +250,19 @@ export default {
},
},
symbol: "circle",
symbolSize:3,
symbolSize: 3,
// itemStyle: {
// normal: {
// // show: false,
// color: "#000",
// },
// },
itemStyle: {
color: "#000"
itemStyle: {
color: "#000"
},
data: item[1].map((dataItem) => {
return {
visualMap:false,
visualMap: false,
name: dataItem[0].name,
value: this.geoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
};
@ -388,6 +389,68 @@ export default {
this.myChart1.setOption(option);
// this.myCharts1.setOption(option);
},
//3d地图
render3DMap() {
var color = ['#000'];
this.myChart = this.$echarts.init(document.getElementById("chart_map"));
this.$echarts.registerMap("莒县", prefecture, {});
var seriesData = [];
this.datas.map((item, i) => {
seriesData.push(
{
coords: [this.geoCoordMap[item[1].name], this.geoCoordMap[item[0].name]]
}
);
})
let option = {
geo3D: {
map: '莒县',
roam: false,
top: 0,
bottom: 20,
boxWidth: 200,
itemStyle: {
areaColor: 'rgb(5,101,123)',
opacity: 1,
borderWidth: 0.8,
borderColor: 'rgb(62,215,213)'
},
realisticMaterial: {
detailTexture: require("@/assets/images/map_bg.png")
},
},
series: [
{
type: "lines3D",
coordinateSystem: 'geo3D',
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[0],
width: 3, // 尾迹线条宽度
opacity: 0.6, // 尾迹线条透明度
curveness: 0.2, // 尾迹线条曲直度
// },
},
data: seriesData,
},
]
}
this.myChart.setOption(option);
},
},
};
</script>

Write Preview
Loading…
Cancel
Save