96 lines
2.5 KiB
Vue
96 lines
2.5 KiB
Vue
|
|
||
|
|
<template>
|
||
|
|
<div id="zddtChart" style="height: 100%;width:100%"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as echarts from 'echarts'
|
||
|
|
import resize from '@/mixins/ems/resize'
|
||
|
|
import china from '@/data/ems/china.json'//中国地图数据
|
||
|
|
import 'echarts/lib/chart/map';
|
||
|
|
echarts.registerMap('china', { geoJSON: china }); //注册可用地图
|
||
|
|
|
||
|
|
export default {
|
||
|
|
mixins: [resize],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
chart: null,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.initChart()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
if (!this.chart) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.chart.dispose()
|
||
|
|
this.chart = null
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initChart() {
|
||
|
|
// ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
|
||
|
|
this.chart = echarts.init(document.querySelector('#zddtChart'))
|
||
|
|
},
|
||
|
|
setOption(data) {
|
||
|
|
this.chart.setOption({
|
||
|
|
color:['#FFBD00'],
|
||
|
|
backgroundColor: 'transparent', //背景色
|
||
|
|
geo: { //地理坐标系组件 地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制
|
||
|
|
map: 'china', //地图类型 这儿展示的是中国地图
|
||
|
|
aspectScale: 0.85,
|
||
|
|
selectedMode: "single",// 开启单选
|
||
|
|
label: {
|
||
|
|
show: true, //是否显示标签 此处指是否显示地图上的地区名字
|
||
|
|
color: '#ffffff',
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
roam: true, //是否开启鼠标缩放和平移漫游
|
||
|
|
itemStyle: {
|
||
|
|
areaColor: "#03365b",
|
||
|
|
borderColor: "#4bf3f9",
|
||
|
|
shadowColor: '#03365b', //阴影颜色
|
||
|
|
shadowOffsetX: 0, //阴影偏移量
|
||
|
|
shadowOffsetY: 10, //阴影偏移量
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
color: '#ffffff',
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
areaColor: "#0f5d9d",
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: "effectScatter",
|
||
|
|
coordinateSystem: "geo",
|
||
|
|
showEffectOn: "render",
|
||
|
|
data,
|
||
|
|
rippleEffect: {
|
||
|
|
brushType: "stroke",
|
||
|
|
scale: 5,
|
||
|
|
period: 2, // 秒数
|
||
|
|
},
|
||
|
|
symbolSize: 12,
|
||
|
|
clickable: false,
|
||
|
|
zlevel: 1,
|
||
|
|
label: {
|
||
|
|
formatter: "{b}",
|
||
|
|
position: "right",
|
||
|
|
show: true,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|