import shenyangJSon from '../../static/gansu.json'
export default {
components: {
},
props: {
},
data() {
return {
shenyangJSon,
regions: [],
tableData: [],
myCharts: null
};
},
created() {
},
mounted() {
this.$nextTick(() => {
this.chartInit()
})
},
beforeDestroy() {
myCharts.clear()
},
methods: {
chartInit() {
let that = this
that.$echarts.registerMap('liaoning', shenyangJSon)
var option = {
tooltip: {
trigger: 'item'
},
geo: {
map: 'liaoning',
roam: true,
zoom: 1.1,
aspectScale: 1,
scaleLimit: {
min: 1,
max: 2
},
top: 35,
right: 150,
left: 'auto',
selectedMode: 'single',
select: {
disabled: true,
itemStyle: {
borderWidth: 2.5,
areaColor: 'rgb(8, 207, 221)',
shadowColor: 'rgba(255, 255, 255, 0.3)',
shadowBlur: 10,
shadowOffsetX: 4,
shadowOffsetY: 4
},
label: {
color: 'rgba(255, 255, 255, 1)'
}
},
regions: that.tableData,
label: {
show: false,
color: 'rgba(255, 255, 255, 0.6)',
fontWeight: 'bold',
fontSize: 16
},
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
areaColor: '#389BB7',
borderWidth: 0
}
},
emphasis: {
disabled: false,
focus: 'none',
label: {
color: 'rgba(255, 255, 255, 1)',
fontWeight: 'bold',
fontSize: 16
},
itemStyle: {
borderWidth: 2.5,
borderColor: '#9AD0F7',
areaColor: '#962029',
shadowColor: 'rgba(255, 255, 255, 0.3)',
shadowBlur: 10,
shadowOffsetX: 4,
shadowOffsetY: 4
}
},
tooltip: {
show: true,
textStyle: {
color: '#FFF'
},
backgroundColor: '#011e49',
borderColor: 'transparent',
borderWidth: 0,
textShadowColor: 'transparent',
formatter: function (params) {
let cityitem = that.tableData.find((item) => {
return item.areaname === params.name
})
// console.log('data', cityitem);
if (typeof (cityitem) === 'undefined') return ''
let returnHtml = `
`
return returnHtml
}
}
}
}
if (that.myCharts === null) {
that.myCharts = that.$echarts.init(this.$refs.myEcharts);
}
that.myCharts.setOption(option)
window.addEventListener('resize', function () {
that.myCharts.resize()
})
}
}
};
文章链接
发表评论