|
|
|
@ -59,17 +59,18 @@ |
|
|
|
<p>本年累计办证人数</p> |
|
|
|
<p class="num"><span>{{ cardTotal }}</span><i>人</i></p> |
|
|
|
</div> |
|
|
|
<div class="lending-ranking"> |
|
|
|
<h5>借阅Top10</h5> |
|
|
|
<div class="ranking-cont"> |
|
|
|
<div class="lending-ranking" style="padding: 0;"> |
|
|
|
<!-- <h5>借阅Top10</h5> --> |
|
|
|
<div class="database-title" style="margin-bottom: 20px;">读者借阅排行榜</div> |
|
|
|
<div class="ranking-cont" style="margin: 0.25rem 0.375rem 0 0.3125rem;"> |
|
|
|
<ul class="ranking-title"> |
|
|
|
<li style="width: 0.8rem;">排名</li> |
|
|
|
<li style="width: 1.25rem; text-align: left; ">姓名</li> |
|
|
|
<li style="flex:1;" /> |
|
|
|
<li style="width: 1.75rem; text-align: right; padding-right: .25rem;">借阅次数</li> |
|
|
|
</ul> |
|
|
|
<ul class="ranking-list"> |
|
|
|
<li v-for="(item,index) in rankingWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }"> |
|
|
|
<ul class="ranking-list" style="padding-top: 10px;"> |
|
|
|
<li v-for="(item,index) in rankingWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }" style="font-size: .28rem !important; line-height: 36px !important;"> |
|
|
|
<div style="width: 1rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div> |
|
|
|
<div style="width: 1.25rem; text-align: left; ">{{ item.RDNAME }}</div> |
|
|
|
<div class="ranking-progress" style="flex:1; align-self: center;"> |
|
|
|
@ -368,12 +369,13 @@ export default { |
|
|
|
sort: Object.keys(libCode).indexOf(library.tcId) + 1, |
|
|
|
coordinate: libCode[library.tcId], |
|
|
|
countCard: gdData?.countCard || 0 |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}).sort((a, b) => a.sort - b.sort) |
|
|
|
|
|
|
|
this.libInfoData = updatedLibraries |
|
|
|
// console.log('this.libInfoData', this.libInfoData) |
|
|
|
console.log('this.libInfoData', this.libInfoData) |
|
|
|
if (localStorage.getItem('countItem')) { |
|
|
|
this.count = parseInt(localStorage.getItem('countItem')) |
|
|
|
} else { |
|
|
|
@ -401,12 +403,22 @@ export default { |
|
|
|
var mapImg = document.createElement('img') |
|
|
|
mapImg.style.height = mapImg.height = mapImg.width = mapImg.style.width = '1px' |
|
|
|
mapImg.src = require('../../assets/images/map-bg2.png') |
|
|
|
|
|
|
|
const colorMap = { |
|
|
|
'葛店城市书房·大湾分馆': '#FF7420', // 红色 |
|
|
|
'葛店城市书房·张家湾分馆': '#4ECDC4' // 青色 |
|
|
|
// '书房3': '#FFD166', // 黄色 |
|
|
|
// '书房4': '#6A0572' // 紫色 |
|
|
|
} |
|
|
|
|
|
|
|
var XAData = this.libInfoData.map(item => { |
|
|
|
const pointColor = colorMap[item.name] || '#FFFFFF' // 默认白色 |
|
|
|
return [ |
|
|
|
{ name: '大湾城市书房' }, |
|
|
|
{ name: item.name, value: item.address } |
|
|
|
{ name: '葛店城市书房·大湾分馆', color: pointColor }, |
|
|
|
{ name: item.name, value: item.address, color: pointColor } |
|
|
|
] |
|
|
|
}) |
|
|
|
|
|
|
|
var convertData = function(data) { |
|
|
|
var res = [] |
|
|
|
for (var i = 0; i < data.length; i++) { |
|
|
|
@ -418,29 +430,33 @@ export default { |
|
|
|
fromName: dataItem[0].name, |
|
|
|
toName: dataItem[1].name, |
|
|
|
coords: [fromCoord, toCoord], |
|
|
|
value: dataItem[1].value |
|
|
|
value: dataItem[1].value, |
|
|
|
color: dataItem[1].color // 传递颜色属性 |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
return res |
|
|
|
} |
|
|
|
|
|
|
|
var series = []; |
|
|
|
[ |
|
|
|
['大湾城市书房', XAData] |
|
|
|
['葛店城市书房·大湾分馆', XAData] |
|
|
|
].forEach(function(item, i) { |
|
|
|
series.push( |
|
|
|
{ |
|
|
|
name: item[0], |
|
|
|
type: 'effectScatter', |
|
|
|
symbol: 'image://' + require('@/assets/images/map_10.png'), |
|
|
|
symbolSize: [26, 20], |
|
|
|
// symbol: 'image://' + require('@/assets/images/map_10.png'), |
|
|
|
symbol: 'circle', |
|
|
|
symbolSize: [24, 14], |
|
|
|
coordinateSystem: 'geo', |
|
|
|
zlevel: 3, |
|
|
|
selectedMode: false, |
|
|
|
rippleEffect: { |
|
|
|
// brushType: 'stroke', |
|
|
|
color: 'transparent' |
|
|
|
// scale: 1.5 |
|
|
|
brushType: 'fill', // 填充模式 |
|
|
|
color: 'rgba(255,255,255,0.4)', |
|
|
|
scale: 4, // 涟漪扩散大小（可调整） |
|
|
|
period: 4 // 动画周期 |
|
|
|
}, |
|
|
|
label: { |
|
|
|
normal: { |
|
|
|
@ -451,11 +467,54 @@ export default { |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: 'transparent', |
|
|
|
color: function(params) { |
|
|
|
console.log('点位名称:', params.name) // 现在能打印出值 |
|
|
|
|
|
|
|
// 定义渐变生成函数，复用逻辑 |
|
|
|
function createRadialGradient(centerColor, edgeColor) { |
|
|
|
// 创建径向渐变：x0, y0, r0, x1, y1, r1 |
|
|
|
// (0.5,0.5)是中心点，0是中心半径，(0.5,0.5)是外圆中心，1是外圆半径 |
|
|
|
return { |
|
|
|
type: 'radial', |
|
|
|
x: 0.5, |
|
|
|
y: 0.5, |
|
|
|
r: 1, |
|
|
|
colorStops: [{ |
|
|
|
offset: 0, // 中心位置 |
|
|
|
color: centerColor // 中心颜色 |
|
|
|
}, { |
|
|
|
offset: 1, // 边缘位置 |
|
|
|
color: edgeColor // 边缘颜色（可以浅一点或透明） |
|
|
|
}], |
|
|
|
global: false // 局部渐变，跟随元素 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
switch (params.name) { |
|
|
|
case '葛店城市书房·大湾分馆': |
|
|
|
// 橙红渐变：中心深橙红，边缘浅橙红 |
|
|
|
return createRadialGradient('#FF7420', '#FFB380') |
|
|
|
case '葛店城市书房·张家湾分馆': |
|
|
|
// 青蓝渐变：中心深青蓝，边缘浅青蓝 |
|
|
|
return createRadialGradient('#4ECDC4', '#99E6E0') |
|
|
|
default: |
|
|
|
// 白色渐变：中心纯白，边缘浅灰（避免全白看不见） |
|
|
|
return createRadialGradient('#FFFFFF', '#F0F0F0') |
|
|
|
} |
|
|
|
}, |
|
|
|
areaColor: 'transparent' |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
areaColor: '#2B91B7' |
|
|
|
shadowColor: function(params) { |
|
|
|
switch (params.name) { |
|
|
|
case '葛店城市书房·大湾分馆': |
|
|
|
return '#FF7420' |
|
|
|
case '葛店城市书房·张家湾分馆': |
|
|
|
return '#4ECDC4' |
|
|
|
default: |
|
|
|
return '#FFFFFF' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
@ -465,7 +524,8 @@ export default { |
|
|
|
return { |
|
|
|
name: dataItem[1].name, |
|
|
|
value: dataItem[1].name ? libJson[dataItem[1].name].concat([dataItem[1].value]) : '', |
|
|
|
place: dataItem[1].value |
|
|
|
place: dataItem[1].value, |
|
|
|
color: dataItem[1].color |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
@ -477,12 +537,16 @@ export default { |
|
|
|
show: true, |
|
|
|
period: 6, |
|
|
|
trailLength: 0.7, |
|
|
|
color: 'red', // arrow箭头的颜色 |
|
|
|
color: function(params) { |
|
|
|
return params.data.color || 'red' |
|
|
|
}, |
|
|
|
symbolSize: 3 |
|
|
|
}, |
|
|
|
lineStyle: { |
|
|
|
normal: { |
|
|
|
color: '#fff', |
|
|
|
color: function(params) { |
|
|
|
return params.data.color || '#fff' |
|
|
|
}, |
|
|
|
width: 0, |
|
|
|
curveness: 0.2 |
|
|
|
} |
|
|
|
@ -496,18 +560,20 @@ export default { |
|
|
|
name: item[0], |
|
|
|
type: 'lines', |
|
|
|
zlevel: 2, |
|
|
|
symbol: ['none', 'arrow'], |
|
|
|
symbolSize: 10, // 固定箭头大小 |
|
|
|
symbol: ['none', 'none'], |
|
|
|
symbolSize: 10, |
|
|
|
effect: { |
|
|
|
show: true, |
|
|
|
period: 6, |
|
|
|
trailLength: 0, |
|
|
|
symbol: 'arrow', |
|
|
|
symbolSize: 10 // 动态箭头大小 |
|
|
|
symbolSize: 6 |
|
|
|
}, |
|
|
|
lineStyle: { |
|
|
|
normal: { |
|
|
|
color: '#fff', |
|
|
|
color: function(params) { |
|
|
|
return params.data.color || '#fff' |
|
|
|
}, |
|
|
|
width: 1, |
|
|
|
opacity: 0.6, |
|
|
|
curveness: 0.2 |
|
|
|
@ -524,13 +590,11 @@ export default { |
|
|
|
this.seriesData = series |
|
|
|
const initOption = { |
|
|
|
baseOption: { |
|
|
|
// 提示框 |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
triggerOn: 'click', |
|
|
|
showContent: true, // 是否显示提示框浮层 |
|
|
|
alwaysShowContent: true, // 是否一直显示提示框内容 |
|
|
|
// hideDelay: 100, // 浮层隐藏的延迟 |
|
|
|
showContent: true, |
|
|
|
alwaysShowContent: true, |
|
|
|
enterable: 'mousemove|click', |
|
|
|
padding: [0, 0, 0, 0], |
|
|
|
backgroundColor: null, |
|
|
|
@ -539,11 +603,14 @@ export default { |
|
|
|
}, |
|
|
|
formatter: (params, ticket, callback) => { |
|
|
|
if (params.seriesType === 'effectScatter') { |
|
|
|
const pointColor = params.data.color || '#FF7420' |
|
|
|
const addressLine = params.data.place ? `<div class='place'>地址：${params.data.place}</div>` : '' |
|
|
|
|
|
|
|
// 动态设置边框颜色和背景渐变 |
|
|
|
return `<div class='tooltip-main' > |
|
|
|
<div class='tooltip-line'></div> |
|
|
|
<div class='tooltip-content'> |
|
|
|
<div class='title'>${params.data.name}</div> |
|
|
|
<div class='tooltip-line' style="background: linear-gradient(0deg, ${pointColor} 0%, rgba(255,255,255,0) 100%);"></div> |
|
|
|
<div class='tooltip-content' style="border-color: ${pointColor}; background-color: rgba(0,31,87,0.8);"> |
|
|
|
<div class='title' style="background: linear-gradient(90deg, ${pointColor}, rgba(255,255,255,0.22));">${params.data.name}</div> |
|
|
|
${addressLine} |
|
|
|
</div> |
|
|
|
</div>` |
|
|
|
@ -565,7 +632,7 @@ export default { |
|
|
|
{ |
|
|
|
map: 'qiyang', |
|
|
|
aspectScale: 1, |
|
|
|
zoom: 1.1, |
|
|
|
zoom: 0.96, |
|
|
|
top: '6%', // 距离顶部的位置，每层向下一个百分比 |
|
|
|
left: '11%', |
|
|
|
roam: false, // 是否开启平游或缩放 |
|
|
|
@ -617,7 +684,7 @@ export default { |
|
|
|
{ |
|
|
|
map: 'qiyang', |
|
|
|
aspectScale: 1, |
|
|
|
zoom: 1.1, |
|
|
|
zoom: 0.96, |
|
|
|
top: '6%', // 距离顶部的位置，每层向下一个百分比 |
|
|
|
left: '11%', |
|
|
|
roam: false, // 是否开启平游或缩放 |
|
|
|
@ -659,7 +726,7 @@ export default { |
|
|
|
{ |
|
|
|
map: 'qiyang', |
|
|
|
aspectScale: 1, |
|
|
|
zoom: 1.1, |
|
|
|
zoom: 0.96, |
|
|
|
top: '7%', // 根据自己需要来设置 |
|
|
|
left: '10%', |
|
|
|
roam: false, // 是否开启平游或缩放 |
|
|
|
@ -684,7 +751,7 @@ export default { |
|
|
|
{ |
|
|
|
map: 'qiyang', |
|
|
|
aspectScale: 1, |
|
|
|
zoom: 1.1, |
|
|
|
zoom: 0.96, |
|
|
|
top: '9%', // 根据自己需要来设置 |
|
|
|
left: '9%', |
|
|
|
roam: false, |
|
|
|
@ -708,7 +775,7 @@ export default { |
|
|
|
{ |
|
|
|
map: 'qiyang', |
|
|
|
aspectScale: 1, |
|
|
|
zoom: 1.1, |
|
|
|
zoom: 0.96, |
|
|
|
top: '11%', // 根据自己需要来设置 |
|
|
|
left: '8%', |
|
|
|
roam: false, |
|
|
|
@ -732,7 +799,7 @@ export default { |
|
|
|
{ |
|
|
|
map: 'qiyang', |
|
|
|
aspectScale: 1, |
|
|
|
zoom: 1.1, |
|
|
|
zoom: 0.96, |
|
|
|
top: '12%', // 根据自己需要来设置 |
|
|
|
left: '10%', |
|
|
|
roam: false, |
|
|
|
@ -775,6 +842,387 @@ export default { |
|
|
|
this.myChart.setOption(initOption) |
|
|
|
}, 200) |
|
|
|
}, |
|
|
|
// initChart() { |
|
|
|
// this.$echarts.registerMap('qiyang', mapJson) // 注册map |
|
|
|
// this.myChart = this.$echarts.init(this.$refs.chart) // echarts容器实例化 |
|
|
|
|
|
|
|
// var mapImg = document.createElement('img') |
|
|
|
// mapImg.style.height = mapImg.height = mapImg.width = mapImg.style.width = '1px' |
|
|
|
// mapImg.src = require('../../assets/images/map-bg2.png') |
|
|
|
// var XAData = this.libInfoData.map(item => { |
|
|
|
// return [ |
|
|
|
// { name: '葛店城市书房·大湾分馆' }, |
|
|
|
// { name: item.name, value: item.address } |
|
|
|
// ] |
|
|
|
// }) |
|
|
|
// var convertData = function(data) { |
|
|
|
// var res = [] |
|
|
|
// for (var i = 0; i < data.length; i++) { |
|
|
|
// var dataItem = data[i] |
|
|
|
// var fromCoord = libJson[dataItem[0].name] |
|
|
|
// var toCoord = libJson[dataItem[1].name] |
|
|
|
// if (fromCoord && toCoord) { |
|
|
|
// res.push({ |
|
|
|
// fromName: dataItem[0].name, |
|
|
|
// toName: dataItem[1].name, |
|
|
|
// coords: [fromCoord, toCoord], |
|
|
|
// value: dataItem[1].value |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// } |
|
|
|
// return res |
|
|
|
// } |
|
|
|
// var series = []; |
|
|
|
// [ |
|
|
|
// ['葛店城市书房·大湾分馆', XAData] |
|
|
|
// ].forEach(function(item, i) { |
|
|
|
// series.push( |
|
|
|
// { |
|
|
|
// name: item[0], |
|
|
|
// type: 'effectScatter', |
|
|
|
// symbol: 'image://' + require('@/assets/images/map_10.png'), |
|
|
|
// symbolSize: [26, 20], |
|
|
|
// coordinateSystem: 'geo', |
|
|
|
// zlevel: 3, |
|
|
|
// selectedMode: false, |
|
|
|
// rippleEffect: { |
|
|
|
// // brushType: 'stroke', |
|
|
|
// color: 'transparent' |
|
|
|
// // scale: 1.5 |
|
|
|
// }, |
|
|
|
// label: { |
|
|
|
// normal: { |
|
|
|
// show: true, |
|
|
|
// position: 'right', |
|
|
|
// formatter: '' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// itemStyle: { |
|
|
|
// normal: { |
|
|
|
// color: 'transparent', |
|
|
|
// areaColor: 'transparent' |
|
|
|
// }, |
|
|
|
// emphasis: { |
|
|
|
// areaColor: '#2B91B7' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// tooltip: { |
|
|
|
// show: true |
|
|
|
// }, |
|
|
|
// data: item[1].map(function(dataItem) { |
|
|
|
// return { |
|
|
|
// name: dataItem[1].name, |
|
|
|
// value: dataItem[1].name ? libJson[dataItem[1].name].concat([dataItem[1].value]) : '', |
|
|
|
// place: dataItem[1].value |
|
|
|
// } |
|
|
|
// }) |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// name: item[0], |
|
|
|
// type: 'lines', |
|
|
|
// zlevel: 1, |
|
|
|
// effect: { |
|
|
|
// show: true, |
|
|
|
// period: 6, |
|
|
|
// trailLength: 0.7, |
|
|
|
// color: 'red', // arrow箭头的颜色 |
|
|
|
// symbolSize: 3 |
|
|
|
// }, |
|
|
|
// lineStyle: { |
|
|
|
// normal: { |
|
|
|
// color: '#fff', |
|
|
|
// width: 0, |
|
|
|
// curveness: 0.2 |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// tooltip: { |
|
|
|
// show: false |
|
|
|
// }, |
|
|
|
// data: convertData(item[1]) |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// name: item[0], |
|
|
|
// type: 'lines', |
|
|
|
// zlevel: 2, |
|
|
|
// symbol: ['none', 'arrow'], |
|
|
|
// symbolSize: 10, // 固定箭头大小 |
|
|
|
// effect: { |
|
|
|
// show: true, |
|
|
|
// period: 6, |
|
|
|
// trailLength: 0, |
|
|
|
// symbol: 'arrow', |
|
|
|
// symbolSize: 10 // 动态箭头大小 |
|
|
|
// }, |
|
|
|
// lineStyle: { |
|
|
|
// normal: { |
|
|
|
// color: '#fff', |
|
|
|
// width: 1, |
|
|
|
// opacity: 0.6, |
|
|
|
// curveness: 0.2 |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// tooltip: { |
|
|
|
// show: false |
|
|
|
// }, |
|
|
|
// data: convertData(item[1]) |
|
|
|
// } |
|
|
|
// ) |
|
|
|
// }) |
|
|
|
|
|
|
|
// this.seriesData = series |
|
|
|
// const initOption = { |
|
|
|
// baseOption: { |
|
|
|
// // 提示框 |
|
|
|
// tooltip: { |
|
|
|
// trigger: 'item', |
|
|
|
// triggerOn: 'click', |
|
|
|
// showContent: true, // 是否显示提示框浮层 |
|
|
|
// alwaysShowContent: true, // 是否一直显示提示框内容 |
|
|
|
// // hideDelay: 100, // 浮层隐藏的延迟 |
|
|
|
// enterable: 'mousemove|click', |
|
|
|
// padding: [0, 0, 0, 0], |
|
|
|
// backgroundColor: null, |
|
|
|
// position: function(point, params, dom, rect, size) { |
|
|
|
// return [point[0] + 14, point[1] - 164] |
|
|
|
// }, |
|
|
|
// formatter: (params, ticket, callback) => { |
|
|
|
// if (params.seriesType === 'effectScatter') { |
|
|
|
// const addressLine = params.data.place ? `<div class='place'>地址：${params.data.place}</div>` : '' |
|
|
|
// return `<div class='tooltip-main' > |
|
|
|
// <div class='tooltip-line'></div> |
|
|
|
// <div class='tooltip-content'> |
|
|
|
// <div class='title'>${params.data.name}</div> |
|
|
|
// ${addressLine} |
|
|
|
// </div> |
|
|
|
// </div>` |
|
|
|
// } else if (params.seriesType === 'lines') { |
|
|
|
// return ( |
|
|
|
// params.data.fromName + |
|
|
|
// '>' + |
|
|
|
// params.data.toName + |
|
|
|
// '<br />' + |
|
|
|
// params.data.value |
|
|
|
// ) |
|
|
|
// } else { |
|
|
|
// return params.name |
|
|
|
// } |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// // 设置geo坐标系 |
|
|
|
// geo: [ |
|
|
|
// { |
|
|
|
// map: 'qiyang', |
|
|
|
// aspectScale: 1, |
|
|
|
// zoom: 1, |
|
|
|
// top: '6%', // 距离顶部的位置，每层向下一个百分比 |
|
|
|
// left: '11%', |
|
|
|
// roam: false, // 是否开启平游或缩放 |
|
|
|
// z: 6, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了 |
|
|
|
// itemStyle: { |
|
|
|
// areaColor: { |
|
|
|
// type: 'linear', |
|
|
|
// x: 0, |
|
|
|
// y: 0, |
|
|
|
// x2: 1, |
|
|
|
// y2: 1, |
|
|
|
// colorStops: [{ |
|
|
|
// offset: 0, color: 'rgba(0,0,0,.1)' |
|
|
|
// }, { |
|
|
|
// offset: 0.8, color: 'rgba(59,143,248,.6)' |
|
|
|
// }], |
|
|
|
// global: false |
|
|
|
// }, |
|
|
|
// borderColor: '#9ffcff', |
|
|
|
// borderWidth: 1 |
|
|
|
// }, |
|
|
|
// emphasis: { |
|
|
|
// itemStyle: { |
|
|
|
// areaColor: { |
|
|
|
// type: 'linear', |
|
|
|
// x: 0, |
|
|
|
// y: 0, |
|
|
|
// x2: 1, |
|
|
|
// y2: 1, |
|
|
|
// colorStops: [{ |
|
|
|
// offset: 0, color: 'rgba(0,0,0,.1)' |
|
|
|
// }, { |
|
|
|
// offset: 0.8, color: 'rgba(59,143,248,.6)' |
|
|
|
// }], |
|
|
|
// global: false |
|
|
|
// } // 鼠标移上去时区域的颜色 |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// label: { |
|
|
|
// emphasis: { |
|
|
|
// show: false, |
|
|
|
// color: '#fff' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// tooltip: { |
|
|
|
// show: true |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// map: 'qiyang', |
|
|
|
// aspectScale: 1, |
|
|
|
// zoom: 1, |
|
|
|
// top: '6%', // 距离顶部的位置，每层向下一个百分比 |
|
|
|
// left: '11%', |
|
|
|
// roam: false, // 是否开启平游或缩放 |
|
|
|
// z: 5, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了 |
|
|
|
// itemStyle: { |
|
|
|
// areaColor: { |
|
|
|
// type: 'pattern', |
|
|
|
// image: mapImg, |
|
|
|
// repeat: 'repeat' |
|
|
|
// }, // 每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样 |
|
|
|
// borderColor: '#9ffcff', |
|
|
|
// borderWidth: 3, |
|
|
|
// shadowColor: '#4cd4eb', |
|
|
|
// shadowOffsetX: 0, |
|
|
|
// shadowOffsetY: 0, |
|
|
|
// shadowBlur: 0, |
|
|
|
// emphasis: { // 地图悬停高亮样式 |
|
|
|
// areaColor: { |
|
|
|
// type: 'pattern', |
|
|
|
// image: mapImg, |
|
|
|
// repeat: 'repeat' |
|
|
|
// } |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// emphasis: { |
|
|
|
// disabled: true, |
|
|
|
// areaColor: '#01215c' |
|
|
|
// }, |
|
|
|
// label: { |
|
|
|
// emphasis: { |
|
|
|
// show: false, |
|
|
|
// color: '#fff' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// tooltip: { |
|
|
|
// show: false |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// map: 'qiyang', |
|
|
|
// aspectScale: 1, |
|
|
|
// zoom: 1, |
|
|
|
// top: '7%', // 根据自己需要来设置 |
|
|
|
// left: '10%', |
|
|
|
// roam: false, // 是否开启平游或缩放 |
|
|
|
// z: 4, // 变小，也就是被压在下面 |
|
|
|
// itemStyle: { |
|
|
|
// areaColor: '#05498f', // 记得改颜色 |
|
|
|
// borderColor: '#0296cf', |
|
|
|
// borderWidth: 2, |
|
|
|
// shadowColor: '#0296cf', |
|
|
|
// shadowOffsetX: 0, |
|
|
|
// shadowOffsetY: 0, |
|
|
|
// shadowBlur: 0, |
|
|
|
// emphasis: { // 地图悬停高亮样式 |
|
|
|
// disabled: true, |
|
|
|
// areaColor: '#05498f' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// tooltip: { |
|
|
|
// show: false |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// map: 'qiyang', |
|
|
|
// aspectScale: 1, |
|
|
|
// zoom: 1, |
|
|
|
// top: '9%', // 根据自己需要来设置 |
|
|
|
// left: '9%', |
|
|
|
// roam: false, |
|
|
|
// z: 3, // 变小，也就是被压在下面 |
|
|
|
// itemStyle: { |
|
|
|
// areaColor: 'rgba(3,106,183,.5)', // 记得改颜色 |
|
|
|
// borderColor: '#025792', |
|
|
|
// borderWidth: 2, |
|
|
|
// shadowColor: '#025792', |
|
|
|
// shadowOffsetX: 0, |
|
|
|
// shadowOffsetY: 0, |
|
|
|
// shadowBlur: 0, |
|
|
|
// emphasis: { // 地图悬停高亮样式 |
|
|
|
// areaColor: 'rgba(3,106,183,.5)' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// tooltip: { |
|
|
|
// show: false |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// map: 'qiyang', |
|
|
|
// aspectScale: 1, |
|
|
|
// zoom: 1, |
|
|
|
// top: '11%', // 根据自己需要来设置 |
|
|
|
// left: '8%', |
|
|
|
// roam: false, |
|
|
|
// z: 2, // 变小，也就是被压在下面 |
|
|
|
// itemStyle: { |
|
|
|
// areaColor: 'rgba(3,106,183,.2)', // 记得改颜色 |
|
|
|
// borderColor: '#195175', |
|
|
|
// borderWidth: 1, |
|
|
|
// shadowColor: '#0f4c74', |
|
|
|
// shadowOffsetX: 0, |
|
|
|
// shadowOffsetY: 4, |
|
|
|
// shadowBlur: 10, |
|
|
|
// emphasis: { // 地图悬停高亮样式 |
|
|
|
// areaColor: 'rgba(3,106,183,.2)' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// tooltip: { |
|
|
|
// show: false |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// map: 'qiyang', |
|
|
|
// aspectScale: 1, |
|
|
|
// zoom: 1, |
|
|
|
// top: '12%', // 根据自己需要来设置 |
|
|
|
// left: '10%', |
|
|
|
// roam: false, |
|
|
|
// z: 1, // 变小，也就是被压在下面 |
|
|
|
// itemStyle: { |
|
|
|
// areaColor: 'rgba(0,0,0,.6)', // 记得改颜色 |
|
|
|
// borderColor: 'rgba(0,0,0,.6)', |
|
|
|
// borderWidth: 2, |
|
|
|
// shadowColor: 'rgba(0,0,0,.6)', |
|
|
|
// shadowOffsetX: 0, |
|
|
|
// shadowOffsetY: 4, |
|
|
|
// shadowBlur: 10, |
|
|
|
// emphasis: { // 地图悬停高亮样式 |
|
|
|
// areaColor: 'rgba(0,0,0,.6)' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// tooltip: { |
|
|
|
// show: false |
|
|
|
// } |
|
|
|
// } |
|
|
|
// ], |
|
|
|
// series: series |
|
|
|
// }, |
|
|
|
// media: [ |
|
|
|
// { |
|
|
|
// query: { |
|
|
|
// maxWidth: 666 |
|
|
|
// }, |
|
|
|
// option: { |
|
|
|
// tooltip: { |
|
|
|
// position: function(point, params, dom, rect, size) { |
|
|
|
// return [point[0] + 10, point[1] - 122] |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
// ] |
|
|
|
// } |
|
|
|
// setTimeout(() => { |
|
|
|
// this.myChart.setOption(initOption) |
|
|
|
// }, 200) |
|
|
|
// }, |
|
|
|
updateChart() { |
|
|
|
// 地图数据 |
|
|
|
// const mapData = mapJson.features.map((item) => { |
|
|
|
|
