大家好,最近忙着自己写开源项目,又不能在公司写,所以一直没有更新什么东西。
今天就给大家一些使用echarts的心得, 使用echarts各省地图,本人写的这些代码在一年前就已经搞定了,但是发现网上一直没有什么好的案例,所以随手发表一下。
如果你们需要html版本的可以找我,会vue.js的转html很简单。
该版本可以显示所有省市地图,以及中国地图。
本人使用的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的‘甘肃’ 改为 对应引用资源的省市。