大家好,最近忙着自己寫開源項目,又不能在公司寫,所以一直沒有更新什麼東西。
今天就給大家一些使用echarts的心得, 使用echarts各省地圖,本人寫的這些代碼在一年前就已經搞定了,但是發現網上一直沒有什麼好的案例,所以隨手發表一下。
本人使用的vue.js + echarts_4.2.1版本。
vue項目添加組件的方式:
npm install echarts --save
廢話不說,直接上代碼。
首先添加
<div class="mymap" :style="this.mapchartStyle" ref="myEchart"></div>
以後引入
import echarts from 'echarts'
import '../../../node_modules/echarts/map/js/province/gansu.js' // 引入中國地圖數據
因爲使用vue.js,所以他有着完整的生命週期,防止內存泄露!
created () {
this.mapUniondataLoading()
this.isHeight()
this.intervalOne = setInterval(() => {
this.mapUniondataLoading()
}, 30000)
},
mounted () {
setTimeout(() => {
if (this.mapData !== null) {
this.initUnionChart()
}
}, 600)
this.intervalTwo = setInterval(() => {
this.initUnionChart()
}, 30000)
},
beforeDestroy () {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
clearInterval(this.intervalOne)
clearInterval(this.intervalTwo)
},
然後是核心代碼
initUnionChart () {
this.chart = echarts.init(this.$refs.myEchart) // 這裏是爲了獲得容器所在位置
this.chinaConfigure(this.mapData)
},
chinaConfigure (dataInput) {
window.onresize = this.chart.resize
this.chart.setOption({ // 進行相關配置
title: {
text: '',
x: 'center'
},
animation: true,
// backgroundColor: '#27408B',
tooltip: {
trigger: 'item'
}, // 鼠標移到圖裏面的浮動提示框
dataRange: {
show: false,
min: 0,
max: 200,
text: ['High', 'Low'],
realtime: true,
calculable: true,
color: ['orangered', 'yellow', 'lightskyblue']
},
// visualMap: {
// min: 800,
// max: 50000,
// inRange: {
// color: ['lightskyblue','yellow', 'orangered']
// }
// },
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'top',
feature: {
mark: {show: true},
restore: {show: true}
}
},
geo: { // 這個是重點配置區
// map: '甘肅',
// map: 'china', // 表示中國地圖
// mapType: '甘肅',
roam: 'scale',
label: {
normal: {
show: true, // 是否顯示對應地名
// formatter: '{a}',
// formatter: function (params) {
// console.log('map_params')
// console.log(params)
// // for (var i = 0; i < this.mapData.length; i++) {
// // console.log(this.mapData[i])
// // if (this.mapData[i].name === params.name) {
// // return params.name + ':' + this.mapData[i].value + ''
// // }
// // }
// return this.mapData.name + ':' + this.mapData.value + ''
// },
textStyle: {
color: '#FFFFFF'
}
},
emphasis: {label: {show: true}}
},
itemStyle: {
normal: {
borderColor: '#387ba7', // 地圖邊界線的顏色
areaColor: '#1c3c63', // 地圖整體區域的顏色
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 10
},
emphasis: {
label: {
show: false
},
areaColor: '#EEC900', // 鼠標滑過的顏色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 2,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
layoutCenter: ['50%', '50%'],
layoutSize: this.mapOptionOpts.geo.layoutSize
},
series: [{
name: '測試', // 浮動框的標題
type: 'map',
map: '甘肅',
// roam: false,
// geoIndex: 0,
roam: 'scale',
label: {
normal: {
show: true, // 是否顯示對應地名
// formatter: '{a}',
formatter: function (params) {
// console.log('map_params')
// console.log(params)
// for (var i = 0; i < this.mapData.length; i++) {
// console.log(this.mapData[i])
// if (this.mapData[i].name === params.name) {
// return params.name + ':' + this.mapData[i].value + ''
// }
// }
return params.name + ':' + params.value + ''
},
textStyle: {
color: '#7A67EE'
}
},
emphasis: {label: {show: true}}
},
itemStyle: {
normal: {
borderColor: '#387ba7', // 地圖邊界線的顏色
areaColor: '#1c3c63', // 地圖整體區域的顏色
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 10
},
emphasis: {
label: {
show: false
},
areaColor: '#EEC900', // 鼠標滑過的顏色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 2,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
layoutCenter: ['50%', '50%'],
layoutSize: this.mapOptionOpts.geo.layoutSize,
// label: this.labelOption,
data: this.mapData
}]
})
this.chart.on('click', function (param) { // 點擊各省後的效果
this.provinceName = param.name
console.log(this.provinceName)
})
}
好啦。這樣就可以出現當前引入的地圖了。
完整代碼如下:
<template>
<div class="mymap" :style="this.mapchartStyle" ref="myEchart"></div>
</template>
<script>
import echarts from 'echarts'
import '../../../node_modules/echarts/map/js/china.js' // 引入中國地圖數據
import '../../../node_modules/echarts/map/js/province/gansu.js' // 引入中國地圖數據
export default {
data () {
this.chartSettings = {
position: 'province/gansu',
roam: true,
selectData: true,
aspectScale: 0.75
// mapGrid: {
// left: auto,
// right: auto,
// top: auto,
// bottom: auto
// }
}
return {
mapchartStyle: {height: '1200px', width: '1200px'},
chart: null,
intervalOne: null,
intervalTwo: null,
openWorkLogParams: {
name: ''
},
provinceName: '',
// mapData: [],
mapData: [{
'name': '蘭州市',
'value': 200
}, {
'name': '武威市',
'value': 142
}, {
'name': '白銀市',
'value': 44
}, {
'name': '酒泉市',
'value': 92
}, {
'name': '張掖市',
'value': 810
}, {
'name': '金昌市',
'value': 170
}, {
'name': '甘南藏族自治州',
'value': 453
}],
labelOption: {
normal: {
show: true,
position: 'top',
distance: 15,
align: 'left',
verticalAlign: 'middle',
rotate: 90,
// formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {
textBorderColor: '#fff'
}
}
}
},
geoCoordMap: {
'白銀市': [121.15, 31.89],
'武威市': [109.781327, 39.608266],
'定西市': [120.38, 37.35],
'天水市': [117, 36.65],
'平涼市': [104.37, 31.13],
'慶陽市': [120.65, 28.01],
'隴南市': [115.97, 29.71],
'金昌市': [114.47, 36.6],
'張掖市': [119.72, 30.23],
'嘉峪關市': [103.73, 36.03],
'酒泉市': [116.83, 38.33],
'臨夏回族自治州': [118.35, 35.05],
'甘南藏族自治州': [106.110698, 30.837793],
'蘭州市': [117.2, 39.13]
},
mapOptionOpts: {
geo: {
layoutCenter: ['50%', '50%'],
layoutSize: 1000
}
},
res: [],
mapwidth: '500px'
}
},
created () {
this.mapUniondataLoading()
this.isHeight()
this.intervalOne = setInterval(() => {
this.mapUniondataLoading()
}, 30000)
},
mounted () {
setTimeout(() => {
if (this.mapData !== null) {
this.initUnionChart()
}
}, 600)
this.intervalTwo = setInterval(() => {
this.initUnionChart()
}, 30000)
},
beforeDestroy () {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
clearInterval(this.intervalOne)
clearInterval(this.intervalTwo)
},
methods: {
isHeight () {
this.mapchartStyle.height = (document.body.clientHeight - 60) * 7 / 12 + 9 + 'px'
this.mapwidth = (document.body.clientWidth) * 2 / 5 + 'px'
if (((document.body.clientHeight) * 7 / 12) < ((document.body.clientWidth) * 2 / 5)) {
this.mapOptionOpts.geo.layoutSize = (document.body.clientHeight) * 7 / 12
}
if (((document.body.clientHeight) * 7 / 12) >= ((document.body.clientWidth) * 2 / 5)) {
this.mapOptionOpts.geo.layoutSize = (document.body.clientWidth) * 2 / 5 - 30
}
},
// 這段代碼是項目裏用的,在案例中沒有用
convertDataFunc () {
for (var i = 0; i < this.mapData.length; i++) {
var geoCoord = this.geoCoordMap[this.mapData[i].name]
if (geoCoord) {
this.res.push({
name: this.mapData[i].name,
value: geoCoord.concat(this.mapData[i].value)
})
}
}
},
initUnionChart () {
this.chart = echarts.init(this.$refs.myEchart) // 這裏是爲了獲得容器所在位置
this.chinaConfigure(this.mapData)
},
chinaConfigure (dataInput) {
window.onresize = this.chart.resize
this.chart.setOption({ // 進行相關配置
title: {
text: '',
x: 'center'
},
animation: true,
// backgroundColor: '#27408B',
tooltip: {
trigger: 'item'
}, // 鼠標移到圖裏面的浮動提示框
dataRange: {
show: false,
min: 0,
max: 200,
text: ['High', 'Low'],
realtime: true,
calculable: true,
color: ['orangered', 'yellow', 'lightskyblue']
},
// visualMap: {
// min: 800,
// max: 50000,
// inRange: {
// color: ['lightskyblue','yellow', 'orangered']
// }
// },
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'top',
feature: {
mark: {show: true},
restore: {show: true}
}
},
geo: { // 這個是重點配置區
// map: '甘肅',
// map: 'china', // 表示中國地圖
// mapType: '甘肅',
roam: 'scale',
label: {
normal: {
show: true, // 是否顯示對應地名
// formatter: '{a}',
// formatter: function (params) {
// console.log('map_params')
// console.log(params)
// // for (var i = 0; i < this.mapData.length; i++) {
// // console.log(this.mapData[i])
// // if (this.mapData[i].name === params.name) {
// // return params.name + ':' + this.mapData[i].value + ''
// // }
// // }
// return this.mapData.name + ':' + this.mapData.value + ''
// },
textStyle: {
color: '#FFFFFF'
}
},
emphasis: {label: {show: true}}
},
itemStyle: {
normal: {
borderColor: '#387ba7', // 地圖邊界線的顏色
areaColor: '#1c3c63', // 地圖整體區域的顏色
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 10
},
emphasis: {
label: {
show: false
},
areaColor: '#EEC900', // 鼠標滑過的顏色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 2,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
layoutCenter: ['50%', '50%'],
layoutSize: this.mapOptionOpts.geo.layoutSize
},
series: [{
name: '測試', // 浮動框的標題
type: 'map',
map: '甘肅',
// roam: false,
// geoIndex: 0,
roam: 'scale',
label: {
normal: {
show: true, // 是否顯示對應地名
// formatter: '{a}',
formatter: function (params) {
// console.log('map_params')
// console.log(params)
// for (var i = 0; i < this.mapData.length; i++) {
// console.log(this.mapData[i])
// if (this.mapData[i].name === params.name) {
// return params.name + ':' + this.mapData[i].value + ''
// }
// }
return params.name + ':' + params.value + ''
},
textStyle: {
color: '#7A67EE'
}
},
emphasis: {label: {show: true}}
},
itemStyle: {
normal: {
borderColor: '#387ba7', // 地圖邊界線的顏色
areaColor: '#1c3c63', // 地圖整體區域的顏色
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 10
},
emphasis: {
label: {
show: false
},
areaColor: '#EEC900', // 鼠標滑過的顏色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 2,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
layoutCenter: ['50%', '50%'],
layoutSize: this.mapOptionOpts.geo.layoutSize,
// label: this.labelOption,
data: this.mapData
}]
})
var self = this
this.chart.on('click', function (param) { // 點擊各省後的效果
this.provinceName = param.name
console.log(this.provinceName)
})
}
}
}
</script>
<style scoped>
.ve-map {
height: 600px;
}
.titleClass {
height: 2.05em;
line-height: 2.05em;
/* width: 100%; */
font-weight:bold;
font-size: 1.3em;
text-align: center;
color: #F0FFF0;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-border-radius: 8px;
background-clip: padding-box;
/* box-shadow: 0 0 9px #cac6c6; */
}
</style>
效果圖:
當然,我當前引入的是甘肅省地圖,如果需要引入別的省圖,需要修改引入資源路徑
import '../../../node_modules/echarts/map/js/province/gansu.js' // 引入地圖數據
並且需要修改變量
需要把series.map的‘甘肅’ 改爲 對應引用資源的省市。