echarts调整升级,地图完成一部分

This commit is contained in:
aixianling
2024-03-26 16:57:18 +08:00
parent c557433324
commit 0821d9b238
67 changed files with 218 additions and 247 deletions

View File

@@ -1,19 +1,21 @@
<template>
<div class="AiDvMap" v-resize="onDomResize">
<div class="chart-map" :class="v" style="width: 800px; height: 600px"></div>
<div class="chart-map" ref="dvMap"/>
</div>
</template>
<script>
import * as echarts from 'echarts'
import http from "dui/lib/js/request";
import {mapState} from "vuex";
export default {
name: 'AiDvMap',
props: {
geoJson: String
},
data() {
return {
timer: null,
v: `AiDvMap-${new Date().getTime()}`,
chart: null
}
},
@@ -23,7 +25,7 @@ export default {
let width = ''
let height = ''
function isReize() {
function isResize() {
const style = document.defaultView.getComputedStyle(el)
if (width !== style.width || height !== style.height) {
binding.value({
@@ -35,210 +37,121 @@ export default {
height = style.height
}
el.__vueSetInterval__ = setInterval(isReize, 300)
el.__vueSetInterval__ = setInterval(isResize, 300)
},
unbind(el) {
clearInterval(el.__vueSetInterval__)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
computed: {
...mapState(['user'])
},
mounted() {
this.$load(this.$refs.dvMap).then(() => this.initChart())
},
methods: {
onDomResize() {
this.$nextTick(() => {
this.chart.resize()
})
},
initChart() {
this.chart = echarts.init(document.querySelector(`.${this.v}`))
this.getData().then(res => {
if (res.code === 0) {
echarts.registerMap('滨海县', res.data)
let option = {
geo: [
{
map: "滨海县",
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "50%"],
layoutSize: "180%",
const {echarts} = window
this.chart = echarts.init(this.$refs.dvMap)
this.getData(this.geoJson).then(res => {
if (res?.data) {
echarts.registerMap('customMap', res.data)
const option = {
// geo: [
// {
// map: "customMap",
// aspectScale: 1,
// zoom: 0.65,
// layoutCenter: ["50%", "50%"],
// layoutSize: "180%",
// show: true,
// roam: false,
// emphasis: {
// show: true,
// label: {
// textStyle: {
// color: "#FFFFFF"
// },
// },
// itemStyle: {
// areaColor: '#02C6DC'
// }
// },
// label: {
// show: true,
// color: '#fff',
// fontSize: 22
// },
// itemStyle: {
// borderColor: "rgba(2, 198, 220, 1)",
// borderWidth: 2,
// areaColor: "#02bcff29",
// }
// },
// // 重影
// // {
// // type: "map",
// // map: "customMap",
// // zlevel: -1,
// // aspectScale: 1,
// // zoom: 0.65,
// // layoutCenter: ["50%", "51%"],
// // layoutSize: "180%",
// // roam: false,
// // silent: true,
// // itemStyle: {
// // normal: {
// // borderWidth: 1,
// // // borderColor:"rgba(17, 149, 216,0.6)",
// // borderColor: "rgba(2, 198, 220, 0.6)",
// // shadowColor: "rgba(2, 198, 220, 0.6)",
// // shadowOffsetY: 5,
// // shadowBlur: 15,
// // areaColor: "rgba(5,21,35,0.1)",
// // },
// // },
// // },
// ],
geo3D: {
map: "customMap",
shading: 'color',
regionHeight: 8,
show: true,
emphasis: {
show: true,
roam: false,
emphasis: {
show: true,
label: {
textStyle: {
color: "#FFFFFF"
},
},
itemStyle: {
// areaColor: '#fff'
}
},
label: {
normal: {
show: false,
color: '#fff',
fontSize: '20'
}
},
itemStyle: {
normal: {
borderColor: "rgba(2, 198, 220, 1)",
borderWidth: 2,
shadowColor: "rgba(2, 198, 220, 0.1)",
shadowOffsetY: 10,
shadowBlur: 120,
areaColor: "#163c56",
},
}
},
// 重影
{
type: "map",
map: "滨海县",
zlevel: -1,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "51%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
// borderColor:"rgba(17, 149, 216,0.6)",
borderColor: "rgba(2, 198, 220, 0.6)",
shadowColor: "rgba(2, 198, 220, 0.6)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "rgba(5,21,35,0.1)",
},
},
label: {
show: true,
color: '#fff',
fontSize: 22
},
{
type: "map",
map: "滨海县",
zlevel: -2,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "52%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
// borderColor: "rgba(57, 132, 188,0.4)",
borderColor: "rgba(2, 198, 220, 0.4)",
shadowColor: "rgba(2, 198, 220, 0.4)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "transpercent",
},
},
itemStyle: {
color: '#02bcff29',
borderColor: "rgba(2, 198, 220, 1)",
borderWidth: 2
},
{
type: "map",
map: "滨海县",
zlevel: -3,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "53%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
// borderColor: "rgba(11, 43, 97,0.8)",
borderColor: "rgba(2, 198, 220, 0.2)",
shadowColor: "rgba(2, 198, 220, 0.2)",
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: "transpercent",
},
},
viewControl: {
rotateSensitivity: 0,
zoomSensitivity: 0,
panMouseButton: 0,
distance: 250,
alpha:50,
center:[0,-60,0]
}
],
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
z: 3,
zlevel: 3,
// symbol: 'none',
symbolSize: 16,
rippleEffect: {
period: 2,
scale: 4,
brushType: 'fill'
},
label: {
show: true,
formatter: e => {
const name = e.data[3]
const value = e.data[2]
return `{a|${name}}\n{b|${value}}`
},
fontSize: 16,
rich: {
a: {
width: '100%',
color: '#fff',
lineHeight: 20,
fontSize: 16
},
b: {
backgroundColor: {
// image: require('@/assets/images/point.png')
},
color: '#fff',
height: 56,
align: 'center',
width: 50,
fontSize: 16
}
}
},
data: []
}
]
},
}
this.chart.setOption(option)
}
})
},
convertData(data) {
return data.map(v => {
return [this.qqMapTransBMap(v.point[1], v.point[0]).lng, this.qqMapTransBMap(v.point[1], v.point[0]).lat, v.value, v.name]
})
},
qqMapTransBMap(lng, lat) {
const x_pi = 3.14159265358979324 * 3000.0 / 180.0
var x = lng
var y = lat
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
return {
lng: z * Math.cos(theta) + 0.0065,
lat: z * Math.sin(theta) + 0.006
}
},
getData() {
return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(`https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${this.$store.state.user.info.areaId.substr(0, 6)}`)}`,)
getData(url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${this.user.info.areaId?.substring(0, 6)}`) {
return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(url)}`)
}
}
}
@@ -251,5 +164,12 @@ export default {
justify-content: center;
width: 100%;
height: 100%;
padding: 16px;
box-sizing: border-box;
.chart-map {
width: 100%;
height: 100%;
}
}
</style>

View File

@@ -43,8 +43,7 @@
:subType="data.subType"
:data="values">
</AiRanking>
<AiDvMap v-else-if="currentType === 'AiDvMap'" style="width: 100%; height: 100%" :ref="'chart' + index"
:key="`AiDvMap${index}`" :theme="theme"></AiDvMap>
<AiDvMap v-else-if="currentType === 'AiDvMap'" style="width: 100%; height: 100%" :theme="theme" :geo-json="data.geoJson"/>
<ai-map v-else-if="currentType=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1"
:is3dAround="data.is3dAround === '1'"
:map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map"

View File

@@ -5,7 +5,7 @@
</section>
</template>
<script>
import * as echarts from 'echarts'
import {DvCompData} from "../../../packages/bigscreen/designer/config";
export default {

View File

@@ -28,7 +28,6 @@
"bin-ace-editor": "^3.2.0",
"dayjs": "^1.8.35",
"dui": "^2.0.0",
"echarts": "^5.1.2",
"echarts-wordcloud": "^2.0.0",
"hash.js": "^1.1.7",
"html2canvas": "^1.4.1",

View File

@@ -39,6 +39,11 @@
</el-option>
</el-select>
</config-item>
<template v-if="/AiDvMap/.test(config.type)">
<config-item label="地图数据(geoJSON)">
<el-input v-model="config.geoJson" size="mini" clearable placeholder="请输入geoJson的URL地址"/>
</config-item>
</template>
<template v-if="/Chart/.test(config.type)">
<config-item label="图表模板">
<chart-picker v-model="config.config" @input="v=>config.echartOps=$echartTpls[v]"/>

View File

@@ -230,7 +230,7 @@
<script>
import DonutChart from './components/DonutChart'
import PdGrid from './components/PdGrid'
import * as echarts from 'echarts'
export default {
name: 'AppPdDv',

View File

@@ -215,7 +215,7 @@
<script>
import DonutChart from './components/DonutChart'
import PlyGird from './components/PlyGird'
import * as echarts from 'echarts'
export default {
name: 'AppPlyDv',

View File

@@ -201,7 +201,7 @@
<script>
import DonutChart from './components/DonutChart'
import XyGrid from './components/XyGrid'
import * as echarts from 'echarts'
export default {
name: 'AppXyDv',

View File

@@ -201,7 +201,7 @@
<script>
import DonutChart from './components/DonutChart'
import YyxGrid from './components/YyxGrid'
import * as echarts from 'echarts'
export default {
name: 'AppYyxDv',

View File

@@ -80,7 +80,7 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'AiDvMap',

View File

@@ -119,7 +119,7 @@
<script>
import { mapState } from 'vuex'
import * as echarts from 'echarts'
export default {
name: 'Statistics',

View File

@@ -83,7 +83,7 @@
</template>
<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex'
export default {
name: 'Detail',

View File

@@ -458,7 +458,7 @@
<script>
import * as echarts from "echarts";
;
import { mapState } from "vuex";
export default {
name: "SonDetail",

View File

@@ -73,7 +73,7 @@
<script>
import dayjs from "dayjs";
import * as echarts from 'echarts';
;
export default {
name: "gridScoreDetail",

View File

@@ -139,7 +139,7 @@
<script>
import dayjs from 'dayjs'
import { mapState } from "vuex"
import * as echarts from 'echarts';
;
export default {
name: "gridScoreStatistics",
label: "积分统计",

View File

@@ -5,7 +5,7 @@
</template>
<script>
import * as echarts from "echarts";
;
export default {
name: "rightsGraph",

View File

@@ -36,7 +36,7 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: "buildingInfo",

View File

@@ -36,7 +36,7 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: "buildingInfo",

View File

@@ -36,7 +36,7 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: "residentSta",

View File

@@ -3,7 +3,7 @@
</template>
<script>
import * as echarts from "echarts";
;
export default {
props: {

View File

@@ -125,7 +125,7 @@
</template>
<script>
import * as echarts from "echarts";
;
import { mapActions, mapState } from 'vuex';
export default {
name: 'AppAnnounceStatistics',

View File

@@ -74,7 +74,7 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'Detail',

View File

@@ -29,7 +29,7 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'Statistics',

View File

@@ -26,7 +26,7 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'Statistics',

View File

@@ -86,7 +86,7 @@
<script>
import {mapState} from "vuex"
import * as echarts from 'echarts';
;
import AiDetail from "dui/packages/layout/AiDetail.vue";
import AiTitle from "dui/packages/basic/AiTitle.vue";
import "echarts-wordcloud";

View File

@@ -86,7 +86,7 @@
<script>
import {mapState} from "vuex"
import * as echarts from 'echarts';
;
import AiDetail from "dui/packages/layout/AiDetail.vue";
import AiTitle from "dui/packages/basic/AiTitle.vue";
import "echarts-wordcloud";

View File

@@ -88,7 +88,7 @@
<script>
import {mapState} from "vuex"
import * as echarts from 'echarts';
;
import AiDetail from "dui/packages/layout/AiDetail.vue";
import AiTitle from "dui/packages/basic/AiTitle.vue";
import "echarts-wordcloud";

View File

@@ -92,7 +92,7 @@
<script>
import {mapState} from "vuex"
import * as echarts from 'echarts';
;
import AiDetail from "dui/packages/layout/AiDetail.vue";
import AiTitle from "dui/packages/basic/AiTitle.vue";
import "echarts-wordcloud";

View File

@@ -178,7 +178,7 @@
<script>
import { mapState } from 'vuex'
import * as echarts from 'echarts'
export default {
name: 'List',

View File

@@ -137,7 +137,7 @@
</template>
<script>
import * as echarts from "echarts";
;
import { mapActions, mapState } from 'vuex';
export default {
name: 'AppAnnounceStatistics',

View File

@@ -24,7 +24,7 @@
</template>
<script>
import * as echarts from 'echarts';
;
export default {
name: "Statistics",
props: {

View File

@@ -77,7 +77,7 @@
<script>
import dayjs from "dayjs";
import * as echarts from 'echarts';
;
export default {
name: "gridScoreDetail",

View File

@@ -142,7 +142,7 @@
<script>
import { mapState } from "vuex"
import * as echarts from 'echarts';
;
import dayjs from 'dayjs'
export default {
name: "gridScoreStatistics",

View File

@@ -141,7 +141,7 @@
<script>
import {mapState} from "vuex"
import * as echarts from 'echarts';
;
import dayjs from 'dayjs'
import AiDetail from "dui/packages/layout/AiDetail.vue";
import AiTitle from "dui/packages/basic/AiTitle.vue";

View File

@@ -5,7 +5,7 @@
</section>
</template>
<script>
import * as echarts from 'echarts'
import geoJSON from "../assets/fengduGeo.json"
import fdEdge from "../assets/fdEdge.json"

View File

@@ -150,7 +150,7 @@
<script>
import {mapState} from "vuex"
import * as echarts from 'echarts';
;
import dayjs from 'dayjs'
import AiDetail from "dui/packages/layout/AiDetail.vue";
import AiTitle from "dui/packages/basic/AiTitle.vue";

View File

@@ -137,7 +137,7 @@
</template>
<script>
import * as echarts from "echarts";
;
import { mapActions, mapState } from 'vuex';
export default {
name: 'AppAnnounceStatistics',

View File

@@ -141,7 +141,7 @@
<script>
import {mapState} from "vuex"
import * as echarts from 'echarts';
;
import dayjs from 'dayjs'
import AiDetail from "dui/packages/layout/AiDetail.vue";
import AiTitle from "dui/packages/basic/AiTitle.vue";

View File

@@ -95,7 +95,7 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'Statistics',

View File

@@ -53,7 +53,7 @@
<script>
import { mapState } from 'vuex'
import * as echarts from 'echarts'
export default {
name: 'AppNewsStatistics',
label: '新闻统计',

View File

@@ -5,7 +5,7 @@
</template>
<script>
import * as echarts from "echarts";
;
export default {
name: "rightsGraph",

View File

@@ -77,7 +77,7 @@
<script>
import dayjs from "dayjs";
import * as echarts from 'echarts';
;
export default {
name: "gridScoreDetail",

View File

@@ -142,7 +142,7 @@
<script>
import { mapState } from "vuex"
import * as echarts from 'echarts';
;
import dayjs from 'dayjs'
export default {
name: "gridScoreStatistics",

View File

@@ -93,7 +93,7 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'Statistics',

View File

@@ -133,7 +133,7 @@
<script>
import { mapState } from "vuex";
import * as echarts from "echarts";
;
export default {
name: "Statistics",

View File

@@ -24,7 +24,7 @@
</template>
<script>
import * as echarts from 'echarts';
;
export default {
name: "Statistics",
props: {

View File

@@ -57,7 +57,7 @@
<script>
import {mapState} from "vuex";
import * as echarts from "echarts";
;
export default {
name: "staPane",

View File

@@ -458,7 +458,7 @@
<script>
import * as echarts from "echarts";
;
import { mapState } from "vuex";
export default {
name: "SonDetail",

View File

@@ -137,7 +137,7 @@
</template>
<script>
import * as echarts from "echarts";
;
import { mapActions, mapState } from 'vuex';
export default {
name: 'AppAnnounceStatistics',

View File

@@ -114,7 +114,7 @@
<script>
import dayjs from 'dayjs'
import { mapState } from "vuex"
import * as echarts from 'echarts';
;
export default {
name: "AppIntegralStatistics",
label: "积分统计(黔西南)",

View File

@@ -56,7 +56,7 @@
<script>
import dayjs from "dayjs";
import * as echarts from 'echarts';
;
export default {
name: "detail",

View File

@@ -77,7 +77,7 @@
<script>
import dayjs from "dayjs";
import * as echarts from 'echarts';
;
export default {
name: "gridScoreDetail",

View File

@@ -142,7 +142,7 @@
<script>
import { mapState } from "vuex"
import * as echarts from 'echarts';
;
import dayjs from 'dayjs'
export default {
name: "gridScoreStatistics",

View File

@@ -171,7 +171,7 @@
<script>
import { mapState } from 'vuex'
import * as echarts from 'echarts'
export default {
name: 'AppLearningStatistics',
label: '学习统计',

View File

@@ -127,7 +127,7 @@
</template>
<script>
import * as echarts from "echarts";
;
import { mapActions, mapState } from 'vuex';
export default {
name: 'AppAnnounceStatistics',

View File

@@ -127,7 +127,7 @@
</template>
<script>
import * as echarts from "echarts";
;
import { mapActions, mapState } from 'vuex';
export default {
name: 'AppAnnounceResidentStatistics',

View File

@@ -127,7 +127,7 @@
</template>
<script>
import * as echarts from "echarts";
;
import { mapActions, mapState } from 'vuex';
export default {
name: 'AppAnnounceWeChatStatistics',

View File

@@ -36,7 +36,7 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: "buildingInfo",

View File

@@ -77,7 +77,7 @@
<script>
import dayjs from "dayjs";
import * as echarts from 'echarts';
;
export default {
name: "gridScoreDetail",

View File

@@ -142,7 +142,7 @@
<script>
import { mapState } from "vuex"
import * as echarts from 'echarts';
;
import dayjs from 'dayjs'
export default {
name: "gridScoreStatistics",

View File

@@ -141,7 +141,7 @@
<script>
import {mapState} from "vuex"
import * as echarts from 'echarts';
;
import dayjs from 'dayjs'
import AiDetail from "dui/packages/layout/AiDetail.vue";
import AiTitle from "dui/packages/basic/AiTitle.vue";

View File

@@ -57,7 +57,7 @@
<script>
import {mapState} from "vuex";
import * as echarts from 'echarts'
export default {
name: "needsStatistics",

File diff suppressed because one or more lines are too long

45
public/cdn/echarts/echarts@5.5.0.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -11,6 +11,8 @@
<script src="<%= BASE_URL %>cdn/jsoneditor/10.0.2/jsoneditor.min.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/viewerjs/1.11.6/viewer.min.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/avue/2.10.18/avue.min.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/echarts/echarts@5.5.0.min.js" charset="utf-8"></script>
<script src="<%= BASE_URL %>cdn/echarts/echarts-gl@2.0.9.min.js" charset="utf-8"></script>
<title>web端应用库-展示页面</title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>

View File

@@ -7,7 +7,7 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: "AiEchart",

View File

@@ -7,7 +7,7 @@
</template>
<script>
import * as echarts from 'echarts'
export default {
name: "AiEchartV2",