|
|
@@ -0,0 +1,405 @@
|
|
|
+<template>
|
|
|
+ <div
|
|
|
+ class="edit-view"
|
|
|
+ :style="{
|
|
|
+ backgroundImage: `url(${require('../assets/pc_shuju_bg.jpg')})`
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="header">{{ title }}</div>
|
|
|
+ <div ref="chart" id="map-chart"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import jiangsu from '../320000_full.json';
|
|
|
+import * as echarts from 'echarts';
|
|
|
+import 'echarts-gl';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ myChart: null,
|
|
|
+ active: '南京市',
|
|
|
+ preActive: '南京市',
|
|
|
+ flag: true,
|
|
|
+ isOn: false,
|
|
|
+ timeData: null,
|
|
|
+ desc: 200,
|
|
|
+ sndStat: {},
|
|
|
+ showLables: [],
|
|
|
+ type: 1,
|
|
|
+ title: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ echarts.registerMap('JiangSu', jiangsu);
|
|
|
+ this.type = this.$route.query.type || '1';
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (Number(this.type) === 1) {
|
|
|
+ this.initScatter();
|
|
|
+ } else {
|
|
|
+ this.init3D();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ active() {
|
|
|
+ this.changeChoose();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initScatter() {
|
|
|
+ this.title = '江苏省考级活动分布图';
|
|
|
+ var chartDom = document.getElementById('map-chart');
|
|
|
+ this.myChart = echarts.init(chartDom);
|
|
|
+ this.myChart.setOption({
|
|
|
+ geo: {
|
|
|
+ map: 'JiangSu',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#0C4189',
|
|
|
+ borderColor: '#8CD9FD'
|
|
|
+ },
|
|
|
+ silent: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ visualMap: {
|
|
|
+ show: true,
|
|
|
+ bottom: 30,
|
|
|
+ left: 'center',
|
|
|
+ orient: 'horizontal',
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ seriesIndex: 0,
|
|
|
+ calculable: true,
|
|
|
+ inRange: {
|
|
|
+ color: ['#FDA033', '#FD6C33', '#FD4C33']
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let points = jiangsu.features.map(item => {
|
|
|
+ console.log(item.properties.center);
|
|
|
+ return {
|
|
|
+ value: [...item.properties.center, this.getRamdom(30, 100)],
|
|
|
+ name: item.properties.name
|
|
|
+ };
|
|
|
+ });
|
|
|
+ console.log(points);
|
|
|
+ this.myChart.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'effectScatter',
|
|
|
+ coordinateSystem: 'geo',
|
|
|
+ data: points,
|
|
|
+ symbolSize: function(val) {
|
|
|
+ let size = val[2];
|
|
|
+ if (size > 100) {
|
|
|
+ size = Math.floor(size / 5);
|
|
|
+ }
|
|
|
+ if (size > 100) {
|
|
|
+ size = Math.floor(size / 20);
|
|
|
+ }
|
|
|
+ return size;
|
|
|
+ },
|
|
|
+ encode: {
|
|
|
+ value: 2
|
|
|
+ },
|
|
|
+ showEffectOn: 'render',
|
|
|
+ rippleEffect: {
|
|
|
+ brushType: 'stroke'
|
|
|
+ },
|
|
|
+ hoverAnimation: true,
|
|
|
+ label: {
|
|
|
+ formatter: params => {
|
|
|
+ return params.name + '\r\n' + params.value[2];
|
|
|
+ },
|
|
|
+ show: true,
|
|
|
+ color: '#fff',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: '#333'
|
|
|
+ },
|
|
|
+ zlevel: 1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getRamdom(min, max) {
|
|
|
+ return Math.floor(Math.random() * (max - min)) + min;
|
|
|
+ },
|
|
|
+ init3D() {
|
|
|
+ this.title = '江苏省本月各市考级数量柱状图';
|
|
|
+ var chartDom = document.getElementById('map-chart');
|
|
|
+ this.myChart = echarts.init(chartDom);
|
|
|
+ this.myChart.setOption({
|
|
|
+ color: '#0A2B6A',
|
|
|
+ geo3D: {
|
|
|
+ map: 'JiangSu',
|
|
|
+ shading: 'lambert',
|
|
|
+ instancing: true,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ formatter: params => {
|
|
|
+ this.active = params.name;
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ light: {
|
|
|
+ main: {
|
|
|
+ intensity: 1
|
|
|
+ },
|
|
|
+ ambient: {
|
|
|
+ intensity: 0.5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ regionHeight: 5,
|
|
|
+ boxHeight: 40,
|
|
|
+ viewControl: {
|
|
|
+ distance: 200,
|
|
|
+ minDistance: 150,
|
|
|
+ alpha: 35,
|
|
|
+ beta: -10,
|
|
|
+ rotateSensitivity: [1, 0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ zAxis3D: {
|
|
|
+ type: 'value',
|
|
|
+ min: 0,
|
|
|
+ max: 40
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ id: 'value',
|
|
|
+ type: 'bar3D',
|
|
|
+ name: '江苏省数据',
|
|
|
+ coordinateSystem: 'geo3D',
|
|
|
+ shading: 'lambert',
|
|
|
+ data: [],
|
|
|
+ bevelSize: 0.3,
|
|
|
+ barSize: 5,
|
|
|
+ minHeight: 0,
|
|
|
+ bevelSmoothness: 2,
|
|
|
+ zlevel: 1,
|
|
|
+ silent: true,
|
|
|
+ light: {
|
|
|
+ main: {
|
|
|
+ intensity: 1.2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'name',
|
|
|
+ type: 'bar3D',
|
|
|
+ name: '江苏省名称',
|
|
|
+ coordinateSystem: 'geo3D',
|
|
|
+ shading: 'lambert',
|
|
|
+ data: jiangsu.features.map(item => {
|
|
|
+ let value = this.getCenter(item, true);
|
|
|
+
|
|
|
+ if (this.active === item) {
|
|
|
+ value.push(15);
|
|
|
+ } else {
|
|
|
+ value.push(0);
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ name: item,
|
|
|
+ value: value,
|
|
|
+ itemStyle: {
|
|
|
+ color: this.active === item ? '#FA8816' : '#0A2B6A'
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ barSize: 1,
|
|
|
+ minHeight: 0,
|
|
|
+ bevelSmoothness: 0,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: params => {
|
|
|
+ return params.name;
|
|
|
+ },
|
|
|
+ distance: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ silent: true,
|
|
|
+ zlevel: 2
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ this.myChart.getZr().on('mouseout', () => {
|
|
|
+ this.isOn = true;
|
|
|
+ });
|
|
|
+ this.myChart.getZr().on('globalout', () => {
|
|
|
+ this.isOn = false;
|
|
|
+ this.animationMove();
|
|
|
+ });
|
|
|
+ this.changeChoose();
|
|
|
+ this.animationMove();
|
|
|
+ },
|
|
|
+ changeChoose() {
|
|
|
+ const res = {
|
|
|
+ labels: jiangsu.features.map(item => {
|
|
|
+ return item.properties.name;
|
|
|
+ }),
|
|
|
+ data: jiangsu.features.map(item => {
|
|
|
+ return this.getRamdom(10, 100);
|
|
|
+ })
|
|
|
+ };
|
|
|
+ let regions = res.labels.map(item => {
|
|
|
+ return {
|
|
|
+ name: item,
|
|
|
+ height: this.active === item ? 15 : 5,
|
|
|
+ itemStyle:
|
|
|
+ this.active === item
|
|
|
+ ? {
|
|
|
+ color: '#FA8816',
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: '#FA8816'
|
|
|
+ }
|
|
|
+ : {
|
|
|
+ color: '#0A2B6A',
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: '#8CD9FD'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle:
|
|
|
+ this.active === item
|
|
|
+ ? {
|
|
|
+ color: '#FA8816'
|
|
|
+ }
|
|
|
+ : {
|
|
|
+ color: '#0A2B6A'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.myChart.setOption({
|
|
|
+ geo3D: {
|
|
|
+ regions: regions
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ id: 'value',
|
|
|
+ name: '江苏省数据',
|
|
|
+ data: res.labels.map((item, index) => {
|
|
|
+ let value = 0;
|
|
|
+ if (this.active === item) {
|
|
|
+ value = res.data[index] + this.desc;
|
|
|
+ } else {
|
|
|
+ value = res.data[index];
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ name: item,
|
|
|
+ value: [...this.getCenter(item), value],
|
|
|
+ itemStyle: {
|
|
|
+ color: this.active === item ? '#ffc38c' : '#5AC1FF',
|
|
|
+ opacity: 0.8
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: params => {
|
|
|
+ if (params.name === this.active) {
|
|
|
+ return params.value[2] - this.desc;
|
|
|
+ } else {
|
|
|
+ return params.value[2];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ distance: 2,
|
|
|
+ textStyle: {
|
|
|
+ color: this.active === item ? '#FA8816' : '#fff',
|
|
|
+ fontSize: this.active === item ? 18 : 12,
|
|
|
+ opacity: 1,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ })
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'name',
|
|
|
+ name: '江苏省名称',
|
|
|
+ data: res.labels.map(item => {
|
|
|
+ let value = this.getCenter(item, true);
|
|
|
+ value.push(0);
|
|
|
+ return {
|
|
|
+ name: item,
|
|
|
+ value: value,
|
|
|
+ itemStyle: {
|
|
|
+ color: this.active === item ? '#FA8816' : '#0A2B6A'
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ distance: this.active === item ? 10 : 2,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: this.active === item ? 18 : 12
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ })
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCenter(name, isLable = false) {
|
|
|
+ let info = jiangsu.features.find(item => {
|
|
|
+ return name === item.properties.name;
|
|
|
+ });
|
|
|
+ let center = info ? info.properties.center : [0, 0];
|
|
|
+ if (isLable) {
|
|
|
+ center = [center[0] + 0.200151, center[1] - 0.276493];
|
|
|
+ }
|
|
|
+ return center;
|
|
|
+ },
|
|
|
+ animationMove() {
|
|
|
+ if (this.timeData) {
|
|
|
+ clearTimeout(this.timeData);
|
|
|
+ }
|
|
|
+
|
|
|
+ this.timeData = setTimeout(() => {
|
|
|
+ if (!this.flag || this.isOn) {
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ const citys = jiangsu.features;
|
|
|
+ let index =
|
|
|
+ citys.findIndex(item => {
|
|
|
+ return this.active === item.properties.name;
|
|
|
+ }) || 0;
|
|
|
+ this.active = citys[(index + 1) % citys.length].properties.name;
|
|
|
+ this.animationMove();
|
|
|
+ }
|
|
|
+ }, 3000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+#map-chart {
|
|
|
+ flex-grow: 1;
|
|
|
+}
|
|
|
+.edit-view {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ background-position: center center;
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 35px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 40px;
|
|
|
+ text-shadow: 0px 2px 19px rgba(55, 164, 224, 0.56), 0px 3px 0px #fff;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+}
|
|
|
+</style>
|
panhui
