vue中使用ECharts实现中国地图配置详解
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
首先echarts4.90版本以上移除了中国地图依赖包有两种办法解决：
1.下载echarts4.90版本
npm install echarts@4.9.0
如果项目中已经安装了echarts的最新版本，又不方便卸载
可以将打开下载了4.90版本的vue项目中的node_modules找到里面的map包，移动到echarts最新版本的同样位置目录下
再vue项目的main.js中做如下配置
import * as echarts from 'echarts'
import china from 'echarts/map/json/china.json' //导入china包
echarts.registerMap('china', china)
Vue.prototype.$echarts = echarts2.也可以进入以下链接拿到中国地图的JSON文件引入项目中进行使用
如上配置好后就可以进行地图的绘制
基础配置
<template>
<div class="china" ref="china"></div>
</template>
import * as echarts from 'echarts'
<style lang="scss" scoped>
.china {
width: calc(100% - 40px);
height: 600px;
margin: 20px;
}
</style>方法（在 mounted()里面调用此方法，用ecahrts的map实现）：
echarts需要的数组结构[{name:‘北京’，‘value’}]
let myChart = echarts.init(this.$refs.china)
let option;
var data = this.list
option = {
tooltip: {
trigger: 'item'
},
//左侧小导航图标
visualMap: {
show: true,
x: 'left',
y: 'center',
splitList: [
{ start: 1, end: 500 }, { start: 500, end: 1000 },
{ start: 1000, end: 1500 }, { start: 1500, end: 2000 },
{ start: 2000, end: 2500 }, { start: 2500, },
],
color: [
'#ffb43d',
'#5475f5',
'#85daef',
'#9feaa5',
'#74e2ca',
'#0074bc'],// e6ac53 '#9fb5ea'
textStyle: {
color: '#black'
}
},
geo: {
map: 'china',
aspectScale: 0.75,
layoutCenter: ["50%", "51.5%"], //地图位置
layoutSize: '118%',
roam: false, //关闭缩放
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 0.5,
color: {
type: 'linear-gradient',
x: 0,
y: 1500,
x2: 2500,
y2: 0,
colorStops: [{
offset: 0,
color: '#009DA1' // 0% 处的颜色
}, {
offset: 1,
color: '#005B9E' // 50% 处的颜色
}],
global: true // 缺省为 false
},
opacity: 0.5,
},
emphasis: {
areaColor: '#2a333d'
}
},
regions: [{
name: '南海诸岛',
itemStyle: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
},
emphasis: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
}
}],
z: 2
},
series: [{
name: '',
type: 'map',
map: 'china',
label: {
show: true,
color: 'black',
fontSize: 14
},
aspectScale: 0.75,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '118%',
roam: false, //关闭缩放
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 0.6)',
borderWidth: 0.8,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1200,
x2: 1000,
y2: 0,
colorStops: [{
offset: 0,
color: '#009DA1' // 0% 处的颜色
}, {
offset: 1,
color: '#005B9E' // 50% 处的颜色
}],
global: true // 缺省为 false
},
},
emphasis: {
areaColor: 'rgba(147, 235, 248, 0)'
}
},
zlevel: 1,
data: data
}],
};
//地图点击事件,根据点击某个省份计算出这个省份的数据
myChart.on('click', (params) => {
console.log(params);
});
myChart.setOption(option);效果图：
附带甘肃地图(用JSON数据+echarts的方法实现):
方法(ecahrts需要的后端数据结构需和json数据里的名字格式一样，名字需要对应上，差字少字就出不来):
<template>
<div class="GanSu" ref="GanSu"></div>
< /template>
<script>
import GanShu from '@/utils/gansu_mini.json'
</script>
let myChart = echarts.init(this.$refs.GanSu)
let option;
let uploadedDataURL = GanShu; //这个是JSON数据
let datamap = this.Ganshu //后端返回的数据
getGanshu(uploadedDataURL)
function getGanshu(uploadedDataURL) {
echarts.registerMap('my', uploadedDataURL);
option = {
tooltip: {
trigger: 'item',
backgroundColor: '#fff',
textStyle: {
color: '#000',
decoration: 'none',
},
formatter: function (params) {
// console.log(params, 'params')
var tipHtml = '';
tipHtml = `<div class="ui-map-img">
<div class='ui-maptxt'>${params.name}</div>
<div class='ui-mapNum'>人数:${params.value}</div>
</div> `
return tipHtml;
},
},
grid: {
left: '0', // 与容器左侧的距离
right: '0', // 与容器右侧的距离
top: '0', // 与容器顶部的距离
bottom: '0', // 与容器底部的距离
},
geo: {
map: 'my',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '108%',
itemStyle: {
normal: {
shadowColor: '#276fce',
shadowOffsetX: 0,
shadowOffsetY: 15,
opacity: 0.3,
},
},
},
series: [
{
type: 'map',
mapType: 'my',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '108%',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 2
},
select: {//这个就是鼠标点击后，地图想要展示的配置
disabled: false,//可以被选中
itemStyle: {//相关配置项很多，可以参考echarts官网
color: '#fff',
areaColor: "#5D98C9"//选中
}
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
data: datamap,
itemStyle: {
normal: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.9,
colorStops: [{
offset: 0,
color: 'RGBA(40, 99, 113, 1)' // 0% 处的颜色
}, {
offset: 1,
color: 'RGBA(28, 79, 105, 0.6)' // 100% 处的颜色
}],
},
borderColor: 'RGBA(52, 140, 250, 1)',
borderWidth: 2,
shadowColor: '#092f8f', //外发光
shadowBlur: 20,
},
emphasis: {
areaColor: '#0c274b',
label: {
color: '#fff'
},
},
}
}
]
};
}
//点击事件,根据点击某个省份计算出这个省份的数据
myChart.on('click', (params) => {
console.log(params.name);
});
myChart.setOption(option);效果图:
以上echarts图表均为echarts图表集 网站里的模板引进自己项目进行使用的，大家可以去此网站找到适合自己项目的图表。
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
12
0- 0
已为社区贡献3条内容
所有评论(0)