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

完善3d地图样式

Browse Source
main
jinna 3 years ago
parent 17c67e5a07
commit b953d549d8
3 changed files with 562 additions and 182 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/map.jpg
  2. 298
      src/views/components/showmap.vue
  3. 444
      src/views/dashboard/home.vue

BIN
src/assets/images/map.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

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

@ -1,5 +1,5 @@
<template> <template>
<div id="chart_map" class="map_box"></div> <div id="chart_map" class="map_box"></div>
</template> </template>
<script> <script>
import prefecture from "@/assets/json/prefecture.json"; import prefecture from "@/assets/json/prefecture.json";
@ -9,7 +9,9 @@ import prefecture from "@/assets/json/prefecture.json";
/*因为echarts 只内置了世界、中国、中国省的地图文件，如果你要使用市级的地图要去找相关的json或者js文件然后在渲染*/ /*因为echarts 只内置了世界、中国、中国省的地图文件，如果你要使用市级的地图要去找相关的json或者js文件然后在渲染*/
export default { export default {
props: { props: {
mapData: Array mapData:{
type:Array,
}
}, },
data() { data() {
return { return {
@ -143,11 +145,29 @@ export default {
myChart1: null, myChart1: null,
}; };
}, },
watch: {},
mounted() { mounted() {
// console.log(this.mapData)
// this.createCharts1(); // this.createCharts1();
this.render3DMap();
this.myChart = this.$echarts.init(document.getElementById("chart_map"));
this.$echarts.registerMap("莒县", prefecture, {});
this.render3DMap();
},
created() {
this.$nextTick(() =>{
console.log(this.$parent.mapData)
console.log(JSON.parse(JSON.stringify(this.$parent.mapData)))
})
},
watch:{
mapData:{
handler(newValue,oldValue){
console.log(newValue)
// if(newValue.length !== 0){
// this.render3DMap();
// }
}
}
}, },
methods: { methods: {
createCharts1() { createCharts1() {
@ -159,19 +179,28 @@ export default {
var toCoord = this.geoCoordMap[dataItem[1].name]; var toCoord = this.geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) { if (fromCoord && toCoord) {
res.push([ res.push([
{ // {
coord: toCoord, // coord: toCoord,
fromName: dataItem[0].name, // fromName: dataItem[0].name,
value: dataItem[0].value, // value: dataItem[0].value,
// name: dataItem[0].name, // // name: dataItem[0].name,
visualMap: false, // visualMap: false,
}, // },
// {
// coord: fromCoord,
// toName: dataItem[1].name,
// visualMap: false,
// },
{ {
coord: fromCoord, fromName: dataItem[0].name,
toName: dataItem[1].name, toName: dataItem[1].name,
visualMap: false, coords: [
toCoord,
fromCoord,
]
}, },
]); ]);
} }
@ -188,8 +217,8 @@ export default {
var color = ['#000']; var color = ['#000'];
// 迁入地特殊显示//广东 // 迁入地特殊显示//广东
[[`${this.datas[0][1].name}`, this.datas]].forEach((item, i) => { [[`${this.datas[0][1].name}`, this.datas]].forEach((item, i) => {
console.log(item) console.log(item[1])
console.log(convertData(item[1])); console.log(convertData(this.datas));
series.push( series.push(
{ {
type: "lines", type: "lines",
@ -390,9 +419,32 @@ export default {
}, },
//3d地图 //3d地图
render3DMap() { render3DMap() {
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(
{
fromName: dataItem[1].name,
toName: dataItem[0].name,
coords: [
toCoord,
fromCoord,
],
visualMap: false,
},
);
}
}
return res;
};
console.log(convertData(this.datas))
// var color = ['#000']; // var color = ['#000'];
this.myChart = this.$echarts.init(document.getElementById("chart_map"));
this.$echarts.registerMap("莒县", prefecture, {});
var seriesData = []; var seriesData = [];
this.datas.map((item, i) => { this.datas.map((item, i) => {
seriesData.push( seriesData.push(
@ -402,75 +454,177 @@ export default {
); );
}) })
console.log(seriesData) console.log(seriesData)
var yMax = 0;
for (var j = 0; j < this.mapData.length; j++) {
if (yMax < this.mapData[j].value) {
yMax = this.mapData[j].value;
}
}
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}
}
})
console.log(this.mapData)
let option = { let option = {
geo3D: { // backgroundColor: '#000f1e',
show:true, visualMap: {
map: '莒县', min: 0,
left: "0%", max: yMax,
// environment: '/image/map_bg.png', text: ["高", "低"],
roam: true, orient: "horizontal",
shading:'realistic', itemWidth: 15,
zoom: 2, itemHeight: 200,
regionHeight: 15, right: 0,
// top: -20, bottom: 5,
// bottom: 20, inRange: {
// boxWidth: 100, color: ["#1e73dd", "#04296f"],
// boxHeight:50,
itemStyle: {
areaColor: 'rgb(5,101,123)',
opacity: 1,
borderWidth: 0.8,
borderColor: 'rgb(62,215,213)'
},
realisticMaterial: {
detailTexture: require("@/assets/images/map_bg.png"),
roughness:0.8
}, },
viewControl: { textStyle: {
"projection": "perspective", color: "#fff",
"autoRotate": false,
"distance": 180, // 控制地图版块的大小
"alpha": 35, // 地图版块垂直方向的角度
"beta": 10, // 地图版块水平方向的角度
'rotateSensitivity': 0, // 禁用旋转
'panSensitivity': 0, // 禁用平移
'zoomSensitivity': 0, // 禁用缩放
}, },
}, },
geo3D: {
map: '莒县',
show: false,
zlevel: -10,
top:-30,
boxWidth: 200,
boxHeight: 4, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
regionHeight: 15,
shading: 'lambert',
viewControl: {
projection: 'perspective',
autoRotate: false,
damping: 0,
rotateSensitivity: 2, //旋转操作的灵敏度
rotateMouseButton: 'left', //旋转操作使用的鼠标按键
zoomSensitivity: 2, //缩放操作的灵敏度
panSensitivity: 2, //平移操作的灵敏度
panMouseButton: 'right', //平移操作使用的鼠标按键
distance: 350, //默认视角距离主体的距离
alpha: 40, // 地图版块垂直方向的角度
beta: 10, // 地图版块水平方向的角度
center: [0, 0, 0],
animation: true,
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut'
},
},
series: [ series: [
{ {
type: "lines3D", type: 'map3D',
coordinateSystem: 'geo3D', map: '莒县',
zlevel: 1, show: true,
tooltip: { zlevel: 1,
trigger: "item", top:-30,
formatter(params) { boxWidth: 200,
console.log(params); //boxHeight: 4, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
}, regionHeight: 15,
shading: 'lambert',
label: { // 标签的相关设置
show: true,
textStyle: {
color: '#fff',// 字体背景色
}
},
itemStyle: {
color: '#025894',
areaColor: '#025894',
opacity: 1,
borderWidth: 1,
borderColor: '#1cccff'
},
emphasis: {
label: {
show: false,
textStyle: {
color: '#fff',
fontSize: 14,
backgroundColor: 'transparent' // 字体背景色
}
},
borderColor: '#333',
borderWidth: 5,
itemStyle: {
color: '#025894',
areaColor: '#025894',
}
},
light: {
main: {
shadow: true,
shadowQuality: 'ultra',
},
},
viewControl: {
projection: 'perspective',
autoRotate: false,
damping: 0,
rotateSensitivity: 2, //旋转操作的灵敏度
rotateMouseButton: 'left', //旋转操作使用的鼠标按键
zoomSensitivity: 2, //缩放操作的灵敏度
panSensitivity: 2, //平移操作的灵敏度
panMouseButton: 'right', //平移操作使用的鼠标按键
distance: 350, //默认视角距离主体的距离
alpha: 40, // 地图版块垂直方向的角度
beta: 10, // 地图版块水平方向的角度
center: [0, 0, 0],
animation: true,
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut'
},
data:this.mapData
}, },
animation:true, // 线 和 点
effect: { {
type: 'lines3D',
coordinateSystem: 'geo3D',
zlevel: 2, //设置这个才会有轨迹线的小尾巴
polyline: false,
effect: {
show: true, show: true,
period: 10, period: 10,
trailLength: 0.1, trailLength: 0.1,
trailColor: '#fff', trailColor: '#ffd419',
color: '#fff', //流动点颜色 color: '#fff', //流动点颜色
symbol: 'arrow', symbol: 'arrow',
symbolSize: 6 symbolSize: 6
}, },
lineStyle: { lineStyle: {
// normal: { normal: {
color: "#e3c946", color: '#ffd419', //线条颜色
width: 2, // 尾迹线条宽度 width: 2,
opacity: 0.6, // 尾迹线条透明度 curveness: 0.5,
curveness: 0.2, // 尾迹线条曲直度 shadowColor: '#fff',
// }, }
},
blendMode: 'lighter',
data: convertData(this.datas),
}, },
data: seriesData,
},
] ]
} };
this.myChart.setOption(option); this.myChart.setOption(option);
}, },
}, },

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

@ -165,8 +165,9 @@
</div> </div>
</div> </div>
<div class="center_bottom"> <div class="center_bottom">
<div class="charts_box map_box"> <div class="charts_box map-box">
<ShowMap :mapData="mapData"></ShowMap> <!-- <ShowMap :mapData="mapData"></ShowMap> -->
<div id="chart_map" class="map_box"></div>
</div> </div>
<div class="charts_box"> <div class="charts_box">
<div id="trendChart" class="trend_box"></div> <div id="trendChart" class="trend_box"></div>
@ -176,6 +177,7 @@
<a <a
@click="backMap" @click="backMap"
href="javascript:;" href="javascript:;"
class="toback"
style=" style="
position: absolute; position: absolute;
right: 10px; right: 10px;
@ -232,7 +234,7 @@ HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts); HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts); Highcharts3D(Highcharts);
Highmaps(Highcharts); Highmaps(Highcharts);
import 'echarts-gl' import "echarts-gl";
import axios from "axios"; import axios from "axios";
import * as XLSX from "xlsx/xlsx.mjs"; import * as XLSX from "xlsx/xlsx.mjs";
import Swiper from "swiper"; import Swiper from "swiper";
@ -242,12 +244,13 @@ import PathMap from "../components/pathMap";
import ShowMap from "../components/showmap"; import ShowMap from "../components/showmap";
import CarMile from "../components/carMile"; import CarMile from "../components/carMile";
import CarWarn from "../components/carWarn"; import CarWarn from "../components/carWarn";
import prefecture from "@/assets/json/prefecture.json";
export default { export default {
components: { components: {
PathMap, PathMap,
CarMile, CarMile,
CarWarn, CarWarn,
ShowMap ShowMap,
}, },
data() { data() {
return { return {
@ -258,6 +261,7 @@ export default {
week: "", week: "",
isFullFlag: false, isFullFlag: false,
isSupport: false, isSupport: false,
mapChart:null,
dayData: [], dayData: [],
monthData: [], monthData: [],
totalData: [], totalData: [],
@ -329,16 +333,16 @@ export default {
库山乡: [118.979909, 35.92304], //库山乡 库山乡: [118.979909, 35.92304], //库山乡
招贤镇: [118.929219, 35.723248], //招贤镇 招贤镇: [118.929219, 35.723248], //招贤镇
桑园镇: [119.046012, 35.678553], //桑园镇 桑园镇: [119.046012, 35.678553], //桑园镇
阎庄镇: [118.834585, 35.670621], //阎庄镇 阎庄街道: [118.834585, 35.670621], //阎庄镇
莒县电子商务公共服务中心: [118.901658, 35.60688], 莒县电子商务公共服务中心: [118.901658, 35.60688],
店子集镇: [118.914151, 35.5844], 店子集街道: [118.914151, 35.5844],
城阳街道: [118.82472, 35.583488], //城阳街道 城阳街道: [118.82472, 35.583488], //城阳街道
峤山镇: [118.946005, 35.657339], //峤山镇 峤山镇: [118.946005, 35.657339], //峤山镇
龙山镇: [119.003747, 35.515955], 龙山镇: [119.003747, 35.515955],
陵阳镇: [118.890825, 35.545056], 陵阳街道: [118.890825, 35.545056],
寨里河镇: [118.931584, 35.469982], 寨里河镇: [118.931584, 35.469982],
莒县经济开发区: [118.851312, 35.626514], 经济开发区: [118.851312, 35.626514],
浮来山镇: [118.744789, 35.596051], 浮来山街道: [118.744789, 35.596051],
刘官庄镇: [118.801123, 35.522202], 刘官庄镇: [118.801123, 35.522202],
长岭镇: [118.844125, 35.484677], 长岭镇: [118.844125, 35.484677],
小店镇: [118.81007, 35.422484], 小店镇: [118.81007, 35.422484],
@ -350,15 +354,14 @@ export default {
this.getTime(); this.getTime();
}, },
mounted() { mounted() {
this.readExcelFile("http://"+location.host+"/excel/wuliu.xlsx"); this.readExcelFile("http://" + location.host + "/excel/wuliu.xlsx");
queryWeath().then((res) => { queryWeath().then((res) => {
this.temp = res.result.now.temp; this.temp = res.result.now.temp;
this.weather = res.result.now.text; this.weather = res.result.now.text;
}); });
this.$nextTick(() =>{ this.$nextTick(() => {
this.createPieChart() this.createPieChart();
});
})
}, },
methods: { methods: {
backMap() { backMap() {
@ -374,17 +377,12 @@ export default {
responseType: "arraybuffer", responseType: "arraybuffer",
}) })
.then((res) => { .then((res) => {
// console.log(res);
let data = new Uint8Array(res); let data = new Uint8Array(res);
// console.log(data);
let wb = XLSX.read(data, { let wb = XLSX.read(data, {
type: "array", type: "array",
}); });
// console.log(wb);
let sheets = wb.Sheets; // 获取文档数据 let sheets = wb.Sheets; // 获取文档数据
// console.log(sheets);
this.content = this.transformSheets(sheets); this.content = this.transformSheets(sheets);
// this.$message('读取成功');
}) })
.catch((err) => { .catch((err) => {
this.$message.error(err); this.$message.error(err);
@ -395,7 +393,6 @@ export default {
for (const key in sheets) { for (const key in sheets) {
content1.push(XLSX.utils.sheet_to_json(sheets[key])); content1.push(XLSX.utils.sheet_to_json(sheets[key]));
} }
console.log(content1);
this.dayData.push( this.dayData.push(
{ name: "收件量", data: content1[0][0].日总收件量, huanbi: content1[0][0].收件量日总环比 }, { name: "收件量", data: content1[0][0].日总收件量, huanbi: content1[0][0].收件量日总环比 },
{ name: "发件量", data: content1[0][0].日总发件量, huanbi: content1[0][0].发件量日总环比 }, { name: "发件量", data: content1[0][0].日总发件量, huanbi: content1[0][0].发件量日总环比 },
@ -461,12 +458,11 @@ export default {
}); });
}); });
this.pieData = this.pieData.sort(function (a, b) { this.pieData = this.pieData.sort(function (a, b) {
return b.y - a.y; return b.y - a.y;
}); });
this.pieData[0].h = 15 this.pieData[0].h = 15;
this.pieData[1].h = 10 this.pieData[1].h = 10;
this.pieData[2].h = 5 this.pieData[2].h = 5;
console.log(this.pieData);
this.shouData.map((item, index) => { this.shouData.map((item, index) => {
if (index <= 10) { if (index <= 10) {
this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count }); this.slideList[0].arr.push({ no: index + 1, name: item.name, count: item.count });
@ -477,12 +473,211 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.createChart(); this.createChart();
this.createPieChart(this.pieData); this.createPieChart(this.pieData);
// this.createCharts1(); this.render3DMap()
this.run(); this.run();
this.run1(); this.run1();
}); });
}, },
render3DMap() {
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(
{
fromName: dataItem[1].name,
toName: dataItem[0].name,
coords: [
toCoord,
fromCoord,
],
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;
}
}
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}
}
})
this.mapChart = this.$echarts.init(document.getElementById("chart_map"));
this.$echarts.registerMap("莒县", prefecture, {});
let option = {
// backgroundColor: '#000f1e',
visualMap: {
min: 0,
max: yMax,
text: ["高", "低"],
orient: "horizontal",
itemWidth: 15,
itemHeight: 200,
right: 0,
bottom: 5,
inRange: {
color: ["#1e73dd", "#04296f"],
},
textStyle: {
color: "#fff",
},
},
geo3D: {
map: '莒县',
show: false,
zlevel: -10,
top:-30,
boxWidth: 200,
boxHeight: 4, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
regionHeight: 15,
shading: 'lambert',
viewControl: {
projection: 'perspective',
autoRotate: false,
damping: 0,
rotateSensitivity: 2, //旋转操作的灵敏度
rotateMouseButton: 'left', //旋转操作使用的鼠标按键
zoomSensitivity: 2, //缩放操作的灵敏度
panSensitivity: 2, //平移操作的灵敏度
panMouseButton: 'right', //平移操作使用的鼠标按键
distance: 350, //默认视角距离主体的距离
alpha: 40, // 地图版块垂直方向的角度
beta: 10, // 地图版块水平方向的角度
center: [0, 0, 0],
animation: true,
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut'
},
},
series: [
{
type: 'map3D',
map: '莒县',
show: true,
zlevel: 1,
top:-30,
boxWidth: 200,
//boxHeight: 4, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
regionHeight: 15,
shading: 'lambert',
label: { // 标签的相关设置
show: true,
textStyle: {
color: '#fff',// 字体背景色
}
},
itemStyle: {
color: '#025894',
areaColor: '#025894',
opacity: 1,
borderWidth: 1,
borderColor: '#1cccff'
},
emphasis: {
label: {
show: false,
textStyle: {
color: '#fff',
fontSize: 14,
backgroundColor: 'transparent' // 字体背景色
}
},
borderColor: '#333',
borderWidth: 5,
itemStyle: {
color: '#025894',
areaColor: '#025894',
}
},
light: {
main: {
shadow: true,
shadowQuality: 'ultra',
},
},
viewControl: {
projection: 'perspective',
autoRotate: false,
damping: 0,
rotateSensitivity: 2, //旋转操作的灵敏度
rotateMouseButton: 'left', //旋转操作使用的鼠标按键
zoomSensitivity: 2, //缩放操作的灵敏度
panSensitivity: 2, //平移操作的灵敏度
panMouseButton: 'right', //平移操作使用的鼠标按键
distance: 350, //默认视角距离主体的距离
alpha: 40, // 地图版块垂直方向的角度
beta: 10, // 地图版块水平方向的角度
center: [0, 0, 0],
animation: true,
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut'
},
data:this.mapData
},
// 线 和 点
{
type: 'lines3D',
coordinateSystem: 'geo3D',
zlevel: 2, //设置这个才会有轨迹线的小尾巴
polyline: false,
effect: {
show: true,
period: 10,
trailLength: 0.1,
trailColor: '#ffd419',
color: '#fff', //流动点颜色
symbol: 'arrow',
symbolSize: 6
},
lineStyle: {
normal: {
color: '#ffd419', //线条颜色
width: 2,
curveness: 0.5,
shadowColor: '#fff',
}
},
blendMode: 'lighter',
data: convertData(this.datas),
},
]
};
this.mapChart.setOption(option);
},
createChart() { createChart() {
this.trendCharts = this.$echarts.init(document.getElementById("trendChart")); this.trendCharts = this.$echarts.init(document.getElementById("trendChart"));
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
@ -613,8 +808,8 @@ export default {
return ret; return ret;
}); });
})(Highcharts); })(Highcharts);
Highcharts.chart('pieChart', { Highcharts.chart("pieChart", {
chart: { chart: {
type: "pie", type: "pie",
animation: false, animation: false,
events: { events: {
@ -640,7 +835,7 @@ export default {
beta: 0, beta: 0,
}, },
backgroundColor: null, backgroundColor: null,
marginTop: -45 marginTop: -45,
}, },
colors: ["#00bdff", "#52f4c1", "#00dbec"], colors: ["#00bdff", "#52f4c1", "#00dbec"],
title: { title: {
@ -657,7 +852,6 @@ export default {
// dataLabels: { // dataLabels: {
// enabled: true, // enabled: true,
// formatter: function (params) { // formatter: function (params) {
// console.log(this);
// //this 为当前的点（扇区）对象，可以通过 console.log(this) 来查看详细信息 // //this 为当前的点（扇区）对象，可以通过 console.log(this) 来查看详细信息
// return `<span class="my-class" style="color:#e39054;font-size:0.16rem">${this.key}:</span> // 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="color:#e39054;font-size:0.14rem;">${((this.y / this.total) * 100).toFixed(2)}%</span><br />
@ -674,11 +868,17 @@ export default {
textOutline: "none", // 去除黑色阴影 textOutline: "none", // 去除黑色阴影
}, },
formatter: function (params) { formatter: function (params) {
// console.log(this);
//this 为当前的点（扇区）对象，可以通过 console.log(this) 来查看详细信息 //this 为当前的点（扇区）对象，可以通过 console.log(this) 来查看详细信息
return `<span class="my-class" style="color:#e39054;font-size:0.16rem">${this.key}:</span> return `<span class="my-class" style="color:#e39054;font-size:0.16rem">${
<span style="color:#e39054;font-size:0.14rem;">${((this.y / this.total) * 100).toFixed(2)}%</span><br /> this.key
<span style="font-size:0.14rem;color:#fff;line-height: 0.12rem;font-family: 'FZSK';">${this.y}</span>`; }:</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>`;
}, },
}, },
}, },
@ -691,78 +891,78 @@ export default {
{ {
type: "pie", type: "pie",
name: "派件入库量占比", name: "派件入库量占比",
data:data data: data,
}, },
], ],
}); });
}, },
//获取3d丙图的最高扇区的高度 //获取3d丙图的最高扇区的高度
getHeight3D(series, height){ getHeight3D(series, height) {
series.sort((a, b) => { series.sort((a, b) => {
return b.pieData.value - a.pieData.value; return b.pieData.value - a.pieData.value;
}); });
return (height * 25) / series[0].pieData.value; return (height * 25) / series[0].pieData.value;
}, },
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) { getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
// 计算 // 计算
let midRatio = (startRatio + endRatio) / 2; let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2; let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2; let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2; let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。 // 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) { if (startRatio === 0 && endRatio === 1) {
isSelected = true; isSelected = true;
} }
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== "undefined" ? k : 1 / 3; k = typeof k !== "undefined" ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0） // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1） // 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1; let hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程 // 返回曲面参数方程
return { return {
u: { u: {
min: -Math.PI, min: -Math.PI,
max: Math.PI * 3, max: Math.PI * 3,
step: Math.PI / 32, step: Math.PI / 32,
}, },
v: { v: {
min: 0, min: 0,
max: Math.PI * 2, max: Math.PI * 2,
step: Math.PI / 20, step: Math.PI / 20,
}, },
x: (u, v) => { x: (u, v) => {
if (u < startRadian) { if (u < startRadian) {
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate; return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
} }
if (u > endRadian) { if (u > endRadian) {
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate; return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
} }
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate; return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
}, },
y: (u, v)=> { y: (u, v) => {
if (u < startRadian) { if (u < startRadian) {
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate; return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
} }
if (u > endRadian) { if (u > endRadian) {
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate; return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
} }
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate; return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
}, },
z: (u, v)=> { z: (u, v) => {
if (u < -Math.PI * 0.5) { if (u < -Math.PI * 0.5) {
return Math.sin(u); return Math.sin(u);
} }
if (u > Math.PI * 2.5) { if (u > Math.PI * 2.5) {
return Math.sin(u) * h * 0.1; return Math.sin(u) * h * 0.1;
} }
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1; return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
}, },
}; };
}, },
// 按照日月更换数据 // 按照日月更换数据
changeData(val) { changeData(val) {
this.active = val; this.active = val;
@ -853,7 +1053,6 @@ export default {
// this.isSlide = true; // this.isSlide = true;
// } // }
this.$nextTick(() => { this.$nextTick(() => {
// console.log(this.slideList)
this.mySwiper.destroy(); this.mySwiper.destroy();
this.run(); this.run();
@ -1469,9 +1668,10 @@ export default {
height: 25%; height: 25%;
position: absolute; position: absolute;
left: 28%; left: 28%;
bottom: 2%; top: 71%;
z-index: 11; z-index: 11;
display: flex; display: flex;
justify-content: space-around;
.charts_box { .charts_box {
width: 50%; width: 50%;
@ -1481,10 +1681,18 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.map_box{
width: 100%;
height: 100%;
}
} }
.map_box{ .map-box {
width: 48%;
height: 98%;
border: solid 0.01rem rgba(93, 165, 255, 0.15); border: solid 0.01rem rgba(93, 165, 255, 0.15);
box-shadow: -5px 5px 3px 1px rgba(0, 0, 0, 0.4);
} }
} }
.right_box { .right_box {
@ -1563,9 +1771,10 @@ export default {
.pie_box { .pie_box {
height: 83%; height: 83%;
width: 100%; width: 100%;
// background: url(~@/assets/img/pie_bg.png) no-repeat;
} }
.pie_bg{ .pie_bg {
width: 65%; width: 65%;
height: 65%; height: 65%;
background: url(~@/assets/img/pie_bg.png) no-repeat; background: url(~@/assets/img/pie_bg.png) no-repeat;
@ -1573,11 +1782,10 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
// background-position-y: 0.5rem; // background-position-y: 0.5rem;
// background-position-x: -3px; // background-position-x: -3px;
top: 82%; top: 2.2rem;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
} }
.right_cen { .right_cen {
@ -1595,7 +1803,25 @@ export default {
left: 5.2rem; left: 5.2rem;
top: 28%; top: 28%;
width: 8.82rem; width: 8.82rem;
height: 4.2rem; // height: 4.2rem;
height: 42%;
.toback {
position: absolute;
right: 10px;
top: 10px;
display: inline-block;
width: 0.8rem;
color: #ffffff;
font-size: 0.14rem;
font-style: italic;
line-height: 0.2rem;
text-align: center;
border-radius: 0.1rem 0.08rem 0.1rem 0.08rem;
text-decoration: none;
background-color: #16da85;
z-index: 99;
}
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save