diff --git a/package.json b/package.json index 7e68c00..9d7a5fc 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/assets/images/map_bg.png b/src/assets/images/map_bg.png new file mode 100644 index 0000000..225fc0c Binary files /dev/null and b/src/assets/images/map_bg.png differ diff --git a/src/views/components/showmap.vue b/src/views/components/showmap.vue index 45fc687..72eef19 100644 --- a/src/views/components/showmap.vue +++ b/src/views/components/showmap.vue @@ -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); + }, }, };