VUE大屏数据面板
import axios from 'axios'
const HTTP_GEOJSON = '/areas_v3/bound/100000_full.json';// 地图数据
export default {
name: 'HelloWorld',
data() {
return {
}
},
props: {
geoData :{
type: Array,
},
geoRegion :{
type: Object,
},
},
mounted(){
this.initGeoEcharts(); // 客户分布模块
},
methods: {
initGeoEcharts() {
axios.get(HTTP_GEOJSON).then(res => {
this.echarts.registerMap('china', res.data)
this.$nextTick(() => {
const map = this.echarts.init(this.$refs.geoEcharts, null, {renderer:'svg'})
const option = {
// 悬浮窗
tooltip: {
trigger: 'item',
backgroundColor: '#0C134B',
borderColor: '#007BE6',
textStyle: { // 提示框浮层的文本样式。
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
},
formatter: function(params) {
return `
<div style="font-size: 16px; color: #10FBFF;">${params.name}</div>
<div>客户数量：${params.value[2]}<br>近半年产值：${params.value[3]}<br>总产值: ${params.value[4]}</div>
`
},
confine: true
},
// 图例
visualMap: {
min: 800,
max: 100000,
top: 100,
left: 20,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
},
textStyle: {
color: this.FONT_COLOR,
},
},
geo: {
map: 'china',
zoom: 1,
roam: 'move',
nameMap: this.geoRegion,
label: {
show: true,
color: 'white',
position: "inside",
fontSize: 8,
rotate: 45
},
itemStyle: { // 所有地图的区域颜色
areaColor: 'rgba(0,60,153,0.8)',
borderColor: '#02c0ff'
},
emphasis: {
itemStyle: {
areaColor: 'rgba(0,60,153,0.5)',
shadowColor: 'rgba(0,0,0,0.8)',
shadowBlur: 5,
shadowOffsetY: 5
}
},
},
// 数据
series: {
type: 'scatter',
coordinateSystem: 'geo',
data: this.geoData,
SymbolSize: 4
}
}
map.setOption(option)
})
})
},
},
}