vue echarts引入中国地图使用散点地图
要使用4.1.0版本的echarts！！！ 否则报Map china not exists. The GeoJSON of the map must be provided安装：npm install echarts@4.1.0 --save引入：import * as echarts from 'echarts'import 'echarts/map/js/china'Vue.prototype
·
要使用4.1.0版本的echarts！！！ 否则报Map china not exists. The GeoJSON of the map must be provided
安装：
npm install echarts@4.1.0 --save
引入：
import * as echarts from 'echarts'
import 'echarts/map/js/china'
Vue.prototype.$echarts = echarts;
使用：
<template>
<div ref="chart" class="mapChart" style="width: 100%; height: 75vh"></div>
</template>
<script>
export default {
name: "mapChina",
data() {
return {
cityData: [],
regions: [
{
name: "南海诸岛",
itemStyle: {
areaColor: "#6F798D",
opacity: 0.65,
},
},
{
name: "北京",
itemStyle: {
areaColor: "#034DE4",
opacity: 0.65,
},
},
{
name: "天津",
itemStyle: {
areaColor: "#034DE4",
opacity: 0.65,
},
},
{
name: "上海",
itemStyle: {
areaColor: "#27E9FD",
opacity: 0.65,
},
},
{
name: "重庆",
itemStyle: {
areaColor: "#0E7DEB",
opacity: 0.65,
},
},
{
name: "河北",
itemStyle: {
areaColor: "#034DE4",
opacity: 0.65,
},
},
{
name: "河南",
itemStyle: {
areaColor: "#034DE4",
opacity: 0.65,
},
},
{
name: "云南",
itemStyle: {
areaColor: "#20CAF8",
opacity: 0.65,
},
},
{
name: "辽宁",
itemStyle: {
areaColor: "#034DE4",
opacity: 0.65,
},
},
{
name: "黑龙江",
itemStyle: {
areaColor: "#17A3F1",
opacity: 0.65,
},
},
{
name: "湖南",
itemStyle: {
areaColor: "#0554E4",
opacity: 0.65,
},
},
{
name: "安徽",
itemStyle: {
areaColor: "#27E8FD",
opacity: 0.65,
},
},
{
name: "山东",
itemStyle: {
areaColor: "#4BFFFF",
opacity: 0.65,
},
},
{
name: "新疆",
itemStyle: {
areaColor: "#17A3F1",
opacity: 0.65,
},
},
{
name: "江苏",
itemStyle: {
areaColor: "#00b6f6",
opacity: 0.65,
},
},
{
name: "浙江",
itemStyle: {
areaColor: "#00b6f6",
opacity: 0.65,
},
},
{
name: "江西",
itemStyle: {
areaColor: "#01a4f1",
opacity: 0.65,
},
},
{
name: "湖北",
itemStyle: {
areaColor: "#005ce5",
opacity: 0.65,
},
},
{
name: "广西",
itemStyle: {
areaColor: "#0088ec",
opacity: 0.65,
},
},
{
name: "甘肃",
itemStyle: {
areaColor: "#0042df",
opacity: 0.65,
},
},
{
name: "山西",
itemStyle: {
areaColor: "#01d0fa",
opacity: 0.65,
},
},
{
name: "内蒙古",
itemStyle: {
areaColor: "#00ccf7",
opacity: 0.65,
},
},
{
name: "陕西",
itemStyle: {
areaColor: "#01b0f3",
opacity: 0.65,
},
},
{
name: "吉林",
itemStyle: {
areaColor: "#0051e1",
opacity: 0.65,
},
},
{
name: "福建",
itemStyle: {
areaColor: "#0158e3",
opacity: 0.65,
},
},
{
name: "贵州",
itemStyle: {
areaColor: "#0199ef",
opacity: 0.65,
},
},
{
name: "广东",
itemStyle: {
areaColor: "#00d9fc",
opacity: 0.65,
},
},
{
name: "青海",
itemStyle: {
areaColor: "#005ae4",
opacity: 0.65,
},
},
{
name: "西藏",
itemStyle: {
areaColor: "#01e9fd",
opacity: 0.65,
},
},
{
name: "四川",
itemStyle: {
areaColor: "#0069e8",
opacity: 0.65,
},
},
{
name: "宁夏",
itemStyle: {
areaColor: "#01b0f3",
opacity: 0.65,
},
},
{
name: "海南",
itemStyle: {
areaColor: "#00f0ff",
opacity: 0.65,
},
},
{
name: "台湾",
itemStyle: {
areaColor: "#0067e7",
opacity: 0.65,
},
},
{
name: "香港",
itemStyle: {
areaColor: "#00dafa",
opacity: 0.65,
},
},
{
name: "澳门",
itemStyle: {
areaColor: "#00dafa",
opacity: 0.65,
},
},
],
};
},
created() {
this.getData();
},
methods: {
getData() {
// api.stationCovers().then((res) => {
// console.log(res);
// if (res === 0) {
// 假设接口返回的散点的数据
this.cityData = [
{ name: "海门", value: 9, location: [121.15, 31.89] },
{ name: "鄂尔多斯", value: 12, location: [109.781327, 39.608266] },
{ name: "招远", value: 12, location: [120.38, 37.35] },
{ name: "舟山", value: 12, location: [122.207216, 29.985295] },
{ name: "齐齐哈尔", value: 14, location: [123.97, 47.33] },
{ name: "盐城", value: 15, location: [120.13, 33.38] },
{ name: "赤峰", value: 16, location: [118.87, 42.28] },
{ name: "青岛", value: 18, location: [120.33, 36.07] },
{ name: "乳山", value: 18, location: [121.52, 36.89] },
{ name: "金昌", value: 19, location: [102.188043, 38.520089] },
{ name: "泉州", value: 21, location: [118.58, 24.93] },
{ name: "莱西", value: 21, location: [120.53, 36.86] },
{ name: "日照", value: 21, location: [119.46, 35.42] },
{ name: "胶南", value: 22, location: [119.97, 35.88] },
{ name: "南通", value: 23, location: [121.05, 32.08] },
{ name: "拉萨", value: 24, location: [91.11, 29.97] },
{ name: "云浮", value: 24, location: [112.02, 22.93] },
{ name: "梅州", value: 25, location: [116.1, 24.55] },
{ name: "文登", value: 25, location: [122.05, 37.2] },
{ name: "上海", value: 25, location: [121.48, 31.22] },
];
this.$nextTick(() => {
this.$echarts.init(this.$refs.chart).setOption({
tooltip: {
trigger: "item",
},
geo: {
map: "china",
show: true,
roam: true, //拖拽和伸缩
label: {
emphasis: {
show: false,
},
},
itemStyle: {
/* normal: {
//地图背景色
areaColor: "#034DE4",
opacity: 0.65,
}, */
emphasis: {
//鼠标放上去区域背景色
areaColor: "#034DE4",
opacity: 0.7,
},
},
regions: this.regions, // 给每个省份的区域加上背景色
},
series: {
// name: "电站投放地",
type: "effectScatter",
coordinateSystem: "geo",
data: this.convertData(this.cityData),
symbolSize: function (val) {
//设置散点大小
return val[2] / (val[2] / 10);
},
showEffectOn: "render", //配置何时显示特效。可选：'render' 绘制完成后显示特效
rippleEffect: {
//涟漪特效相关配置
brushType: "stroke", //波纹的绘制方式，可选 'stroke' 和 'fill'
},
hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果
label: {
//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
normal: {
formatter: "{b}",
position: "right",
show: false,
},
},
itemStyle: {
//图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时
normal: {
color: "#0bfb50", //散点的颜色
shadowBlur: 10,
shadowColor: 20,
fontSize: "12px",
},
},
zlevel: 1,
},
});
});
// }
// });
},
// 数据处理
convertData(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
let geoCoord = data[i].location;
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
},
},
};
</script>
<style lang="less" scoped>
</style>
效果：
但是现在也有个遗留问题，缩放或拖动地图时，会报Unable to preventDefault inside passive event listener invocation. ，如您遇到解决办法，请指教
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献8条内容
所有评论(0)