VUE+echarts实现省份，中国地图
程序员文章站
2022-06-22 15:45:53
总结下项目中vue项目引入echarts地图的实现过程及效果前提条件main.js 全局引入echartsimport 'echarts/map/js/china'import china from 'echarts/map/json/china.json'echarts.registerMap('china', china)Vue.prototype.$echarts = echarts省份地图文件具体实现在对应的页面实现效果
总结下项目中vue项目引入echarts地图的实现过程及效果
前提条件
main.js 全局引入echarts
import 'echarts/map/js/china'
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
Vue.prototype.$echarts = echarts
省份地图文件
具体实现
在对应的页面实现效果
<template>
<div>
<div ref="mapOption" style="height:600px;width:600px;background: #eee" ></div>
<div id="myChartChina" :style="{width: '100%', height: '500px'}"></div>
</div>
</template>
<script>
import 'echarts/map/js/province/shanxi.js' // 引入山西地图
export default {
data () {
return {
mapOption: {
title: {
text: '以后订阅我博客的人群分布',
x: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
x: 'left',
data: ['iphoneX']
},
dataRange: {
min: 0,
max: 2500,
x: 'left',
y: 'bottom',
text: ['max', 'min'],
calculable: true
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series: [
{
name: '帅哥美女',
type: 'map',
mapType: '山西',
roam: false,
itemStyle: {
normal: {label: {show: true}},
emphasis: {label: {show: true}}
},
data: [
{name: '太原市', value: 130},
{name: '吕梁市', value: 50},
{name: '临汾', value: 31},
{name: '大同', value: 55},
{name: '方山', value: 90},
{name: '临县', value: 10},
{name: '运城', value: 70},
{name: '离石', value: 50},
{name: '柳林', value: 30},
{name: '汾阳', value: 50}
]
}
]
}
}
},
// 钩子函数 不了解的话 建议看看 vue的生命周期
mounted () {
this.mapEchartsInit()
this.drawLine()
},
methods: {
mapEchartsInit () {
this.$echarts.init(this.$refs.mapOption).setOption(this.mapOption)
},
drawLine () {
// 基于准备好的dom，初始化echarts实例
var myChartContainer = document.getElementById('myChartChina')
var resizeMyChartContainer = function () {
myChartContainer.style.width = (document.body.offsetWidth / 2) + 'px'// 页面一半的大小
}
resizeMyChartContainer()
var myChartChina = this.$echarts.init(myChartContainer)
function randomData () {
return Math.round(Math.random() * 500)
}
// 绘制图表
var optionMap = {
tooltip: {},
legend: {
orient: 'vertical',
left: 'left',
data: ['']
},
visualMap: {
min: 0,
max: 1500,
left: '10%',
top: 'bottom',
text: ['高', '低'],
calculable: true,
color: ['#0b50b9', '#c3e2f4']
},
selectedMode: 'single',
series: [
{
name: '',
type: 'map',
mapType: 'china',
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
showLegendSymbol: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [
{ name: '北京', value: randomData() },
{ name: '天津', value: randomData() },
{ name: '上海', value: randomData() },
{ name: '重庆', value: randomData() },
{ name: '河北', value: randomData() },
{ name: '河南', value: randomData() },
{ name: '云南', value: randomData() },
{ name: '辽宁', value: randomData() },
{ name: '黑龙江', value: randomData() },
{ name: '湖南', value: randomData() },
{ name: '安徽', value: randomData() },
{ name: '山东', value: randomData() },
{ name: '*', value: randomData() },
{ name: '江苏', value: randomData() },
{ name: '浙江', value: randomData() },
{ name: '江西', value: randomData() },
{ name: '湖北', value: randomData() },
{ name: '广西', value: randomData() },
{ name: '甘肃', value: randomData() },
{ name: '山西', value: randomData() },
{ name: '内蒙古', value: randomData() },
{ name: '陕西', value: randomData() },
{ name: '吉林', value: randomData() },
{ name: '福建', value: randomData() },
{ name: '贵州', value: randomData() },
{ name: '广东', value: randomData() },
{ name: '青海', value: randomData() },
{ name: '*', value: randomData() },
{ name: '四川', value: randomData() },
{ name: '宁夏', value: randomData() },
{ name: '海南', value: randomData() },
{ name: '*', value: randomData() },
{ name: '香港', value: randomData() },
{ name: '澳门', value: randomData() }
]
}
]
}
myChartChina.setOption(optionMap)
window.onresize = function () {
resizeMyChartContainer()
myChartChina.resize()
}
}
}
}
</script>
<style scoped>
</style>
效果截图
觉得有用的话，点个赞呗
本文地址：https://blog.csdn.net/weixin_36106791/article/details/107372405
下一篇： js加密（七）steam登录
推荐阅读
-
vue+echarts实现动态绘制图表及异步加载数据的方法
-
js实现省份下拉菜单效果
-
mpvue微信小程序多列选择器用法之省份城市选择的实现
-
echarts中国地图数据迁徙图，带导弹动效+省份热点数据分布，vue实例详解
-
vue+echarts实现中国地图流动效果(步骤详解)
-
vue+echarts实现可拖动节点的折现图（支持拖动方向和上下限的设置）
-
Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)
-
js使用xml数据载体实现城市省份二级联动效果
-
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
-
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）