From 13a727c58400a256af3f7582b62d8237b227329e Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期一, 29 四月 2024 19:05:42 +0800
Subject: [PATCH] 人物详情和地图
---
src/pages/territory/territory.vue | 2294 ++++++++++++++++++----------------------------------------
1 files changed, 730 insertions(+), 1,564 deletions(-)
diff --git a/src/pages/territory/territory.vue b/src/pages/territory/territory.vue
index ab643e3..c09d6d9 100644
--- a/src/pages/territory/territory.vue
+++ b/src/pages/territory/territory.vue
@@ -1,1592 +1,758 @@
<template>
- <view>
- <!-- 椤堕儴瀵艰埅 -->
- <headNav :idIndex="idIndex" text="涓尰鍦板煙鍖昏氨" />
- <view class="flex flex-center" style="width: 100%; margin: .2rem 0 .34rem;justify-content: flex-start;">
- <advancedSearch class="Search" placehold="杈撳叆濮撳悕/鍒悕/鏈濅唬/浼犱富鑱屼笟鎼滅储" @onSearch="onSearch" :isAvancedTrue="false" />
- <ul class="flex">
- <li style="" v-for="(item,index) in dynasty" :key="item.id">
- <view @click="SchoolClick(item.id)" class="flex flex-center font-family school"
- :style="{'marginRight': index === dynasty.length - 1 ? '0' : '0.03rem'}"
- style="font-weight: 500; border-radius: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;">
- <view class="" :style="{background:item.color}"
- style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view>
- <view class="" style="color: #2C2C2C;font-size: .12rem;">{{item.name}}</view>
- </view>
- </li>
- </ul>
- </view>
- <!-- 鎼滅储鍚庣殑寮规 -->
- <el-card class="box-card " v-if="isSearch"
- style=" height: 3.2rem; width: 3rem;position: fixed;z-index: 999999999999;left: 1rem;top: 2.2rem;">
- <div slot="header" class="clearfix">
- <span>浜虹墿 ({{SearchArr.length}})</span>
- <el-button style="float: right; padding: 3px 0;font-size: .12rem;color: #597AA5;"
- @click="isSearch=false" type="text">鍏抽棴</el-button>
- </div>
- <view class="" style="overflow: auto;height: 2.5rem;">
- <ul class="information" v-for="(item,index) in SearchArr" :key="index">
- <li style="font-size: .18rem;font-weight: 700;">{{item.name}}</li>
- <li>鐢熷崚骞�: {{item.birthAndDeath}}</li>
- <li>鏉ユ簮: {{item.source}}</li>
- <li v-if="SearchArr.length-1!==index" style="margin: .1rem 0; border-bottom: 1px solid #D8D8D8;"></li>
- </ul>
- </view>
-
- </el-card>
- <!-- echarts閲岄潰鐨勬暟鎹偣鍑诲悗寮规 -->
- <el-card class="box-card echartsTrue" v-if="isEchTrue"
- style="overflow: inherit; width: 3rem; position: fixed;z-index: 999999999999;"
- :style="{top:isTop,left:isLeft}">
- <div slot="header" class="clearfix">
- <span>{{information[0].content}}</span>
- <el-button style="float: right; padding: 3px 0;font-size: .12rem;color: #597AA5;"
- @click="isEchTrue=false" type="text">鍏抽棴</el-button>
- </div>
- <ul class="information">
- <li v-for="(item,index) in information" :key="index">
- {{item.label}}: {{item.content}}
- </li>
- </ul>
- <el-button class="flex" @click="viewMoreClick"
- style="width: 100%; padding: 3px 0;font-size: .12rem;color: #597AA5;" type="text">鏌ョ湅鏇村>></el-button>
- </el-card>
- <!-- echarts鍦板浘 -->
- <view id="main" style="width: 100vw;position: relative;"></view>
+ <view class="pageBox">
+ <!-- 椤堕儴瀵艰埅 -->
+ <headNav :idIndex="idIndex" text="涓尰鍦板煙鍖昏氨" />
+ <view
+ class="flex flex-center"
+ style="width: 100%; margin: 0.2rem 0 0.34rem; justify-content: flex-start"
+ >
+ <advancedSearch
+ class="Search"
+ placehold="杈撳叆濮撳悕/鍒悕/鏈濅唬/浼犱富鑱屼笟鎼滅储"
+ @onSearch="onSearch"
+ :isAvancedTrue="false"
+ />
+ <ul class="flex">
+ <li style="" v-for="(item, index) in dynasty" :key="item.id">
+ <view
+ @click="SchoolClick(item.id)"
+ class="flex flex-center font-family school"
+ :style="{
+ marginRight: index === dynasty.length - 1 ? '0' : '0.03rem'
+ }"
+ style="
+ font-weight: 500;
+ border-radius: 0.3rem;
+ padding: 0.06rem 0.15rem;
+ color: #2c2c2c;
+ font-size: 0.12rem;
+ margin-top: 0.03rem;
+ margin-right: 0.1rem;
+ background-color: #fff;
+ "
+ >
+ <view
+ class=""
+ :style="{ background: item.color }"
+ style="
+ margin-right: 0.07rem;
+ width: 0.12rem;
+ height: 0.12rem;
+ border-radius: 50%;
+ "
+ ></view>
+ <view class="" style="color: #2c2c2c; font-size: 0.12rem">{{
+ item.name
+ }}</view>
+ </view>
+ </li>
+ </ul>
+ </view>
+ <!-- 鎼滅储鍚庣殑寮规 -->
+ <el-card
+ class="box-card"
+ v-if="isSearch"
+ style="
+ height: 3.2rem;
+ width: 3rem;
+ position: fixed;
+ z-index: 999999999999;
+ left: 1rem;
+ top: 2.2rem;
+ "
+ >
+ <div slot="header" class="clearfix">
+ <span>浜虹墿 ({{ SearchArr.length }})</span>
+ <el-button
+ style="
+ float: right;
+ padding: 3px 0;
+ font-size: 0.12rem;
+ color: #597aa5;
+ "
+ @click="isSearch = false"
+ type="text"
+ >鍏抽棴</el-button
+ >
+ </div>
+ <view class="" style="overflow: auto; height: 2.5rem">
+ <ul class="information" v-for="(item, index) in SearchArr" :key="index">
+ <li style="font-size: 0.18rem; font-weight: 700">{{ item.name }}</li>
+ <li>鐢熷崚骞�: {{ item.birthAndDeath }}</li>
+ <li>鏉ユ簮: {{ item.source }}</li>
+ <li
+ v-if="SearchArr.length - 1 !== index"
+ style="margin: 0.1rem 0; border-bottom: 1px solid #d8d8d8"
+ ></li>
+ </ul>
+ </view>
+ </el-card>
+ <!-- echarts閲岄潰鐨勬暟鎹偣鍑诲悗寮规 -->
+ <el-card
+ class="box-card echartsTrue"
+ v-if="isEchTrue"
+ style="
+ overflow: inherit;
+ width: 3rem;
+ position: fixed;
+ z-index: 999999999999;
+ "
+ :style="{ top: isTop, left: isLeft }"
+ >
+ <div slot="header" class="clearfix">
+ <span>{{ information[0].content }}</span>
+ <el-button
+ style="
+ float: right;
+ padding: 3px 0;
+ font-size: 0.12rem;
+ color: #597aa5;
+ "
+ @click="isEchTrue = false"
+ type="text"
+ >鍏抽棴</el-button
+ >
+ </div>
+ <ul class="information">
+ <li v-for="(item, index) in information" :key="index">
+ {{ item.label }}: {{ item.content }}
+ </li>
+ </ul>
+ <el-button
+ class="flex"
+ @click="viewMoreClick"
+ style="width: 100%; padding: 3px 0; font-size: 0.12rem; color: #597aa5"
+ type="text"
+ >鏌ョ湅鏇村>></el-button
+ >
+ </el-card>
+ <!-- echarts鍦板浘 -->
+ <view id="main" style="width: 100vw; position: relative"></view>
- <!-- 鏈濅唬 -->
- <view class="flex flex-center" style="width: 100%; position: fixed;bottom: .33rem;left: 0;">
- <ul class="flex">
- <li @click="dynastyBottomClick(item.id)" v-for="(item,index) in dynasty1" :key="item.id">
- <view class="flex flex-center" style="height: .35rem; background-color: #fff; color:#244A7B ;">
- {{item.coord}}
- </view>
- <view class="flex flex-center font-family"
- style="padding: .05rem .19rem; height: .3rem;line-height: .3rem; color: #fff; font-size: .14rem; margin-top: .03rem;margin-right: .03rem;background-color: #597AA5;"
- :style="{'marginRight': index === dynasty1.length - 1 ? '0' : '0.03rem','background':dynasty1Color==item.id?'#244A7B':'#597AA5'}">
- {{item.name}}
- </view>
- </li>
- </ul>
- </view>
- </view>
+ <!-- 鏈濅唬 -->
+ <view
+ class="flex flex-center"
+ style="width: 100%; position: fixed; bottom: 0.33rem; left: 0"
+ >
+ <ul class="flex">
+ <li
+ @click="dynastyBottomClick(item.id)"
+ v-for="(item, index) in dynasty1"
+ :key="item.id"
+ >
+ <view
+ class="flex flex-center"
+ style="height: 0.35rem; background-color: #fff; color: #244a7b"
+ >
+ {{ item.coord }}
+ </view>
+ <view
+ class="flex flex-center font-family"
+ style="
+ padding: 0.05rem 0.19rem;
+ height: 0.3rem;
+ line-height: 0.3rem;
+ color: #fff;
+ font-size: 0.14rem;
+ margin-top: 0.03rem;
+ margin-right: 0.03rem;
+ background-color: #597aa5;
+ "
+ :style="{
+ marginRight: index === dynasty1.length - 1 ? '0' : '0.03rem',
+ background: dynasty1Color == item.id ? '#244A7B' : '#597AA5'
+ }"
+ >
+ {{ item.name }}
+ </view>
+ </li>
+ </ul>
+ </view>
+ </view>
</template>
<!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=5USVDAhhS4ssz44HLq3gNPZai7naXf4Q&callback=initializeMap"></script> -->
<!-- 5USVDAhhS4ssz44HLq3gNPZai7naXf4Q -->
<script>
- import {
- loadBMap
- } from "@/static/map.js"
- import * as echarts from 'echarts';
- import 'echarts/extension/bmap/bmap';
- export default {
- data() {
- return {
- // echarts鍏冪礌鐐瑰嚮鏃跺嚭鏉ョ殑寮圭獥鍜屽潗鏍�
- isEchTrue: false,
- isLeft: 0,
- isTop: 0,
- // 鐢ㄦ埛淇℃伅
- information: [{
- label: '濮撳悕',
- content: '鏉庢椂鐝�'
- },
- {
- label: '鍒悕',
- content: '涓滀附鍏堢敓'
- },
- {
- label: '绫嶈疮',
- content: '婀栧寳'
- },
- {
- label: '鍖诲鍒嗙',
- content: '涓嵂,閽堢伕'
- },
- {
- label: '灏忎紶',
- content: '鏉庢椂鐝�(绾�1518骞磣1593 骞�)锛� 瀛椾笢鐠э紝 鏅氬勾鑷彿婵掓箹灞变汉锛� 婀栧箍榛勫窞搴滆柂宸�(浠婃箹鍖楃渷钖槬鍘�) 浜猴紝 鏄庝唬钁楀悕鍖昏嵂瀛﹀銆� 涓庘�� 鍖诲湥鈥� 涓囧瘑鏂嬮綈鍚嶏紝 鍙ゆ湁鈥� 涓囧瘑鏂嬬殑鏂癸紝 鏉庢椂鐝嶇殑鑽�� 涔嬭銆� 鍚庝负妤氬共搴�...'
- }
- ],
- // 涓嬮潰鐨勬湞浠�1
- dynasty1Color: 1,
- dynasty1: [{
- name: '澶忔湞',
- coord: '2070BC',
- id: 1
- },
- {
- name: '鍟嗘湞',
- id: 2,
- coord: '1600BC',
- },
- {
- name: '瑗垮懆',
- id: 3,
- coord: '1600BC'
- },
- {
- name: '鏄ョ鎴樺浗',
- id: 4,
- coord: '770BC'
- },
- {
- name: '绉︽湞',
- id: 5,
- coord: '221BC'
- }, {
- name: '姹夋湞',
- id: 6,
- coord: '202BC'
- },
- {
- name: '涓夊浗涓ゆ檵鍗楀寳鏈�',
- id: 7,
- coord: '184'
- },
- {
- name: '闅嬫湞',
- id: 8,
- coord: '581'
- },
- {
- name: '鍞愭湞',
- id: 9,
- coord: '618'
- },
- {
- name: '浜斾唬鍗佸浗',
- id: 10,
- coord: '907'
- },
- {
- name: '杈藉閲�',
- id: 11,
- coord: '907'
- },
- {
- name: '瀹嬫湞',
- id: 12,
- coord: '960'
- },
- {
- name: '鍏冩湞',
- id: 13,
- coord: '1271'
- },
- {
- name: '鏄庢湞',
- id: 14,
- coord: '1368'
- },
- {
- name: '娓呮湞',
- id: 15,
- coord: '1636'
- },
- ],
- // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
- idIndex: 0,
- // 鏈濅唬
- dynasty: [{
- name: '澶忔湞',
- color: '#90BBD8',
- id: 1
- }, {
- name: '鍟嗘湞',
- color: '#EDD28B',
- id: 2
- }, {
- name: '瑗垮懆',
- color: '#CF746D',
- id: 3
- }, {
- name: '绉︽湞',
- color: '#9CC27A',
- id: 4
- }, {
- name: '姹夋湞',
- color: '#5B6CB9',
- id: 5
- }, {
- name: '闅嬫湞',
- color: '#8860A8',
- id: 6
- }, {
- name: '鍞愭湞',
- color: '#DE8E66',
- id: 7
- }],
- // 鎼滅储鍚庢槸鍚︽樉绀哄脊妗�
- isSearch:false,
- SearchArr:[
- {
- id:1,
- name:'鏉庢椂鐝�',
- birthAndDeath:'1518-1593',
- source:'鍥藉浘瑙勮寖妗ｏ紝CBDB锛屼笂鍥惧彜绫嶆暟鎹簱 绫嶈疮锛氭箹鍖�'
- },{
- id:2,
- name:'鏉庢椂鐝�',
- birthAndDeath:'1518-1593',
- source:'鍥藉浘瑙勮寖妗ｏ紝CBDB锛屼笂鍥惧彜绫嶆暟鎹簱 绫嶈疮锛氭箹鍖�'
- }
- ]
- }
- },
- onLoad(options) {
- this.idIndex = options.id
- console.log('optionsoptionsoptions', options.id);
- },
- mounted() {
- console.log('ss');
- // this.$nextTick(() => {
- loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
- this.innt()
- })
- // })
- },
- methods: {
- // 鐐瑰嚮涓嬮潰鐨勬湞浠ｆ寜閽�
- dynastyBottomClick(id) {
- console.log(id);
- this.dynasty1Color = id
- },
- onSearch(val) {
- console.log(val);
- //
- this.isSearch= true
- },
- // 鐐瑰嚮涓婇潰鐨勬湞浠ｆ寜閽�
- SchoolClick(id){
- console.log(id);
- },
- innt() {
- this.$nextTick(() => {
+import { loadBMap } from "@/static/map.js";
+import * as echarts from "echarts";
+import "echarts/extension/bmap/bmap";
+export default {
+ data() {
+ return {
+ // echarts鍏冪礌鐐瑰嚮鏃跺嚭鏉ョ殑寮圭獥鍜屽潗鏍�
+ isEchTrue: false,
+ isLeft: 0,
+ isTop: 0,
+ // 鐢ㄦ埛淇℃伅
+ information: [
+ {
+ label: "濮撳悕",
+ content: "鏉庢椂鐝�"
+ },
+ {
+ label: "鍒悕",
+ content: "涓滀附鍏堢敓"
+ },
+ {
+ label: "绫嶈疮",
+ content: "婀栧寳"
+ },
+ {
+ label: "鍖诲鍒嗙",
+ content: "涓嵂,閽堢伕"
+ },
+ {
+ label: "灏忎紶",
+ content:
+ "鏉庢椂鐝�(绾�1518骞磣1593 骞�)锛� 瀛椾笢鐠э紝 鏅氬勾鑷彿婵掓箹灞变汉锛� 婀栧箍榛勫窞搴滆柂宸�(浠婃箹鍖楃渷钖槬鍘�) 浜猴紝 鏄庝唬钁楀悕鍖昏嵂瀛﹀銆� 涓庘�� 鍖诲湥鈥� 涓囧瘑鏂嬮綈鍚嶏紝 鍙ゆ湁鈥� 涓囧瘑鏂嬬殑鏂癸紝 鏉庢椂鐝嶇殑鑽�� 涔嬭銆� 鍚庝负妤氬共搴�..."
+ }
+ ],
+ // 涓嬮潰鐨勬湞浠�1
+ dynasty1Color: 1,
+ dynasty1: [
+ {
+ name: "澶忔湞",
+ coord: "2070BC",
+ id: 1
+ },
+ {
+ name: "鍟嗘湞",
+ id: 2,
+ coord: "1600BC"
+ },
+ {
+ name: "瑗垮懆",
+ id: 3,
+ coord: "1600BC"
+ },
+ {
+ name: "鏄ョ鎴樺浗",
+ id: 4,
+ coord: "770BC"
+ },
+ {
+ name: "绉︽湞",
+ id: 5,
+ coord: "221BC"
+ },
+ {
+ name: "姹夋湞",
+ id: 6,
+ coord: "202BC"
+ },
+ {
+ name: "涓夊浗涓ゆ檵鍗楀寳鏈�",
+ id: 7,
+ coord: "184"
+ },
+ {
+ name: "闅嬫湞",
+ id: 8,
+ coord: "581"
+ },
+ {
+ name: "鍞愭湞",
+ id: 9,
+ coord: "618"
+ },
+ {
+ name: "浜斾唬鍗佸浗",
+ id: 10,
+ coord: "907"
+ },
+ {
+ name: "杈藉閲�",
+ id: 11,
+ coord: "907"
+ },
+ {
+ name: "瀹嬫湞",
+ id: 12,
+ coord: "960"
+ },
+ {
+ name: "鍏冩湞",
+ id: 13,
+ coord: "1271"
+ },
+ {
+ name: "鏄庢湞",
+ id: 14,
+ coord: "1368"
+ },
+ {
+ name: "娓呮湞",
+ id: 15,
+ coord: "1636"
+ }
+ ],
+ // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
+ idIndex: 0,
+ // 鏈濅唬
+ dynasty: [
+ {
+ name: "澶忔湞",
+ color: "#90BBD8",
+ id: 1
+ },
+ {
+ name: "鍟嗘湞",
+ color: "#EDD28B",
+ id: 2
+ },
+ {
+ name: "瑗垮懆",
+ color: "#CF746D",
+ id: 3
+ },
+ {
+ name: "绉︽湞",
+ color: "#9CC27A",
+ id: 4
+ },
+ {
+ name: "姹夋湞",
+ color: "#5B6CB9",
+ id: 5
+ },
+ {
+ name: "闅嬫湞",
+ color: "#8860A8",
+ id: 6
+ },
+ {
+ name: "鍞愭湞",
+ color: "#DE8E66",
+ id: 7
+ }
+ ],
+ // 鎼滅储鍚庢槸鍚︽樉绀哄脊妗�
+ isSearch: false,
+ SearchArr: [
+ {
+ id: 1,
+ name: "鏉庢椂鐝�",
+ birthAndDeath: "1518-1593",
+ source: "鍥藉浘瑙勮寖妗ｏ紝CBDB锛屼笂鍥惧彜绫嶆暟鎹簱 绫嶈疮锛氭箹鍖�"
+ },
+ {
+ id: 2,
+ name: "鏉庢椂鐝�",
+ birthAndDeath: "1518-1593",
+ source: "鍥藉浘瑙勮寖妗ｏ紝CBDB锛屼笂鍥惧彜绫嶆暟鎹簱 绫嶈疮锛氭箹鍖�"
+ }
+ ]
+ };
+ },
+ onLoad(options) {
+ this.idIndex = options.id;
+ console.log("optionsoptionsoptions", options.id);
+ },
+ mounted() {
+ console.log("ss");
+ // this.$nextTick(() => {
+ loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => {
+ this.innt();
+ });
+ // })
+ },
+ methods: {
+ // 鐐瑰嚮涓嬮潰鐨勬湞浠ｆ寜閽�
+ dynastyBottomClick(id) {
+ console.log(id);
+ this.dynasty1Color = id;
+ },
+ onSearch(val) {
+ console.log(val);
+ //
+ this.isSearch = true;
+ },
+ // 鐐瑰嚮涓婇潰鐨勬湞浠ｆ寜閽�
+ SchoolClick(id) {
+ console.log(id);
+ },
+ innt() {
+ this.$nextTick(() => {
+ var chartDom = document.getElementById("main");
+ var myChart = echarts.init(chartDom);
+ var option;
- var chartDom = document.getElementById('main');
- var myChart = echarts.init(chartDom);
- var option;
+ const data = [
+ {
+ name: "娴烽棬",
+ value: [121.15, 31.89]
+ },
+ {
+ name: "閯傚皵澶氭柉",
+ value: [109.781327, 39.608266]
+ },
+ {
+ name: "鎷涜繙",
+ value: [120.38, 37.35]
+ },
+ {
+ name: "鑸熷北",
+ value: [122.207216, 29.985295]
+ },
+ {
+ name: "榻愰綈鍝堝皵",
+ value: [123.97, 47.33]
+ }
+ ];
+ option = {
+ title: {
+ text: "",
+ subtext: "",
+ sublink: "",
+ left: "center"
+ },
+ tooltip: {
+ trigger: "item"
+ },
+ bmap: {
+ center: [104.114129, 37.550339],
+ zoom: 5,
+ roam: true,
+ mapStyle: {
+ styleJson: [
+ {
+ featureType: "water",
+ elementType: "all",
+ stylers: {
+ color: "#86a1ac"
+ }
+ },
+ {
+ featureType: "land",
+ elementType: "all",
+ stylers: {
+ color: "#f1d99d"
+ }
+ },
+ {
+ featureType: "railway",
+ elementType: "all",
+ stylers: {
+ visibility: "off"
+ }
+ },
+ {
+ featureType: "highway",
+ elementType: "all",
+ stylers: {
+ color: "#f1d99d"
+ }
+ },
+ {
+ featureType: "highway",
+ elementType: "labels",
+ stylers: {
+ visibility: "off"
+ }
+ },
+ {
+ featureType: "arterial",
+ elementType: "geometry",
+ stylers: {
+ color: "#f1d99d"
+ }
+ },
+ {
+ featureType: "arterial",
+ elementType: "geometry.fill",
+ stylers: {
+ color: "#f1d99d"
+ }
+ },
+ {
+ featureType: "poi",
+ elementType: "all",
+ stylers: {
+ visibility: "off"
+ }
+ },
+ {
+ featureType: "green",
+ elementType: "all",
+ stylers: {
+ visibility: "off"
+ }
+ },
+ {
+ featureType: "subway",
+ elementType: "all",
+ stylers: {
+ visibility: "off"
+ }
+ },
+ {
+ featureType: "manmade",
+ elementType: "all",
+ stylers: {
+ color: "#f1d99d"
+ }
+ },
+ {
+ featureType: "local",
+ elementType: "all",
+ stylers: {
+ color: "#f1d99d"
+ }
+ },
+ {
+ featureType: "local",
+ elementType: "labels",
+ stylers: {
+ visibility: "off"
+ }
+ },
+ {
+ featureType: "arterial",
+ elementType: "labels",
+ stylers: {
+ visibility: "off"
+ }
+ },
+ {
+ featureType: "boundary",
+ elementType: "all",
+ stylers: {
+ color: "#f1d99d"
+ }
+ },
+ {
+ featureType: "building",
+ elementType: "all",
+ stylers: {
+ color: "#f1d99d"
+ }
+ },
+ {
+ featureType: "label",
+ elementType: "labels.text.fill",
+ stylers: {
+ color: "#000"
+ }
+ }
+ ]
+ }
+ },
+ series: [
+ {
+ name: "",
+ type: "scatter",
+ coordinateSystem: "bmap",
+ data: data,
+ symbolSize: 0,
+ encode: {
+ value: 2
+ },
+ label: {
+ formatter: "{b}",
+ position: "right",
+ show: false
+ },
+ emphasis: {
+ label: {
+ show: true
+ }
+ }
+ },
+ {
+ name: "",
+ type: "effectScatter",
+ coordinateSystem: "bmap",
+ data: data,
+ symbolSize: 20,
+ encode: {
+ value: 2
+ },
+ showEffectOn: "render",
+ rippleEffect: {
+ brushType: "stroke"
+ },
+ label: {
+ formatter: "{b}",
+ position: "right",
+ show: false
+ },
+ itemStyle: {
+ color: "#ec7b43",
+ shadowBlur: 10,
+ shadowColor: "#333"
+ },
+ emphasis: {
+ scale: false
+ },
+ zlevel: 1
+ }
+ ]
+ };
+ // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉
+ myChart.on("click", (params) => {
+ console.log(params.event.offsetX, params.event.offsetY);
+ if (params.componentType === "series") {
+ var dataName = params.data.name; // 鑾峰彇鐐瑰嚮鐨勬暟鎹悕绉�
+ var dataValue = params.data.value; // 鑾峰彇鐐瑰嚮鐨勬暟鎹��
+ // 鍦ㄨ繖閲屽彲浠ユ牴鎹渶瑕佸鐞嗙偣鍑讳簨浠讹紝姣斿寮瑰嚭瀵瑰簲鏁版嵁鐨勮缁嗕俊鎭瓑鎿嶄綔
+ console.log("鐐瑰嚮浜�", dataName, "鏁版嵁锛屾暟鍊间负", dataValue);
+ // 杩欓噷鍙互缂栧啓瑙﹀彂鏃堕棿鑾峰彇瀵瑰簲鏁版嵁淇℃伅鐨勯�昏緫
+ this.spaceTimeArr(params);
+ }
+ });
- const data = [{
- name: '娴烽棬',
- value: 9
- },
- {
- name: '閯傚皵澶氭柉',
- value: 12
- },
- {
- name: '鎷涜繙',
- value: 12
- },
- {
- name: '鑸熷北',
- value: 12
- },
- {
- name: '榻愰綈鍝堝皵',
- value: 14
- },
- {
- name: '鐩愬煄',
- value: 15
- },
- {
- name: '璧ゅ嘲',
- value: 16
- },
- {
- name: '闈掑矝',
- value: 18
- },
- {
- name: '涔冲北',
- value: 18
- },
- {
- name: '閲戞槍',
- value: 19
- },
- {
- name: '娉夊窞',
- value: 21
- },
- {
- name: '鑾辫タ',
- value: 21
- },
- {
- name: '鏃ョ収',
- value: 21
- },
- {
- name: '鑳跺崡',
- value: 22
- },
- {
- name: '鍗楅��',
- value: 23
- },
- {
- name: '鎷夎惃',
- value: 24
- },
- {
- name: '浜戞诞',
- value: 24
- },
- {
- name: '姊呭窞',
- value: 25
- },
- {
- name: '鏂囩櫥',
- value: 25
- },
- {
- name: '涓婃捣',
- value: 25
- },
- {
- name: '鏀�鏋濊姳',
- value: 25
- },
- {
- name: '濞佹捣',
- value: 25
- },
- {
- name: '鎵垮痉',
- value: 25
- },
- {
- name: '鍘﹂棬',
- value: 26
- },
- {
- name: '姹曞熬',
- value: 26
- },
- {
- name: '娼窞',
- value: 26
- },
- {
- name: '涓逛笢',
- value: 27
- },
- {
- name: '澶粨',
- value: 27
- },
- {
- name: '鏇查潠',
- value: 27
- },
- {
- name: '鐑熷彴',
- value: 28
- },
- {
- name: '绂忓窞',
- value: 29
- },
- {
- name: '鐡︽埧搴�',
- value: 30
- },
- {
- name: '鍗冲ⅷ',
- value: 30
- },
- {
- name: '鎶氶『',
- value: 31
- },
- {
- name: '鐜夋邯',
- value: 31
- },
- {
- name: '寮犲鍙�',
- value: 31
- },
- {
- name: '闃虫硥',
- value: 31
- },
- {
- name: '鑾卞窞',
- value: 32
- },
- {
- name: '婀栧窞',
- value: 32
- },
- {
- name: '姹曞ご',
- value: 32
- },
- {
- name: '鏄嗗北',
- value: 33
- },
- {
- name: '瀹佹尝',
- value: 33
- },
- {
- name: '婀涙睙',
- value: 33
- },
- {
- name: '鎻槼',
- value: 34
- },
- {
- name: '鑽ｆ垚',
- value: 34
- },
- {
- name: '杩炰簯娓�',
- value: 35
- },
- {
- name: '钁姦宀�',
- value: 35
- },
- {
- name: '甯哥啛',
- value: 36
- },
- {
- name: '涓滆帪',
- value: 36
- },
- {
- name: '娌虫簮',
- value: 36
- },
- {
- name: '娣畨',
- value: 36
- },
- {
- name: '娉板窞',
- value: 36
- },
- {
- name: '鍗楀畞',
- value: 37
- },
- {
- name: '钀ュ彛',
- value: 37
- },
- {
- name: '鎯犲窞',
- value: 37
- },
- {
- name: '姹熼槾',
- value: 37
- },
- {
- name: '钃幈',
- value: 37
- },
- {
- name: '闊跺叧',
- value: 38
- },
- {
- name: '鍢夊唱鍏�',
- value: 38
- },
- {
- name: '骞垮窞',
- value: 38
- },
- {
- name: '寤跺畨',
- value: 38
- },
- {
- name: '澶師',
- value: 39
- },
- {
- name: '娓呰繙',
- value: 39
- },
- {
- name: '涓北',
- value: 39
- },
- {
- name: '鏄嗘槑',
- value: 39
- },
- {
- name: '瀵垮厜',
- value: 40
- },
- {
- name: '鐩橀敠',
- value: 40
- },
- {
- name: '闀挎不',
- value: 41
- },
- {
- name: '娣卞湷',
- value: 41
- },
- {
- name: '鐝犳捣',
- value: 42
- },
- {
- name: '瀹胯縼',
- value: 43
- },
- {
- name: '鍜搁槼',
- value: 43
- },
- {
- name: '閾滃窛',
- value: 44
- },
- {
- name: '骞冲害',
- value: 44
- },
- {
- name: '浣涘北',
- value: 44
- },
- {
- name: '娴峰彛',
- value: 44
- },
- {
- name: '姹熼棬',
- value: 45
- },
- {
- name: '绔犱笜',
- value: 45
- },
- {
- name: '鑲囧簡',
- value: 46
- },
- {
- name: '澶ц繛',
- value: 47
- },
- {
- name: '涓存本',
- value: 47
- },
- {
- name: '鍚存睙',
- value: 47
- },
- {
- name: '鐭冲槾灞�',
- value: 49
- },
- {
- name: '娌堥槼',
- value: 50
- },
- {
- name: '鑻忓窞',
- value: 50
- },
- {
- name: '鑼傚悕',
- value: 50
- },
- {
- name: '鍢夊叴',
- value: 51
- },
- {
- name: '闀挎槬',
- value: 51
- },
- {
- name: '鑳跺窞',
- value: 52
- },
- {
- name: '閾跺窛',
- value: 52
- },
- {
- name: '寮犲娓�',
- value: 52
- },
- {
- name: '涓夐棬宄�',
- value: 53
- },
- {
- name: '閿﹀窞',
- value: 54
- },
- {
- name: '鍗楁槍',
- value: 54
- },
- {
- name: '鏌冲窞',
- value: 54
- },
- {
- name: '涓変簹',
- value: 54
- },
- {
- name: '鑷础',
- value: 56
- },
- {
- name: '鍚夋灄',
- value: 56
- },
- {
- name: '闃虫睙',
- value: 57
- },
- {
- name: '娉稿窞',
- value: 57
- },
- {
- name: '瑗垮畞',
- value: 57
- },
- {
- name: '瀹滃',
- value: 58
- },
- {
- name: '鍛煎拰娴╃壒',
- value: 58
- },
- {
- name: '鎴愰兘',
- value: 58
- },
- {
- name: '澶у悓',
- value: 58
- },
- {
- name: '闀囨睙',
- value: 59
- },
- {
- name: '妗傛灄',
- value: 59
- },
- {
- name: '寮犲鐣�',
- value: 59
- },
- {
- name: '瀹滃叴',
- value: 59
- },
- {
- name: '鍖楁捣',
- value: 60
- },
- {
- name: '瑗垮畨',
- value: 61
- },
- {
- name: '閲戝潧',
- value: 62
- },
- {
- name: '涓滆惀',
- value: 62
- },
- {
- name: '鐗′腹姹�',
- value: 63
- },
- {
- name: '閬典箟',
- value: 63
- },
- {
- name: '缁嶅叴',
- value: 63
- },
- {
- name: '鎵窞',
- value: 64
- },
- {
- name: '甯稿窞',
- value: 64
- },
- {
- name: '娼嶅潑',
- value: 65
- },
- {
- name: '閲嶅簡',
- value: 66
- },
- {
- name: '鍙板窞',
- value: 67
- },
- {
- name: '鍗椾含',
- value: 67
- },
- {
- name: '婊ㄥ窞',
- value: 70
- },
- {
- name: '璐甸槼',
- value: 71
- },
- {
- name: '鏃犻敗',
- value: 71
- },
- {
- name: '鏈邯',
- value: 71
- },
- {
- name: '鍏嬫媺鐜涗緷',
- value: 72
- },
- {
- name: '娓崡',
- value: 72
- },
- {
- name: '椹瀺灞�',
- value: 72
- },
- {
- name: '瀹濋浮',
- value: 72
- },
- {
- name: '鐒︿綔',
- value: 75
- },
- {
- name: '鍙ュ',
- value: 75
- },
- {
- name: '鍖椾含',
- value: 79
- },
- {
- name: '寰愬窞',
- value: 79
- },
- {
- name: '琛℃按',
- value: 80
- },
- {
- name: '鍖呭ご',
- value: 80
- },
- {
- name: '缁甸槼',
- value: 80
- },
- {
- name: '涔岄瞾鏈ㄩ綈',
- value: 84
- },
- {
- name: '鏋ｅ簞',
- value: 84
- },
- {
- name: '鏉窞',
- value: 84
- },
- {
- name: '娣勫崥',
- value: 85
- },
- {
- name: '闉嶅北',
- value: 86
- },
- {
- name: '婧ч槼',
- value: 86
- },
- {
- name: '搴撳皵鍕�',
- value: 86
- },
- {
- name: '瀹夐槼',
- value: 90
- },
- {
- name: '寮�灏�',
- value: 90
- },
- {
- name: '娴庡崡',
- value: 92
- },
- {
- name: '寰烽槼',
- value: 93
- },
- {
- name: '娓╁窞',
- value: 95
- },
- {
- name: '涔濇睙',
- value: 96
- },
- {
- name: '閭兏',
- value: 98
- },
- {
- name: '涓村畨',
- value: 99
- },
- {
- name: '鍏板窞',
- value: 99
- },
- {
- name: '娌у窞',
- value: 100
- },
- {
- name: '涓存矀',
- value: 103
- },
- {
- name: '鍗楀厖',
- value: 104
- },
- {
- name: '澶╂触',
- value: 105
- },
- {
- name: '瀵岄槼',
- value: 106
- },
- {
- name: '娉板畨',
- value: 112
- },
- {
- name: '璇告毃',
- value: 112
- },
- {
- name: '閮戝窞',
- value: 113
- },
- {
- name: '鍝堝皵婊�',
- value: 114
- },
- {
- name: '鑱婂煄',
- value: 116
- },
- {
- name: '鑺滄箹',
- value: 117
- },
- {
- name: '鍞愬北',
- value: 119
- },
- {
- name: '骞抽《灞�',
- value: 119
- },
- {
- name: '閭㈠彴',
- value: 119
- },
- {
- name: '寰峰窞',
- value: 120
- },
- {
- name: '娴庡畞',
- value: 120
- },
- {
- name: '鑽嗗窞',
- value: 127
- },
- {
- name: '瀹滄槍',
- value: 130
- },
- {
- name: '涔変箤',
- value: 132
- },
- {
- name: '涓芥按',
- value: 133
- },
- {
- name: '娲涢槼',
- value: 134
- },
- {
- name: '绉︾殗宀�',
- value: 136
- },
- {
- name: '鏍床',
- value: 143
- },
- {
- name: '鐭冲搴�',
- value: 147
- },
- {
- name: '鑾辫姕',
- value: 148
- },
- {
- name: '甯稿痉',
- value: 152
- },
- {
- name: '淇濆畾',
- value: 153
- },
- {
- name: '婀樻江',
- value: 154
- },
- {
- name: '閲戝崕',
- value: 157
- },
- {
- name: '宀抽槼',
- value: 169
- },
- {
- name: '闀挎矙',
- value: 175
- },
- {
- name: '琛㈠窞',
- value: 177
- },
- {
- name: '寤婂潑',
- value: 193
- },
- {
- name: '鑿忔辰',
- value: 194
- },
- {
- name: '鍚堣偉',
- value: 229
- },
- {
- name: '姝︽眽',
- value: 273
- },
- {
- name: '澶у簡',
- value: 279
- }
- ];
- const geoCoordMap = {
- 娴烽棬: [121.15, 31.89],
- 閯傚皵澶氭柉: [109.781327, 39.608266],
- 鎷涜繙: [120.38, 37.35],
- 鑸熷北: [122.207216, 29.985295],
- 榻愰綈鍝堝皵: [123.97, 47.33],
- 鐩愬煄: [120.13, 33.38],
- 璧ゅ嘲: [118.87, 42.28],
- 闈掑矝: [120.33, 36.07],
- 涔冲北: [121.52, 36.89],
- 閲戞槍: [102.188043, 38.520089],
- 娉夊窞: [118.58, 24.93],
- 鑾辫タ: [120.53, 36.86],
- 鏃ョ収: [119.46, 35.42],
- 鑳跺崡: [119.97, 35.88],
- 鍗楅��: [121.05, 32.08],
- 鎷夎惃: [91.11, 29.97],
- 浜戞诞: [112.02, 22.93],
- 姊呭窞: [116.1, 24.55],
- 鏂囩櫥: [122.05, 37.2],
- 涓婃捣: [121.48, 31.22],
- 鏀�鏋濊姳: [101.718637, 26.582347],
- 濞佹捣: [122.1, 37.5],
- 鎵垮痉: [117.93, 40.97],
- 鍘﹂棬: [118.1, 24.46],
- 姹曞熬: [115.375279, 22.786211],
- 娼窞: [116.63, 23.68],
- 涓逛笢: [124.37, 40.13],
- 澶粨: [121.1, 31.45],
- 鏇查潠: [103.79, 25.51],
- 鐑熷彴: [121.39, 37.52],
- 绂忓窞: [119.3, 26.08],
- 鐡︽埧搴�: [121.979603, 39.627114],
- 鍗冲ⅷ: [120.45, 36.38],
- 鎶氶『: [123.97, 41.97],
- 鐜夋邯: [102.52, 24.35],
- 寮犲鍙�: [114.87, 40.82],
- 闃虫硥: [113.57, 37.85],
- 鑾卞窞: [119.942327, 37.177017],
- 婀栧窞: [120.1, 30.86],
- 姹曞ご: [116.69, 23.39],
- 鏄嗗北: [120.95, 31.39],
- 瀹佹尝: [121.56, 29.86],
- 婀涙睙: [110.359377, 21.270708],
- 鎻槼: [116.35, 23.55],
- 鑽ｆ垚: [122.41, 37.16],
- 杩炰簯娓�: [119.16, 34.59],
- 钁姦宀�: [120.836932, 40.711052],
- 甯哥啛: [120.74, 31.64],
- 涓滆帪: [113.75, 23.04],
- 娌虫簮: [114.68, 23.73],
- 娣畨: [119.15, 33.5],
- 娉板窞: [119.9, 32.49],
- 鍗楀畞: [108.33, 22.84],
- 钀ュ彛: [122.18, 40.65],
- 鎯犲窞: [114.4, 23.09],
- 姹熼槾: [120.26, 31.91],
- 钃幈: [120.75, 37.8],
- 闊跺叧: [113.62, 24.84],
- 鍢夊唱鍏�: [98.289152, 39.77313],
- 骞垮窞: [113.23, 23.16],
- 寤跺畨: [109.47, 36.6],
- 澶師: [112.53, 37.87],
- 娓呰繙: [113.01, 23.7],
- 涓北: [113.38, 22.52],
- 鏄嗘槑: [102.73, 25.04],
- 瀵垮厜: [118.73, 36.86],
- 鐩橀敠: [122.070714, 41.119997],
- 闀挎不: [113.08, 36.18],
- 娣卞湷: [114.07, 22.62],
- 鐝犳捣: [113.52, 22.3],
- 瀹胯縼: [118.3, 33.96],
- 鍜搁槼: [108.72, 34.36],
- 閾滃窛: [109.11, 35.09],
- 骞冲害: [119.97, 36.77],
- 浣涘北: [113.11, 23.05],
- 娴峰彛: [110.35, 20.02],
- 姹熼棬: [113.06, 22.61],
- 绔犱笜: [117.53, 36.72],
- 鑲囧簡: [112.44, 23.05],
- 澶ц繛: [121.62, 38.92],
- 涓存本: [111.5, 36.08],
- 鍚存睙: [120.63, 31.16],
- 鐭冲槾灞�: [106.39, 39.04],
- 娌堥槼: [123.38, 41.8],
- 鑻忓窞: [120.62, 31.32],
- 鑼傚悕: [110.88, 21.68],
- 鍢夊叴: [120.76, 30.77],
- 闀挎槬: [125.35, 43.88],
- 鑳跺窞: [120.03336, 36.264622],
- 閾跺窛: [106.27, 38.47],
- 寮犲娓�: [120.555821, 31.875428],
- 涓夐棬宄�: [111.19, 34.76],
- 閿﹀窞: [121.15, 41.13],
- 鍗楁槍: [115.89, 28.68],
- 鏌冲窞: [109.4, 24.33],
- 涓変簹: [109.511909, 18.252847],
- 鑷础: [104.778442, 29.33903],
- 鍚夋灄: [126.57, 43.87],
- 闃虫睙: [111.95, 21.85],
- 娉稿窞: [105.39, 28.91],
- 瑗垮畞: [101.74, 36.56],
- 瀹滃: [104.56, 29.77],
- 鍛煎拰娴╃壒: [111.65, 40.82],
- 鎴愰兘: [104.06, 30.67],
- 澶у悓: [113.3, 40.12],
- 闀囨睙: [119.44, 32.2],
- 妗傛灄: [110.28, 25.29],
- 寮犲鐣�: [110.479191, 29.117096],
- 瀹滃叴: [119.82, 31.36],
- 鍖楁捣: [109.12, 21.49],
- 瑗垮畨: [108.95, 34.27],
- 閲戝潧: [119.56, 31.74],
- 涓滆惀: [118.49, 37.46],
- 鐗′腹姹�: [129.58, 44.6],
- 閬典箟: [106.9, 27.7],
- 缁嶅叴: [120.58, 30.01],
- 鎵窞: [119.42, 32.39],
- 甯稿窞: [119.95, 31.79],
- 娼嶅潑: [119.1, 36.62],
- 閲嶅簡: [106.54, 29.59],
- 鍙板窞: [121.420757, 28.656386],
- 鍗椾含: [118.78, 32.04],
- 婊ㄥ窞: [118.03, 37.36],
- 璐甸槼: [106.71, 26.57],
- 鏃犻敗: [120.29, 31.59],
- 鏈邯: [123.73, 41.3],
- 鍏嬫媺鐜涗緷: [84.77, 45.59],
- 娓崡: [109.5, 34.52],
- 椹瀺灞�: [118.48, 31.56],
- 瀹濋浮: [107.15, 34.38],
- 鐒︿綔: [113.21, 35.24],
- 鍙ュ: [119.16, 31.95],
- 鍖椾含: [116.46, 39.92],
- 寰愬窞: [117.2, 34.26],
- 琛℃按: [115.72, 37.72],
- 鍖呭ご: [110, 40.58],
- 缁甸槼: [104.73, 31.48],
- 涔岄瞾鏈ㄩ綈: [87.68, 43.77],
- 鏋ｅ簞: [117.57, 34.86],
- 鏉窞: [120.19, 30.26],
- 娣勫崥: [118.05, 36.78],
- 闉嶅北: [122.85, 41.12],
- 婧ч槼: [119.48, 31.43],
- 搴撳皵鍕�: [86.06, 41.68],
- 瀹夐槼: [114.35, 36.1],
- 寮�灏�: [114.35, 34.79],
- 娴庡崡: [117, 36.65],
- 寰烽槼: [104.37, 31.13],
- 娓╁窞: [120.65, 28.01],
- 涔濇睙: [115.97, 29.71],
- 閭兏: [114.47, 36.6],
- 涓村畨: [119.72, 30.23],
- 鍏板窞: [103.73, 36.03],
- 娌у窞: [116.83, 38.33],
- 涓存矀: [118.35, 35.05],
- 鍗楀厖: [106.110698, 30.837793],
- 澶╂触: [117.2, 39.13],
- 瀵岄槼: [119.95, 30.07],
- 娉板畨: [117.13, 36.18],
- 璇告毃: [120.23, 29.71],
- 閮戝窞: [113.65, 34.76],
- 鍝堝皵婊�: [126.63, 45.75],
- 鑱婂煄: [115.97, 36.45],
- 鑺滄箹: [118.38, 31.33],
- 鍞愬北: [118.02, 39.63],
- 骞抽《灞�: [113.29, 33.75],
- 閭㈠彴: [114.48, 37.05],
- 寰峰窞: [116.29, 37.45],
- 娴庡畞: [116.59, 35.38],
- 鑽嗗窞: [112.239741, 30.335165],
- 瀹滄槍: [111.3, 30.7],
- 涔変箤: [120.06, 29.32],
- 涓芥按: [119.92, 28.45],
- 娲涢槼: [112.44, 34.7],
- 绉︾殗宀�: [119.57, 39.95],
- 鏍床: [113.16, 27.83],
- 鐭冲搴�: [114.48, 38.03],
- 鑾辫姕: [117.67, 36.19],
- 甯稿痉: [111.69, 29.05],
- 淇濆畾: [115.48, 38.85],
- 婀樻江: [112.91, 27.87],
- 閲戝崕: [119.64, 29.12],
- 宀抽槼: [113.09, 29.37],
- 闀挎矙: [113, 28.21],
- 琛㈠窞: [118.88, 28.97],
- 寤婂潑: [116.7, 39.53],
- 鑿忔辰: [115.480656, 35.23375],
- 鍚堣偉: [117.27, 31.86],
- 姝︽眽: [114.31, 30.52],
- 澶у簡: [125.03, 46.58]
- };
- const convertData = function(data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value)
- });
- }
- }
- return res;
- };
- option = {
- title: {
- // text: '鍏ㄥ浗涓昏鍩庡競绌烘皵璐ㄩ噺 - 鐧惧害鍦板浘',
- // subtext: 'data from PM25.in',
- // sublink: 'http://www.pm25.in',
- left: 'center'
- },
- // legend: {
- // icon: 'image://https://img2.baidu.com/it/u=2771395776,2060749722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710694800&t=c85f997454c2a2b3f2e7919ba9c194a3'
- // },
- // color:['#000'],
- tooltip: {
- trigger: 'item'
- },
- bmap: {
- // center: [104.114129, 37.550339],
- zoom: 4, // 杩欓噷鍙互鏍规嵁闇�瑕佽皟鏁寸缉鏀剧骇鍒�
- roam: true,
- mapStyle: {
- styleJson: [{
- featureType: 'water',
- elementType: 'all',
- stylers: {
- color: '#d1d1d1'
- }
- },
- {
- featureType: 'land',
- elementType: 'all',
- stylers: {
- color: '#f3f3f3'
- }
- },
- {
- featureType: 'railway',
- elementType: 'all',
- stylers: {
- visibility: 'off'
- }
- },
- {
- featureType: 'highway',
- elementType: 'all',
- stylers: {
- color: '#fdfdfd'
- }
- },
- {
- featureType: 'highway',
- elementType: 'labels',
- stylers: {
- visibility: 'off'
- }
- },
- {
- featureType: 'arterial',
- elementType: 'geometry',
- stylers: {
- color: '#fefefe'
- }
- },
- {
- featureType: 'arterial',
- elementType: 'geometry.fill',
- stylers: {
- color: '#fefefe'
- }
- },
- {
- featureType: 'poi',
- elementType: 'all',
- stylers: {
- visibility: 'off'
- }
- },
- {
- featureType: 'green',
- elementType: 'all',
- stylers: {
- visibility: 'off'
- }
- },
- {
- featureType: 'subway',
- elementType: 'all',
- stylers: {
- visibility: 'off'
- }
- },
- {
- featureType: 'manmade',
- elementType: 'all',
- stylers: {
- color: '#d1d1d1'
- }
- },
- {
- featureType: 'local',
- elementType: 'all',
- stylers: {
- color: '#d1d1d1'
- }
- },
- {
- featureType: 'arterial',
- elementType: 'labels',
- stylers: {
- visibility: 'off'
- }
- },
- {
- featureType: 'boundary',
- elementType: 'all',
- stylers: {
- color: '#fefefe'
- }
- },
- {
- featureType: 'building',
- elementType: 'all',
- stylers: {
- color: '#d1d1d1'
- }
- },
- {
- featureType: 'label',
- elementType: 'labels.text.fill',
- stylers: {
- color: '#999999'
- }
- }
- ]
- }
- },
- series: [{
- name: 'pm2.5',
- type: 'scatter',
- coordinateSystem: 'bmap',
- data: convertData(data),
- symbolSize: function(val) {
- return val[2] / 10;
- },
- encode: {
- value: 2
- },
- label: {
- formatter: '{b}',
- position: 'right',
- show: false
- },
- emphasis: {
- label: {
- show: true
- }
- }
- },
- {
- name: 'Top 5',
- type: 'effectScatter',
- coordinateSystem: 'bmap',
- data: convertData(
- data
- .sort(function(a, b) {
- return b.value - a.value;
- })
- .slice(0, 6)
- ),
- symbolSize: function(val) {
- return val[2] / 10;
- },
- encode: {
- value: 2
- },
- showEffectOn: 'render', //缁樺埗瀹屾垚鍚庢樉绀虹壒鏁�
- rippleEffect: {
- brushType: 'stroke'
- },
- label: {
- formatter: '{b}',
- position: 'right',
- show: true
- },
- itemStyle: {
- shadowBlur: 10,
- shadowColor: '#333'
- },
- emphasis: {
- scale: true
- },
- zlevel: 1
- }
- ]
- };
+ option && myChart.setOption(option);
+ });
+ },
+ // 鏃剁┖鍦板浘鐐瑰嚮鏃惰幏鍙栫殑鏁版嵁
+ spaceTimeArr(Arr) {
+ // 淇敼 Vue 缁勪欢鐨勬暟鎹紝渚嬪鏄剧ず鑿滃崟瀵艰埅
+ // 鏃剁┖鍦板浘鐨勬暟鎹�
+ console.log(Arr);
-
- // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉
- myChart.on('click', (params) => {
- console.log(params.event.offsetX, params.event.offsetY);
- if (params.componentType === 'series') {
-
- var dataName = params.data.name; // 鑾峰彇鐐瑰嚮鐨勬暟鎹悕绉�
- var dataValue = params.data.value; // 鑾峰彇鐐瑰嚮鐨勬暟鎹��
- // 鍦ㄨ繖閲屽彲浠ユ牴鎹渶瑕佸鐞嗙偣鍑讳簨浠讹紝姣斿寮瑰嚭瀵瑰簲鏁版嵁鐨勮缁嗕俊鎭瓑鎿嶄綔
- console.log('鐐瑰嚮浜�', dataName, '鏁版嵁锛屾暟鍊间负', dataValue);
- // 杩欓噷鍙互缂栧啓瑙﹀彂鏃堕棿鑾峰彇瀵瑰簲鏁版嵁淇℃伅鐨勯�昏緫
- this.spaceTimeArr(params)
- }
- })
-
- option && myChart.setOption(option);
-
- })
- },
- // 鏃剁┖鍦板浘鐐瑰嚮鏃惰幏鍙栫殑鏁版嵁
- spaceTimeArr(Arr) {
- // 淇敼 Vue 缁勪欢鐨勬暟鎹紝渚嬪鏄剧ず鑿滃崟瀵艰埅
- // 鏃剁┖鍦板浘鐨勬暟鎹�
- console.log(Arr);
-
- this.isEchTrue = true
- this.$nextTick(() => {
- this.isTop = (Arr.event.offsetY ) - .18 - (document.querySelector('.echartsTrue')
- .offsetHeight / 2.1 ) + 'px'
- this.isLeft = Arr.event.offsetX - (document.querySelector('.echartsTrue').offsetWidth /
- 2.1 ) + 'px'
- console.log((document.querySelector('.echartsTrue').offsetHeight / 2 / 100));
- })
-
- },
- // 鏌ョ湅鏇村>>
- viewMoreClick() {
- uni.navigateTo({
- url: '/pages/character/detail'
- })
- },
- }
- }
+ this.isEchTrue = true;
+ this.$nextTick(() => {
+ this.isTop =
+ Arr.event.offsetY -
+ 0.18 -
+ document.querySelector(".echartsTrue").offsetHeight / 2.1 +
+ "px";
+ this.isLeft =
+ Arr.event.offsetX -
+ document.querySelector(".echartsTrue").offsetWidth / 2.1 +
+ "px";
+ console.log(
+ document.querySelector(".echartsTrue").offsetHeight / 2 / 100
+ );
+ });
+ },
+ // 鏌ョ湅鏇村>>
+ viewMoreClick() {
+ uni.navigateTo({
+ url: "/pages/character/detail"
+ });
+ }
+ }
+};
</script>
<style>
- * {
- box-sizing: border-box;
- }
+.pageBox {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
- .echartsTrue::before {
- content: "";
- width: 0;
- height: 0;
- position: absolute;
- bottom: -.18rem;
- left: 1.2rem;
- /* background-color: red; */
- border-left: .2rem solid transparent;
- /* 宸﹁竟閫忔槑 */
- border-right: .2rem solid transparent;
- /* 鍙宠竟閫忔槑 */
- border-top: .2rem solid #fff;
- /* 椤堕儴绾㈣壊 */
- }
+.echartsTrue::before {
+ content: "";
+ width: 0;
+ height: 0;
+ position: absolute;
+ bottom: -0.18rem;
+ left: 1.2rem;
+ /* background-color: red; */
+ border-left: 0.2rem solid transparent;
+ /* 宸﹁竟閫忔槑 */
+ border-right: 0.2rem solid transparent;
+ /* 鍙宠竟閫忔槑 */
+ border-top: 0.2rem solid #fff;
+ /* 椤堕儴绾㈣壊 */
+}
- ::v-deep .el-card__header {
- border: 0;
- background-color: #DDE8F6;
- height: .36rem;
- padding: .08rem .13rem;
- font-size: .14rem;
- font-weight: 600;
- }
+::v-deep .el-card__header {
+ border: 0;
+ background-color: #dde8f6;
+ height: 0.36rem;
+ padding: 0.08rem 0.13rem;
+ font-size: 0.14rem;
+ font-weight: 600;
+}
- .information li {
- font-size: .12rem;
- color: #2C2C2C;
- line-height: 2;
- }
+.information li {
+ font-size: 0.12rem;
+ color: #2c2c2c;
+ line-height: 2;
+}
- /* 鍦板浘涓婄殑宸︿笅瑙� */
- ::v-deep .anchorBL {
- display: none;
- }
+/* 鍦板浘涓婄殑宸︿笅瑙� */
+::v-deep .anchorBL {
+ display: none;
+}
- @media screen and (min-width:2560px)and (max-width:3840px) {
- .Search {
- /* width: 30%; */
- justify-content: flex-end;
- margin-right: .26rem;
- width: 4rem;
- }
+@media screen and (min-width: 2560px) and (max-width: 3840px) {
+ .Search {
+ /* width: 30%; */
+ justify-content: flex-end;
+ margin-right: 0.26rem;
+ width: 4rem;
+ }
- .Search ::v-deep .ffff {
- width: 3rem;
- height: .36rem;
- padding: .01rem;
- border-radius: .3rem !important;
- }
+ .Search ::v-deep .ffff {
+ width: 3rem;
+ height: 0.36rem;
+ padding: 0.01rem;
+ border-radius: 0.3rem !important;
+ }
- .Search ::v-deep .widget_button {
- width: 1rem;
- /* height: .3rem; */
- font-size: .14rem;
- padding: 0;
- border-radius: .3rem !important;
- }
+ .Search ::v-deep .widget_button {
+ width: 1rem;
+ /* height: .3rem; */
+ font-size: 0.14rem;
+ padding: 0;
+ border-radius: 0.3rem !important;
+ }
- .Search ::v-deep .widget_style {
- display: flex;
- justify-content: flex-end;
- }
+ .Search ::v-deep .widget_style {
+ display: flex;
+ justify-content: flex-end;
+ }
- .Search ::v-deep .uni-input-placeholder {
- font-size: .13rem;
- /* height: 100%; */
- line-height: 1;
- }
+ .Search ::v-deep .uni-input-placeholder {
+ font-size: 0.13rem;
+ /* height: 100%; */
+ line-height: 1;
+ }
- .Search ::v-deep .uni-input-input {
- margin-left: .19rem;
- }
- }
+ .Search ::v-deep .uni-input-input {
+ margin-left: 0.19rem;
+ }
+}
- #main {
- height: 6.2rem;
- }
+#main {
+ flex: 1;
+}
- .Search {
- /* width: 30%; */
- justify-content: flex-end;
- margin-right: .26rem;
- width: 4rem;
- }
+.Search {
+ /* width: 30%; */
+ justify-content: flex-end;
+ margin-right: 0.26rem;
+ width: 4rem;
+}
- .Search ::v-deep .ffff {
- width: 3rem;
- height: .36rem;
- padding: .01rem;
- }
+.Search ::v-deep .ffff {
+ width: 3rem;
+ height: 0.36rem;
+ padding: 0.01rem;
+}
- .Search ::v-deep .widget_button {
- width: 1rem;
- /* height: .3rem; */
- font-size: .14rem;
- padding: 0;
- background-color: #597AA5;
- }
+.Search ::v-deep .widget_button {
+ width: 1rem;
+ /* height: .3rem; */
+ font-size: 0.14rem;
+ padding: 0;
+ background-color: #597aa5;
+}
- .Search ::v-deep .widget_style {
- display: flex;
- justify-content: flex-end;
- }
+.Search ::v-deep .widget_style {
+ display: flex;
+ justify-content: flex-end;
+}
- .Search ::v-deep .uni-input-placeholder {
- font-size: .13rem;
- /* height: 100%; */
- line-height: 1;
- margin-left: .19rem;
- }
-</style>
\ No newline at end of file
+.Search ::v-deep .uni-input-placeholder {
+ font-size: 0.13rem;
+ /* height: 100%; */
+ line-height: 1;
+ margin-left: 0.19rem;
+}
+</style>
--
Gitblit v1.9.1