|
|
@ -33,7 +33,7 @@ |
|
|
<script> |
|
|
<script> |
|
|
import mapJson from '@/assets/json/qy.json' |
|
|
import mapJson from '@/assets/json/qy.json' |
|
|
import libJson from '@/assets/json/lib2.json' |
|
|
import libJson from '@/assets/json/lib2.json' |
|
|
import libJsonData from '@/assets/json/lib2.json' |
|
|
|
|
|
|
|
|
import libJsonData from '@/assets/json/lib.json' |
|
|
import { debounce } from 'lodash' // js工具类,按需加载 |
|
|
import { debounce } from 'lodash' // js工具类,按需加载 |
|
|
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
|
|
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
|
|
import 'swiper/dist/css/swiper.css' |
|
|
import 'swiper/dist/css/swiper.css' |
|
|
@ -76,7 +76,8 @@ export default { |
|
|
swiperKey: 1, |
|
|
swiperKey: 1, |
|
|
currentIndex: 0, |
|
|
currentIndex: 0, |
|
|
displayedImages: [], |
|
|
displayedImages: [], |
|
|
swiperOption: null |
|
|
|
|
|
|
|
|
swiperOption: null, |
|
|
|
|
|
seriesData: [] |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
@ -94,7 +95,7 @@ export default { |
|
|
mounted() { |
|
|
mounted() { |
|
|
this.count = 0 |
|
|
this.count = 0 |
|
|
this.initChart() // 初始化 |
|
|
this.initChart() // 初始化 |
|
|
// this.updateChart() // 更新数据，散点轮播显示 |
|
|
|
|
|
|
|
|
this.updateChart() // 更新数据，散点轮播显示 |
|
|
this.mouseMove() // 鼠标移入移出效果 |
|
|
this.mouseMove() // 鼠标移入移出效果 |
|
|
window.addEventListener('resize', debounce(this.resize, 2000)) // 使用事件捕获，由外层向内 |
|
|
window.addEventListener('resize', debounce(this.resize, 2000)) // 使用事件捕获，由外层向内 |
|
|
}, |
|
|
}, |
|
|
@ -104,32 +105,32 @@ export default { |
|
|
this.myChart = this.$echarts.init(this.$refs.chart) // echarts容器实例化 |
|
|
this.myChart = this.$echarts.init(this.$refs.chart) // echarts容器实例化 |
|
|
|
|
|
|
|
|
var XAData = [ |
|
|
var XAData = [ |
|
|
[{ name: '陶铸图书馆' }, { name: '龙山街道分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '黎家坪分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '大村甸分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '邵家岭自助馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '下马渡分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '复兴路自助馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '七里桥分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '少儿馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '茅竹镇分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '观音滩镇分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '凯俊盛科城分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '进宝塘镇分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '三口塘镇分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '肖家镇分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '潘市镇分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '大忠桥镇分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '浯溪街道分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '长虹街道分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '白水镇分馆', value: 100 }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '白竹湖自助馆', value: 100 }] |
|
|
|
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '陶铸图书馆', value: '陶铸' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '龙山街道分馆', value: '龙山街道' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '黎家坪分馆', value: '黎家坪' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '大村甸分馆', value: '大村甸' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '邵家岭自助馆', value: '邵家岭' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '下马渡分馆', value: '下马渡' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '复兴路自助馆', value: '复兴路' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '七里桥分馆', value: '七里桥' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '少儿馆', value: '少儿馆' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '茅竹镇分馆', value: '祁阳县茅竹镇' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '观音滩镇分馆', value: '观音滩镇' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '凯俊盛科城分馆', value: '凯俊盛科城' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '进宝塘镇分馆', value: '进宝塘镇' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '三口塘镇分馆', value: '三口塘镇' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '肖家镇分馆', value: '肖家镇' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '潘市镇分馆', value: '潘市镇' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '大忠桥镇分馆', value: '大忠桥镇' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '浯溪街道分馆', value: '浯溪街道' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '长虹街道分馆', value: '长虹街道' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '白水镇分馆', value: '白水镇' }], |
|
|
|
|
|
[{ name: '陶铸图书馆' }, { name: '白竹湖自助馆', value: '白竹湖' }] |
|
|
] |
|
|
] |
|
|
var convertData = function(data) { |
|
|
var convertData = function(data) { |
|
|
var res = [] |
|
|
var res = [] |
|
|
for (var i = 0; i < data.length; i++) { |
|
|
for (var i = 0; i < data.length; i++) { |
|
|
var dataItem = data[i] |
|
|
var dataItem = data[i] |
|
|
console.log(dataItem) |
|
|
|
|
|
var fromCoord = libJson[dataItem[0].name] |
|
|
var fromCoord = libJson[dataItem[0].name] |
|
|
var toCoord = libJson[dataItem[1].name] |
|
|
var toCoord = libJson[dataItem[1].name] |
|
|
if (fromCoord && toCoord) { |
|
|
if (fromCoord && toCoord) { |
|
|
@ -149,7 +150,45 @@ export default { |
|
|
].forEach(function(item, i) { |
|
|
].forEach(function(item, i) { |
|
|
series.push( |
|
|
series.push( |
|
|
{ |
|
|
{ |
|
|
name: item[0] + ' Top3', |
|
|
|
|
|
|
|
|
name: item[0], |
|
|
|
|
|
type: 'effectScatter', |
|
|
|
|
|
symbolSize: [8, 4], |
|
|
|
|
|
coordinateSystem: 'geo', |
|
|
|
|
|
zlevel: 2, |
|
|
|
|
|
rippleEffect: { |
|
|
|
|
|
brushType: 'stroke', |
|
|
|
|
|
color: '#9ffcff', |
|
|
|
|
|
period: 9, |
|
|
|
|
|
scale: 3 |
|
|
|
|
|
}, |
|
|
|
|
|
label: { |
|
|
|
|
|
normal: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
position: 'right', |
|
|
|
|
|
formatter: '' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
normal: { |
|
|
|
|
|
color: '#fff' |
|
|
|
|
|
}, |
|
|
|
|
|
emphasis: { |
|
|
|
|
|
areaColor: '#2B91B7' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
show: true |
|
|
|
|
|
}, |
|
|
|
|
|
data: item[1].map(function(dataItem) { |
|
|
|
|
|
return { |
|
|
|
|
|
name: dataItem[1].name, |
|
|
|
|
|
value: libJson[dataItem[1].name].concat([dataItem[1].value]), |
|
|
|
|
|
place: dataItem[1].value |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
name: item[0], |
|
|
type: 'lines', |
|
|
type: 'lines', |
|
|
zlevel: 1, |
|
|
zlevel: 1, |
|
|
effect: { |
|
|
effect: { |
|
|
@ -166,10 +205,13 @@ export default { |
|
|
curveness: 0.2 |
|
|
curveness: 0.2 |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
show: false |
|
|
|
|
|
}, |
|
|
data: convertData(item[1]) |
|
|
data: convertData(item[1]) |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
name: item[0] + ' Top3', |
|
|
|
|
|
|
|
|
name: item[0], |
|
|
type: 'lines', |
|
|
type: 'lines', |
|
|
zlevel: 2, |
|
|
zlevel: 2, |
|
|
symbol: ['none', 'arrow'], |
|
|
symbol: ['none', 'arrow'], |
|
|
@ -189,54 +231,38 @@ export default { |
|
|
curveness: 0.2 |
|
|
curveness: 0.2 |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
data: convertData(item[1]) |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
name: item[0] + ' Top3', |
|
|
|
|
|
type: 'effectScatter', |
|
|
|
|
|
symbolSize: [8, 4], |
|
|
|
|
|
coordinateSystem: 'geo', |
|
|
|
|
|
zlevel: 2, |
|
|
|
|
|
rippleEffect: { |
|
|
|
|
|
brushType: 'stroke', |
|
|
|
|
|
color: '#9ffcff', |
|
|
|
|
|
period: 9, |
|
|
|
|
|
scale: 3 |
|
|
|
|
|
}, |
|
|
|
|
|
label: { |
|
|
|
|
|
normal: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
position: 'right', |
|
|
|
|
|
formatter: '' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
normal: { |
|
|
|
|
|
color: '#fff' |
|
|
|
|
|
}, |
|
|
|
|
|
emphasis: { |
|
|
|
|
|
areaColor: '#2B91B7' |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
tooltip: { |
|
|
|
|
|
show: false |
|
|
}, |
|
|
}, |
|
|
data: item[1].map(function(dataItem) { |
|
|
|
|
|
return { |
|
|
|
|
|
name: dataItem[1].name, |
|
|
|
|
|
value: libJson[dataItem[1].name].concat([dataItem[1].value]) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
data: convertData(item[1]) |
|
|
} |
|
|
} |
|
|
) |
|
|
) |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
this.seriesData = series |
|
|
const initOption = { |
|
|
const initOption = { |
|
|
// {a}<br/> |
|
|
// {a}<br/> |
|
|
// 提示框 |
|
|
// 提示框 |
|
|
tooltip: { |
|
|
tooltip: { |
|
|
|
|
|
show: true, |
|
|
trigger: 'item', |
|
|
trigger: 'item', |
|
|
formatter: function(params, ticket, callback) { |
|
|
|
|
|
|
|
|
enterable: 'click', |
|
|
|
|
|
triggerOn: 'click', |
|
|
|
|
|
hideDelay: 100, |
|
|
|
|
|
position: function(point, params, dom, rect, size) { |
|
|
|
|
|
console.log('point', point) |
|
|
console.log('params', params) |
|
|
console.log('params', params) |
|
|
|
|
|
console.log('dom', dom) |
|
|
|
|
|
console.log('rect', rect) |
|
|
|
|
|
console.log('size', size) |
|
|
|
|
|
return [point[0] - 100, point[1] - 100] |
|
|
|
|
|
}, |
|
|
|
|
|
formatter: (params, ticket, callback) => { |
|
|
if (params.seriesType === 'effectScatter') { |
|
|
if (params.seriesType === 'effectScatter') { |
|
|
return '线路：' + params.data.name + '' + params.data.value[2] |
|
|
|
|
|
|
|
|
return `<div style="padding:5px; "> |
|
|
|
|
|
<div class=title>${params.data.name}</div> |
|
|
|
|
|
<div>地址：${params.data.place}</div> |
|
|
|
|
|
</div>` |
|
|
} else if (params.seriesType === 'lines') { |
|
|
} else if (params.seriesType === 'lines') { |
|
|
return ( |
|
|
return ( |
|
|
params.data.fromName + |
|
|
params.data.fromName + |
|
|
@ -279,59 +305,16 @@ export default { |
|
|
// </div>` |
|
|
// </div>` |
|
|
// } |
|
|
// } |
|
|
}, |
|
|
}, |
|
|
// visualMap: { |
|
|
|
|
|
// show: false, |
|
|
|
|
|
// type: 'continuous', |
|
|
|
|
|
// showLabel: true, |
|
|
|
|
|
// left: '10', |
|
|
|
|
|
// min: 0, |
|
|
|
|
|
// inRange: { |
|
|
|
|
|
// color: ['#0B3B79', '#01215c'] |
|
|
|
|
|
// } |
|
|
|
|
|
// }, |
|
|
|
|
|
// 设置geo坐标系 |
|
|
// 设置geo坐标系 |
|
|
geo: [ |
|
|
geo: [ |
|
|
// { |
|
|
|
|
|
// map: 'qiyang', |
|
|
|
|
|
// itemStyle: { |
|
|
|
|
|
// normal: { |
|
|
|
|
|
// // areaColor: '#01215c', |
|
|
|
|
|
// // borderColor: '#9ffcff', |
|
|
|
|
|
// // borderWidth: 3, |
|
|
|
|
|
// // shadowColor: 'rgba(0,54,255, 1)', |
|
|
|
|
|
// // shadowBlur: 20, |
|
|
|
|
|
// // shadowOffsetX: -10, |
|
|
|
|
|
// // shadowOffsetY: 10 |
|
|
|
|
|
// areaColor: '#004b75', //* ***重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样 |
|
|
|
|
|
// borderColor: '#195175', |
|
|
|
|
|
// borderWidth: 2, |
|
|
|
|
|
// shadowColor: '#0f4c74', |
|
|
|
|
|
// shadowOffsetX: 0, |
|
|
|
|
|
// shadowOffsetY: 4, |
|
|
|
|
|
// shadowBlur: 10 |
|
|
|
|
|
// }, |
|
|
|
|
|
// emphasis: { |
|
|
|
|
|
// areaColor: '#2B91B7' |
|
|
|
|
|
// } |
|
|
|
|
|
// }, |
|
|
|
|
|
// emphasis: { |
|
|
|
|
|
// areaColor: '#01215c' |
|
|
|
|
|
// }, |
|
|
|
|
|
// label: { |
|
|
|
|
|
// emphasis: { |
|
|
|
|
|
// show: true, |
|
|
|
|
|
// color: '#fff' |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
// }, |
|
|
|
|
|
{ |
|
|
{ |
|
|
map: 'qiyang', |
|
|
map: 'qiyang', |
|
|
aspectScale: 0.85, |
|
|
|
|
|
|
|
|
aspectScale: 1, |
|
|
zoom: 1.2, |
|
|
zoom: 1.2, |
|
|
top: '9%', //* **********重点**********距离顶部的位置，每层向下一个百分比 |
|
|
|
|
|
|
|
|
top: '8%', //* **********重点**********距离顶部的位置，每层向下一个百分比 |
|
|
left: '11%', |
|
|
left: '11%', |
|
|
roam: false, |
|
|
roam: false, |
|
|
z: 4, //* ********重点*********可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了 |
|
|
|
|
|
|
|
|
z: 5, //* ********重点*********可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了 |
|
|
itemStyle: { |
|
|
itemStyle: { |
|
|
areaColor: 'rgba(17,57,118,1)', //* ***重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样 |
|
|
areaColor: 'rgba(17,57,118,1)', //* ***重点****每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样 |
|
|
borderColor: '#9ffcff', |
|
|
borderColor: '#9ffcff', |
|
|
@ -339,28 +322,68 @@ export default { |
|
|
shadowColor: '#0f4c74', |
|
|
shadowColor: '#0f4c74', |
|
|
shadowOffsetX: 0, |
|
|
shadowOffsetX: 0, |
|
|
shadowOffsetY: 4, |
|
|
shadowOffsetY: 4, |
|
|
shadowBlur: 10 |
|
|
|
|
|
|
|
|
shadowBlur: 10, |
|
|
|
|
|
emphasis: { // 地图悬停高亮样式 |
|
|
|
|
|
areaColor: 'rgba(17,57,118,1)' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
emphasis: { |
|
|
|
|
|
areaColor: '#01215c' |
|
|
|
|
|
}, |
|
|
|
|
|
label: { |
|
|
|
|
|
emphasis: { |
|
|
|
|
|
show: true, |
|
|
|
|
|
color: '#fff' |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
tooltip: { |
|
|
tooltip: { |
|
|
show: true |
|
|
show: true |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
|
map: 'qiyang', |
|
|
|
|
|
aspectScale: 1, |
|
|
|
|
|
zoom: 1.2, |
|
|
|
|
|
top: '9%', // 根据自己需要来设置 |
|
|
|
|
|
left: '11%', |
|
|
|
|
|
roam: false, |
|
|
|
|
|
z: 4, // 变小，也就是被压在下面 |
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
areaColor: 'rgba(7,107,151,1)', // 记得改颜色 |
|
|
|
|
|
borderColor: '#195175', |
|
|
|
|
|
borderWidth: 2, |
|
|
|
|
|
shadowColor: '#0f4c74', |
|
|
|
|
|
shadowOffsetX: 0, |
|
|
|
|
|
shadowOffsetY: 4, |
|
|
|
|
|
shadowBlur: 10, |
|
|
|
|
|
emphasis: { // 地图悬停高亮样式 |
|
|
|
|
|
areaColor: 'rgba(7,107,151,1)' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
show: false |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
{ |
|
|
{ |
|
|
map: 'qiyang', |
|
|
map: 'qiyang', |
|
|
aspectScale: 0.85, |
|
|
|
|
|
|
|
|
aspectScale: 1, |
|
|
zoom: 1.2, |
|
|
zoom: 1.2, |
|
|
top: '10%', // 根据自己需要来设置 |
|
|
top: '10%', // 根据自己需要来设置 |
|
|
left: '11%', |
|
|
left: '11%', |
|
|
roam: false, |
|
|
roam: false, |
|
|
z: 3, // 变小，也就是被压在下面 |
|
|
z: 3, // 变小，也就是被压在下面 |
|
|
itemStyle: { |
|
|
itemStyle: { |
|
|
areaColor: 'rgba(7,107,151,1)', // 记得改颜色 |
|
|
|
|
|
|
|
|
areaColor: 'rgba(16,69,110,1)', // 记得改颜色 |
|
|
borderColor: '#195175', |
|
|
borderColor: '#195175', |
|
|
borderWidth: 2, |
|
|
borderWidth: 2, |
|
|
shadowColor: '#0f4c74', |
|
|
shadowColor: '#0f4c74', |
|
|
shadowOffsetX: 0, |
|
|
shadowOffsetX: 0, |
|
|
shadowOffsetY: 4, |
|
|
shadowOffsetY: 4, |
|
|
shadowBlur: 10 |
|
|
|
|
|
|
|
|
shadowBlur: 10, |
|
|
|
|
|
emphasis: { // 地图悬停高亮样式 |
|
|
|
|
|
areaColor: 'rgba(16,69,110,1)' |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
tooltip: { |
|
|
tooltip: { |
|
|
show: false |
|
|
show: false |
|
|
@ -368,20 +391,23 @@ export default { |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
map: 'qiyang', |
|
|
map: 'qiyang', |
|
|
aspectScale: 0.85, |
|
|
|
|
|
|
|
|
aspectScale: 1, |
|
|
zoom: 1.2, |
|
|
zoom: 1.2, |
|
|
top: '11%', // 根据自己需要来设置 |
|
|
top: '11%', // 根据自己需要来设置 |
|
|
left: '11%', |
|
|
left: '11%', |
|
|
roam: false, |
|
|
roam: false, |
|
|
z: 2, // 变小，也就是被压在下面 |
|
|
z: 2, // 变小，也就是被压在下面 |
|
|
itemStyle: { |
|
|
itemStyle: { |
|
|
areaColor: 'rgba(16,69,110,1)', // 记得改颜色 |
|
|
|
|
|
|
|
|
areaColor: 'rgba(0,0,0,1)', // 记得改颜色 |
|
|
borderColor: '#195175', |
|
|
borderColor: '#195175', |
|
|
borderWidth: 2, |
|
|
borderWidth: 2, |
|
|
shadowColor: '#0f4c74', |
|
|
shadowColor: '#0f4c74', |
|
|
shadowOffsetX: 0, |
|
|
shadowOffsetX: 0, |
|
|
shadowOffsetY: 4, |
|
|
shadowOffsetY: 4, |
|
|
shadowBlur: 10 |
|
|
|
|
|
|
|
|
shadowBlur: 10, |
|
|
|
|
|
emphasis: { // 地图悬停高亮样式 |
|
|
|
|
|
areaColor: 'rgba(0,0,0,1)' |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
tooltip: { |
|
|
tooltip: { |
|
|
show: false |
|
|
show: false |
|
|
@ -389,20 +415,23 @@ export default { |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
map: 'qiyang', |
|
|
map: 'qiyang', |
|
|
aspectScale: 0.85, |
|
|
|
|
|
|
|
|
aspectScale: 1, |
|
|
zoom: 1.2, |
|
|
zoom: 1.2, |
|
|
top: '12%', // 根据自己需要来设置 |
|
|
top: '12%', // 根据自己需要来设置 |
|
|
left: '11%', |
|
|
left: '11%', |
|
|
roam: false, |
|
|
roam: false, |
|
|
z: 1, // 变小，也就是被压在下面 |
|
|
z: 1, // 变小，也就是被压在下面 |
|
|
itemStyle: { |
|
|
itemStyle: { |
|
|
areaColor: 'rgba(0,0,0,1)', // 记得改颜色 |
|
|
|
|
|
borderColor: '#195175', |
|
|
|
|
|
|
|
|
areaColor: 'rgba(0,0,0,.6)', // 记得改颜色 |
|
|
|
|
|
borderColor: 'rgba(0,0,0,.6)', |
|
|
borderWidth: 2, |
|
|
borderWidth: 2, |
|
|
shadowColor: '#0f4c74', |
|
|
|
|
|
|
|
|
shadowColor: 'rgba(0,0,0,.6)', |
|
|
shadowOffsetX: 0, |
|
|
shadowOffsetX: 0, |
|
|
shadowOffsetY: 4, |
|
|
shadowOffsetY: 4, |
|
|
shadowBlur: 10 |
|
|
|
|
|
|
|
|
shadowBlur: 10, |
|
|
|
|
|
emphasis: { // 地图悬停高亮样式 |
|
|
|
|
|
areaColor: 'rgba(0,0,0,.6)' |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
tooltip: { |
|
|
tooltip: { |
|
|
show: false |
|
|
show: false |
|
|
@ -415,17 +444,17 @@ export default { |
|
|
}, |
|
|
}, |
|
|
updateChart() { |
|
|
updateChart() { |
|
|
// 地图数据 |
|
|
// 地图数据 |
|
|
const mapData = mapJson.features.map((item) => { |
|
|
|
|
|
return { |
|
|
|
|
|
name: item.properties.name, |
|
|
|
|
|
value: Math.round(Math.random() * 100), |
|
|
|
|
|
centroid: item.properties.centroid, |
|
|
|
|
|
adcode: item.properties.adcode |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
// const mapData = mapJson.features.map((item) => { |
|
|
|
|
|
// return { |
|
|
|
|
|
// name: item.properties.name, |
|
|
|
|
|
// value: Math.round(Math.random() * 100), |
|
|
|
|
|
// centroid: item.properties.centroid, |
|
|
|
|
|
// adcode: item.properties.adcode |
|
|
|
|
|
// } |
|
|
|
|
|
// }) |
|
|
|
|
|
|
|
|
// 散点数据 |
|
|
// 散点数据 |
|
|
const scatterData = libJsonData |
|
|
|
|
|
|
|
|
// const scatterData = libJsonData |
|
|
// const scatterData = mapData.map((item) => { |
|
|
// const scatterData = mapData.map((item) => { |
|
|
// return { |
|
|
// return { |
|
|
// name: item.name, |
|
|
// name: item.name, |
|
|
@ -439,19 +468,23 @@ export default { |
|
|
// } |
|
|
// } |
|
|
// }) |
|
|
// }) |
|
|
|
|
|
|
|
|
const updateOption = { |
|
|
|
|
|
series: [ |
|
|
|
|
|
{ |
|
|
|
|
|
data: mapData // type: 'map' |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
data: scatterData // type: 'effectScatter' |
|
|
|
|
|
} |
|
|
|
|
|
] |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// const updateOption = { |
|
|
|
|
|
// series: [ |
|
|
|
|
|
// { |
|
|
|
|
|
// data: mapData // type: 'map' |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// data: mapData // type: 'map' |
|
|
|
|
|
// }, |
|
|
|
|
|
// { |
|
|
|
|
|
// data: scatterData // type: 'effectScatter' |
|
|
|
|
|
// } |
|
|
|
|
|
// ] |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
this.len = updateOption.series[1].data.length // 此处设置的是需要轮播的次数 |
|
|
|
|
|
this.myChart.setOption(updateOption) |
|
|
|
|
|
|
|
|
console.log('this.series', this.seriesData) |
|
|
|
|
|
this.len = this.seriesData[0].data.length // 此处设置的是需要轮播的次数 |
|
|
|
|
|
// this.myChart.setOption(updateOption) |
|
|
this.libIndex = this.count % this.len |
|
|
this.libIndex = this.count % this.len |
|
|
this.libCurrent = this.libInfoData[this.libIndex] |
|
|
this.libCurrent = this.libInfoData[this.libIndex] |
|
|
this.initSwiper() |
|
|
this.initSwiper() |
|
|
@ -464,16 +497,16 @@ export default { |
|
|
clearInterval(this.timeTicket) |
|
|
clearInterval(this.timeTicket) |
|
|
this.myChart.dispatchAction({ |
|
|
this.myChart.dispatchAction({ |
|
|
type: 'downplay', |
|
|
type: 'downplay', |
|
|
seriesIndex: 1 |
|
|
|
|
|
|
|
|
seriesIndex: 0 |
|
|
}) |
|
|
}) |
|
|
this.myChart.dispatchAction({ |
|
|
this.myChart.dispatchAction({ |
|
|
type: 'highlight', |
|
|
type: 'highlight', |
|
|
seriesIndex: 1, |
|
|
|
|
|
|
|
|
seriesIndex: 0, |
|
|
dataIndex: params.dataIndex |
|
|
dataIndex: params.dataIndex |
|
|
}) |
|
|
}) |
|
|
this.myChart.dispatchAction({ |
|
|
this.myChart.dispatchAction({ |
|
|
type: 'showTip', |
|
|
type: 'showTip', |
|
|
seriesIndex: 1, |
|
|
|
|
|
|
|
|
seriesIndex: 0, |
|
|
dataIndex: params.dataIndex |
|
|
dataIndex: params.dataIndex |
|
|
}) |
|
|
}) |
|
|
}) |
|
|
}) |
|
|
@ -482,28 +515,24 @@ export default { |
|
|
}, |
|
|
}, |
|
|
autohover() { |
|
|
autohover() { |
|
|
// clearInterval(this.timeTicket) |
|
|
// clearInterval(this.timeTicket) |
|
|
|
|
|
|
|
|
// this.timeTicket = setInterval(() => { |
|
|
// this.timeTicket = setInterval(() => { |
|
|
console.log('555') |
|
|
|
|
|
// 1. 取消上次的高亮 |
|
|
// 1. 取消上次的高亮 |
|
|
this.myChart.dispatchAction({ |
|
|
this.myChart.dispatchAction({ |
|
|
type: 'downplay', |
|
|
type: 'downplay', |
|
|
seriesIndex: 1 |
|
|
|
|
|
|
|
|
seriesIndex: 0 |
|
|
}) |
|
|
}) |
|
|
// 2. 显示当前高亮 |
|
|
// 2. 显示当前高亮 |
|
|
this.myChart.dispatchAction({ |
|
|
this.myChart.dispatchAction({ |
|
|
type: 'highlight', |
|
|
type: 'highlight', |
|
|
seriesIndex: 1, |
|
|
|
|
|
|
|
|
seriesIndex: 0, |
|
|
dataIndex: this.count % this.len |
|
|
dataIndex: this.count % this.len |
|
|
}) |
|
|
}) |
|
|
// 3. 显示提示框中的信息 |
|
|
// 3. 显示提示框中的信息 |
|
|
this.myChart.dispatchAction({ |
|
|
this.myChart.dispatchAction({ |
|
|
type: 'showTip', |
|
|
type: 'showTip', |
|
|
seriesIndex: 1, |
|
|
|
|
|
|
|
|
seriesIndex: 0, |
|
|
dataIndex: this.count % this.len |
|
|
dataIndex: this.count % this.len |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
console.log('this.count', this.count) |
|
|
|
|
|
// }, 2000) |
|
|
// }, 2000) |
|
|
}, |
|
|
}, |
|
|
resize() { |
|
|
resize() { |
|
|
@ -528,6 +557,7 @@ export default { |
|
|
this.count++ |
|
|
this.count++ |
|
|
this.libIndex = this.count % this.len |
|
|
this.libIndex = this.count % this.len |
|
|
this.libCurrent = this.libInfoData[this.libIndex] |
|
|
this.libCurrent = this.libInfoData[this.libIndex] |
|
|
|
|
|
console.log('this.libCurrent', this.libCurrent) |
|
|
this.updatePageWithData() |
|
|
this.updatePageWithData() |
|
|
this.autohover() |
|
|
this.autohover() |
|
|
}, 3000) |
|
|
}, 3000) |
|
|
|
