diff --git a/package.json b/package.json index 9d7a5fc..fb9aaf4 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "dependencies": { "axios": "^1.2.2", "core-js": "^3.8.3", - "echarts": "^5.4.0", + "echarts": "^5.4.1", "echarts-gl": "^2.0.9", "element-ui": "^2.15.12", "highcharts": "^9.3.3", diff --git a/public/image/map_bg.png b/public/image/map_bg.png new file mode 100644 index 0000000..225fc0c Binary files /dev/null and b/public/image/map_bg.png differ diff --git a/src/views/components/showmap.vue b/src/views/components/showmap.vue index 72eef19..cfc1f6a 100644 --- a/src/views/components/showmap.vue +++ b/src/views/components/showmap.vue @@ -178,7 +178,6 @@ export default { } return res; }; - var yMax = 0; for (var j = 0; j < this.mapData.length; j++) { if (yMax < this.mapData[j].value) { @@ -391,7 +390,7 @@ export default { }, //3d地图 render3DMap() { - var color = ['#000']; + // var color = ['#000']; this.myChart = this.$echarts.init(document.getElementById("chart_map")); this.$echarts.registerMap("莒县", prefecture, {}); var seriesData = []; @@ -402,13 +401,21 @@ export default { } ); }) + console.log(seriesData) let option = { geo3D: { + show:true, map: '莒县', - roam: false, - top: 0, - bottom: 20, - boxWidth: 200, + left: "0%", + // environment: '/image/map_bg.png', + roam: true, + shading:'realistic', + zoom: 2, + regionHeight: 15, + // top: -20, + // bottom: 20, + // boxWidth: 100, + // boxHeight:50, itemStyle: { areaColor: 'rgb(5,101,123)', opacity: 1, @@ -416,31 +423,46 @@ export default { borderColor: 'rgb(62,215,213)' }, realisticMaterial: { - detailTexture: require("@/assets/images/map_bg.png") + detailTexture: require("@/assets/images/map_bg.png"), + roughness:0.8 + }, + viewControl: { + "projection": "perspective", + "autoRotate": false, + "distance": 180, // 控制地图版块的大小 + "alpha": 35, // 地图版块垂直方向的角度 + "beta": 10, // 地图版块水平方向的角度 + 'rotateSensitivity': 0, // 禁用旋转 + 'panSensitivity': 0, // 禁用平移 + 'zoomSensitivity': 0, // 禁用缩放 }, }, + series: [ { type: "lines3D", coordinateSystem: 'geo3D', - zlevel: 2, + zlevel: 1, tooltip: { trigger: "item", formatter(params) { - // console.log(params); + console.log(params); }, }, + animation:true, effect: { - show: true, - period: 6, // 箭头指向速度,值越小速度越快 - trailLength: 0, // 特效尾迹长度[0,1]值越大,尾迹越长重 - symbol: "arrow", // 箭头图标 - symbolSize: 5, // 图标大小 - }, + show: true, + period: 10, + trailLength: 0.1, + trailColor: '#fff', + color: '#fff', //流动点颜色 + symbol: 'arrow', + symbolSize: 6 + }, lineStyle: { // normal: { - color: color[0], - width: 3, // 尾迹线条宽度 + color: "#e3c946", + width: 2, // 尾迹线条宽度 opacity: 0.6, // 尾迹线条透明度 curveness: 0.2, // 尾迹线条曲直度 // }, diff --git a/src/views/dashboard/home.vue b/src/views/dashboard/home.vue index 29ccc07..d8e4243 100644 --- a/src/views/dashboard/home.vue +++ b/src/views/dashboard/home.vue @@ -1568,7 +1568,7 @@ export default { .pie_bg{ width: 65%; height: 65%; - background: url(http://192.168.1.35:8080/img/pie_bg.587a605d.png) no-repeat; + background: url(~@/assets/img/pie_bg.png) no-repeat; position: absolute; background-size: 100% 100%; // background-position-y: 0.5rem; diff --git a/src/views/dashboard/homepage.vue b/src/views/dashboard/homepage.vue index ecf64ad..6bfdf31 100644 --- a/src/views/dashboard/homepage.vue +++ b/src/views/dashboard/homepage.vue @@ -272,7 +272,7 @@ export default { }, created() { this.getTime(); - this.readExcelFile("http://"+location.host+"/excel/wuliu.xlsx"); + this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx"); // this.readExcelFile("/excelapi/ces.xlsx"); this.$nextTick(() => { this.createCharts();