<template>
<div class="panel-item " id="static">
<div class="thematic-container">
统计分析
</div>
</div>
</template>
<script>
// import { getImg, getCia } from '@/gis/tianditu/index'
// import EchartsLayer from 'echartslayer'
let viewer;
export default {
name: "StaticAna",
props: {},
components: {},
data() {
return {
}
},
computed: {},
watch: {},
methods: {
open() { },
closeMenu() { },
init() {
// console.log('加载了');
var imageryLayers = viewer.imageryLayers;
var scene = viewer.scene;
const data = [
{ name: '廊坊', value: 193 },
{ name: '菏泽', value: 194 },
{ name: '合肥', value: 229 },
{ name: '武汉', value: 273 },
{ name: '大庆', value: 279 }
];
let pieData1 = [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
];
let pieData2 = [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
];
let pieData3 = [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
];
let pieData4 = [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
];
const geoCoordMap = {
'廊坊': [116.7, 39.53],
'菏泽': [115.480656, 35.23375],
'合肥': [117.27, 31.86],
'武汉': [114.31, 30.52],
'大庆': [125.03, 46.58]
};
let convertData1 = geoCoordMap[data[0].name];//地理位置信息
// convertData1=convertData1.concat(pieData1)
// const convertData = function (data) {
// const res = [];
// for (let i = 0; i < data.length; i++) {
// const geoCoord = geoCoordMap[data[i].name];
// // console.log(geoCoord,'geoCoord');
// if (geoCoord) {
// res.push({
// name: data[i].name,
// value: geoCoord.concat(data[i].value)
// });
// }
// }
// return res;
// };
//res现在是二维点信息和echarts的value值==》convertData
const options = {
animation: !1,
// backgroundColor: '#404a59',
title: {
text: 'Echarts之全国主要城市空气质量',
subtext: '',
sublink: '',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'left',
data: ['pm2.5'],
textStyle: {
color: '#fff'
}
},
GLMap: {},
series: [
{
name: '廊坊',
type: 'pie',
coordinateSystem: 'GLMap',
radius: convertData1,
data: pieData1,
// symbolSize: function (val) {
// return val[2] / 20;
// },
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
// itemStyle: {
// normal: {
// color:[ '#ddb926']
// //[ '#ddb926','#FFB6C1','#DA70D6','#9400D3','#B0C4DE',' #7FFFAA']
// }
// }
},
// {
// name: '前5',
// type: 'effectScatter',
// coordinateSystem: 'GLMap',
// data: convertData(data.sort(function (a, b) {
// return b.value - a.value;
// }).slice(0, 6)),
// symbolSize: function (val) {
// return val[2] / 20;
// },
// showEffectOn: 'render',
// rippleEffect: {
// brushType: 'stroke'
// },
// hoverAnimation: true,
// label: {
// normal: {
// formatter: '{b}',
// position: 'right',
// show: true
// }
// },
// itemStyle: {
// normal: {
// color: '#f4e925',
// shadowBlur: 10,
// shadowColor: '#333'
// }
// },
// zlevel: 1
// }
// {
// name: '访问来源',
// type: 'pie',
// coordinateSystem: 'GLMap',
// radius: '50%',
// data: convertData(data),
// emphasis: {
// itemStyle: {
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
// }
// }
// }
]
};
const options1 = {};
const options2 = {};
const options3 = {};
const options4 = {};
// console.log(EchartsLayer, 'this');
// debugger
var echartsLayer = new EchartsLayer(viewer);
echartsLayer.chart.setOption(options);
let handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (e) {
let pos = scene.pickPosition(e.position);
console.log(pos);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
window.camera = scene.camera;
},
},
beforeCreate() { },
created() { },
mounted() {
let self = this;
window.onload = () => {
viewer = window.viewer;
self.init();
console.log('加载了分析');
}
},
beforeUpdate() { },
updated() { },
beforeDestroy() {
// var echartsLayer = new EchartsLayer(viewer);
// echartsLayer.chart.setOption(options1);
},
destroyed() { },
}
</script>
<style scoped>
.thematic-container {
padding: 20px;
}
</style>
