|
@@ -6,26 +6,26 @@
|
|
|
:options="options"
|
|
|
height="360px"
|
|
|
width="330px"
|
|
|
- ></Echart>
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Echart from '@/common/echart';
|
|
|
+import Echart from '@/common/echart'
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- options: {},
|
|
|
- };
|
|
|
- },
|
|
|
components: {
|
|
|
- Echart,
|
|
|
+ Echart
|
|
|
},
|
|
|
props: {
|
|
|
cdata: {
|
|
|
type: Array,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
+ default: () => []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ options: {}
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
cdata: {
|
|
@@ -40,62 +40,62 @@ export default {
|
|
|
莆田市: [119.007558, 25.591011, 20],
|
|
|
三明市: [117.435001, 26.465444, 20],
|
|
|
南平市: [118.178459, 27.535627, 20],
|
|
|
- 宁德市: [119.527082, 27.15924, 20],
|
|
|
- };
|
|
|
- let seriesData = [
|
|
|
+ 宁德市: [119.527082, 27.15924, 20]
|
|
|
+ }
|
|
|
+ const seriesData = [
|
|
|
{
|
|
|
- name: '厦门市',
|
|
|
+ name: '厦门市'
|
|
|
},
|
|
|
{
|
|
|
- name: '福州市',
|
|
|
+ name: '福州市'
|
|
|
},
|
|
|
{
|
|
|
- name: '泉州市',
|
|
|
+ name: '泉州市'
|
|
|
},
|
|
|
{
|
|
|
- name: '漳州市',
|
|
|
+ name: '漳州市'
|
|
|
},
|
|
|
{
|
|
|
- name: '龙岩市',
|
|
|
+ name: '龙岩市'
|
|
|
},
|
|
|
{
|
|
|
- name: '莆田市',
|
|
|
+ name: '莆田市'
|
|
|
},
|
|
|
{
|
|
|
- name: '三明市',
|
|
|
+ name: '三明市'
|
|
|
},
|
|
|
{
|
|
|
- name: '南平市',
|
|
|
+ name: '南平市'
|
|
|
},
|
|
|
{
|
|
|
- name: '宁德市',
|
|
|
- },
|
|
|
- ];
|
|
|
- let convertData = function (data) {
|
|
|
- let scatterData = [];
|
|
|
+ name: '宁德市'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ const convertData = function(data) {
|
|
|
+ const scatterData = []
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
- var geoCoord = geoCoordMap[data[i].name];
|
|
|
+ var geoCoord = geoCoordMap[data[i].name]
|
|
|
if (geoCoord) {
|
|
|
scatterData.push({
|
|
|
name: data[i].name,
|
|
|
- value: geoCoord.concat(data[i].value),
|
|
|
- });
|
|
|
+ value: geoCoord.concat(data[i].value)
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
- return scatterData;
|
|
|
- };
|
|
|
+ return scatterData
|
|
|
+ }
|
|
|
this.options = {
|
|
|
showLegendSymbol: true,
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
textStyle: {
|
|
|
fontSize: 14,
|
|
|
- lineHeight: 22,
|
|
|
+ lineHeight: 22
|
|
|
},
|
|
|
position: point => {
|
|
|
// 固定在顶部
|
|
|
- return [point[0] + 50, point[1] - 20];
|
|
|
- },
|
|
|
+ return [point[0] + 50, point[1] - 20]
|
|
|
+ }
|
|
|
// 如果需要自定义 tooltip样式,需要使用formatter
|
|
|
/*
|
|
|
formatter: params => {
|
|
@@ -110,13 +110,13 @@ export default {
|
|
|
seriesIndex: 0,
|
|
|
// 颜色
|
|
|
inRange: {
|
|
|
- color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
|
|
|
- },
|
|
|
+ color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)']
|
|
|
+ }
|
|
|
},
|
|
|
// 底部背景
|
|
|
geo: {
|
|
|
show: true,
|
|
|
- aspectScale: 0.85, //长宽比
|
|
|
+ aspectScale: 0.85, // 长宽比
|
|
|
zoom: 1.2,
|
|
|
top: '10%',
|
|
|
left: '16%',
|
|
@@ -127,18 +127,18 @@ export default {
|
|
|
areaColor: 'rgba(0,0,0,0)',
|
|
|
shadowColor: 'rgba(7,114,204, .8)',
|
|
|
shadowOffsetX: 5,
|
|
|
- shadowOffsetY: 5,
|
|
|
+ shadowOffsetY: 5
|
|
|
},
|
|
|
emphasis: {
|
|
|
- areaColor: '#00aeef',
|
|
|
- },
|
|
|
- },
|
|
|
+ areaColor: '#00aeef'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '相关指数',
|
|
|
type: 'map',
|
|
|
- aspectScale: 0.85, //长宽比
|
|
|
+ aspectScale: 0.85, // 长宽比
|
|
|
zoom: 1.2,
|
|
|
mapType: '福建', // 自定义扩展图表类型
|
|
|
top: '10%',
|
|
@@ -150,15 +150,15 @@ export default {
|
|
|
borderColor: 'rgba(0,242,252,.3)',
|
|
|
borderWidth: 1,
|
|
|
shadowBlur: 7,
|
|
|
- shadowColor: '#00f2fc',
|
|
|
+ shadowColor: '#00f2fc'
|
|
|
},
|
|
|
emphasis: {
|
|
|
areaColor: '#4f7fff',
|
|
|
borderColor: 'rgba(0,242,252,.6)',
|
|
|
borderWidth: 2,
|
|
|
shadowBlur: 10,
|
|
|
- shadowColor: '#00f2fc',
|
|
|
- },
|
|
|
+ shadowColor: '#00f2fc'
|
|
|
+ }
|
|
|
},
|
|
|
label: {
|
|
|
formatter: params => `${params.name}`,
|
|
@@ -166,15 +166,15 @@ export default {
|
|
|
position: 'insideRight',
|
|
|
textStyle: {
|
|
|
fontSize: 14,
|
|
|
- color: '#efefef',
|
|
|
+ color: '#efefef'
|
|
|
},
|
|
|
emphasis: {
|
|
|
textStyle: {
|
|
|
- color: '#fff',
|
|
|
- },
|
|
|
- },
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- data: newData,
|
|
|
+ data: newData
|
|
|
},
|
|
|
{
|
|
|
type: 'effectScatter',
|
|
@@ -186,105 +186,105 @@ export default {
|
|
|
rippleEffect: {
|
|
|
period: 4,
|
|
|
scale: 2.5,
|
|
|
- brushType: 'stroke',
|
|
|
+ brushType: 'stroke'
|
|
|
},
|
|
|
zlevel: 1,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#99FBFE',
|
|
|
shadowBlur: 5,
|
|
|
- shadowColor: '#fff',
|
|
|
- },
|
|
|
+ shadowColor: '#fff'
|
|
|
+ }
|
|
|
},
|
|
|
- data: convertData(seriesData),
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
+ data: convertData(seriesData)
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
// 重新选择区域
|
|
|
- this.handleMapRandomSelect();
|
|
|
+ this.handleMapRandomSelect()
|
|
|
},
|
|
|
immediate: true,
|
|
|
- deep: true,
|
|
|
- },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
// 开启定时器
|
|
|
startInterval() {
|
|
|
- const _self = this;
|
|
|
+ const _self = this
|
|
|
// 应通过接口获取配置时间,暂时写死5s
|
|
|
- const time = 2000;
|
|
|
+ const time = 2000
|
|
|
if (this.intervalId !== null) {
|
|
|
- clearInterval(this.intervalId);
|
|
|
+ clearInterval(this.intervalId)
|
|
|
}
|
|
|
this.intervalId = setInterval(() => {
|
|
|
- _self.reSelectMapRandomArea();
|
|
|
- }, time);
|
|
|
+ _self.reSelectMapRandomArea()
|
|
|
+ }, time)
|
|
|
},
|
|
|
// 重新随机选中地图区域
|
|
|
reSelectMapRandomArea() {
|
|
|
- const length = 9;
|
|
|
+ const length = 9
|
|
|
this.$nextTick(() => {
|
|
|
try {
|
|
|
- const map = this.$refs.centreLeft2ChartRef.chart;
|
|
|
- let index = Math.floor(Math.random() * length);
|
|
|
+ const map = this.$refs.centreLeft2ChartRef.chart
|
|
|
+ let index = Math.floor(Math.random() * length)
|
|
|
while (index === this.preSelectMapIndex || index >= length) {
|
|
|
- index = Math.floor(Math.random() * length);
|
|
|
+ index = Math.floor(Math.random() * length)
|
|
|
}
|
|
|
map.dispatchAction({
|
|
|
type: 'mapUnSelect',
|
|
|
seriesIndex: 0,
|
|
|
- dataIndex: this.preSelectMapIndex,
|
|
|
- });
|
|
|
+ dataIndex: this.preSelectMapIndex
|
|
|
+ })
|
|
|
map.dispatchAction({
|
|
|
type: 'showTip',
|
|
|
seriesIndex: 0,
|
|
|
- dataIndex: index,
|
|
|
- });
|
|
|
+ dataIndex: index
|
|
|
+ })
|
|
|
map.dispatchAction({
|
|
|
type: 'mapSelect',
|
|
|
seriesIndex: 0,
|
|
|
- dataIndex: index,
|
|
|
- });
|
|
|
- this.preSelectMapIndex = index;
|
|
|
+ dataIndex: index
|
|
|
+ })
|
|
|
+ this.preSelectMapIndex = index
|
|
|
} catch (error) {
|
|
|
console.log(error)
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
},
|
|
|
handleMapRandomSelect() {
|
|
|
this.$nextTick(() => {
|
|
|
try {
|
|
|
- const map = this.$refs.centreLeft2ChartRef.chart;
|
|
|
- const _self = this;
|
|
|
+ const map = this.$refs.centreLeft2ChartRef.chart
|
|
|
+ const _self = this
|
|
|
setTimeout(() => {
|
|
|
- _self.reSelectMapRandomArea();
|
|
|
- }, 0);
|
|
|
+ _self.reSelectMapRandomArea()
|
|
|
+ }, 0)
|
|
|
// 移入区域,清除定时器、取消之前选中并选中当前
|
|
|
- map.on('mouseover', function (params) {
|
|
|
- clearInterval(_self.intervalId);
|
|
|
+ map.on('mouseover', function(params) {
|
|
|
+ clearInterval(_self.intervalId)
|
|
|
map.dispatchAction({
|
|
|
type: 'mapUnSelect',
|
|
|
seriesIndex: 0,
|
|
|
- dataIndex: _self.preSelectMapIndex,
|
|
|
- });
|
|
|
+ dataIndex: _self.preSelectMapIndex
|
|
|
+ })
|
|
|
map.dispatchAction({
|
|
|
type: 'mapSelect',
|
|
|
seriesIndex: 0,
|
|
|
- dataIndex: params.dataIndex,
|
|
|
- });
|
|
|
- _self.preSelectMapIndex = params.dataIndex;
|
|
|
- });
|
|
|
+ dataIndex: params.dataIndex
|
|
|
+ })
|
|
|
+ _self.preSelectMapIndex = params.dataIndex
|
|
|
+ })
|
|
|
// 移出区域重新随机选中地图区域,并开启定时器
|
|
|
- map.on('globalout', function () {
|
|
|
- _self.reSelectMapRandomArea();
|
|
|
- _self.startInterval();
|
|
|
- });
|
|
|
- this.startInterval();
|
|
|
+ map.on('globalout', function() {
|
|
|
+ _self.reSelectMapRandomArea()
|
|
|
+ _self.startInterval()
|
|
|
+ })
|
|
|
+ this.startInterval()
|
|
|
} catch (error) {
|
|
|
console.log(error)
|
|
|
}
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|