echarts地图
场景需要划入显示当前城市的值，和散点的值，当前城市排名前3名
地图组件
<template>
<div id="mapChart" class="mapChart"></div>
</template>
<script>
import mapgeoCoord from "@/utils/geoCoord.js";
export default {
name: "mapChart",
data() {
return {
dom: null,
geoCoordMap: "",
myData: [],
beijing:'',
tianjing:'',
shanghai:'',
chongqing:''
};
},
props: {
cityData: {
type: Array,
default: []
}
},
watch: {
cityData: {
handler(nVal, oVal) {
if (this.dom) {
if (nVal) {
this.setOption(nVal);
} else {
this.setOption(oVal);
}
} else {
this.init();
}
},
deep: true
}
},
created() {
this.regions = [
//给每个省份的区域加上背景色
{
name: "南海诸岛",
itemStyle: {
areaColor: "#6F798D",
opacity: 0.5
}
},
{
name: "北京",
itemStyle: {
areaColor: "#034DE4",
opacity: 0.2
}
},
{
name: "天津",
itemStyle: {
areaColor: "#034DE4",
opacity: 0.2
}
},
{
name: "上海",
itemStyle: {
areaColor: "#27E9FD",
opacity: 0.2
}
},
{
name: "重庆",
itemStyle: {
areaColor: "#0E7DEB",
opacity: 0.2
}
},
{
name: "河北",
itemStyle: {
areaColor: "#034DE4",
opacity: 0.2
}
},
{
name: "河南",
itemStyle: {
areaColor: "#034DE4",
opacity: 0.2
}
},
{
name: "云南",
itemStyle: {
areaColor: "#20CAF8",
opacity: 0.2
}
},
{
name: "辽宁",
itemStyle: {
areaColor: "#034DE4",
opacity: 0.2
}
},
{
name: "黑龙江",
itemStyle: {
areaColor: "#17A3F1",
opacity: 0.2
}
},
{
name: "湖南",
itemStyle: {
areaColor: "#0554E4",
opacity: 0.2
}
},
{
name: "安徽",
itemStyle: {
areaColor: "#27E8FD",
opacity: 0.2
}
},
{
name: "山东",
itemStyle: {
areaColor: "#4BFFFF",
opacity: 0.2
}
},
{
name: "新疆",
itemStyle: {
areaColor: "#17A3F1",
opacity: 0.2
}
},
{
name: "江苏",
itemStyle: {
areaColor: "#00b6f6",
opacity: 0.2
}
},
{
name: "浙江",
itemStyle: {
areaColor: "#00b6f6",
opacity: 0.2
}
},
{
name: "江西",
itemStyle: {
areaColor: "#01a4f1",
opacity: 0.2
}
},
{
name: "湖北",
itemStyle: {
areaColor: "#005ce5",
opacity: 0.2
}
},
{
name: "广西",
itemStyle: {
areaColor: "#0088ec",
opacity: 0.2
}
},
{
name: "甘肃",
itemStyle: {
areaColor: "#0042df",
opacity: 0.2
}
},
{
name: "山西",
itemStyle: {
areaColor: "#01d0fa",
opacity: 0.2
}
},
{
name: "内蒙古",
itemStyle: {
areaColor: "#00ccf7",
opacity: 0.2
}
},
{
name: "陕西",
itemStyle: {
areaColor: "#01b0f3",
opacity: 0.2
}
},
{
name: "吉林",
itemStyle: {
areaColor: "#0051e1",
opacity: 0.2
}
},
{
name: "福建",
itemStyle: {
areaColor: "#0158e3",
opacity: 0.2
}
},
{
name: "贵州",
itemStyle: {
areaColor: "#0199ef",
opacity: 0.2
}
},
{
name: "广东",
itemStyle: {
areaColor: "#00d9fc",
opacity: 0.2
}
},
{
name: "青海",
itemStyle: {
areaColor: "#005ae4",
opacity: 0.2
}
},
{
name: "西藏",
itemStyle: {
areaColor: "#01e9fd",
opacity: 0.2
}
},
{
name: "四川",
itemStyle: {
areaColor: "#0069e8",
opacity: 0.2
}
},
{
name: "宁夏",
itemStyle: {
areaColor: "#01b0f3",
opacity: 0.2
}
},
{
name: "海南",
itemStyle: {
areaColor: "#00f0ff",
opacity: 0.2
}
},
{
name: "台湾",
itemStyle: {
areaColor: "#0067e7",
opacity: 0.2
}
},
{
name: "香港",
itemStyle: {
areaColor: "#00dafa",
opacity: 0.2
}
},
{
name: "澳门",
itemStyle: {
areaColor: "#00dafa",
opacity: 0.2
}
}
];
},
mounted() {
this.$nextTick(() => {
this.init();
});
var myData = JSON.parse(JSON.stringify(this.cityData));
var ary = [];
myData.map((item, index) => {
var obj = {};
if (item.name) {
if(item.name == '北京市'){
this.beijing = item.value
}
if(item.name == '天津市'){
this.tianjing = item.value
}
if(item.name == '上海市'){
this.shanghai = item.value
}
if(item.name == '重庆市'){
this.chongqing = item.value
}
if (item.name.indexOf("省") != -1) {
obj.name = item.name.replace("省", "");
}
if (item.name.indexOf("内蒙古") != -1) {
obj.name = "内蒙古";
}
if (item.name.indexOf("自治区") != -1) {
if (item.name.indexOf("宁夏") != -1) {
obj.name = "宁夏";
}
if (item.name.indexOf("广西") != -1) {
obj.name = "广西";
}
if (item.name.indexOf("新疆") != -1) {
obj.name = "新疆";
}
if (item.name.indexOf("内蒙古") != -1) {
obj.name = "内蒙古";
}
if (item.name.indexOf("西藏") != -1) {
obj.name = "西藏";
}
}
if (item.name.indexOf("行政区") != -1) {
if (item.name.indexOf("香港") != -1) {
obj.name = "香港";
}
if (item.name.indexOf("澳门") != -1) {
obj.name = "澳门";
}
}
}
obj.value = item.value;
this.myData.push(obj);
});
},
methods: {
init() {
// 基于准备好的dom，初始化echarts实例
this.geoCoordMap =
mapgeoCoord.geoCoord; /* mapgeoCoord.geoCoord this.geoCoordMap*/
this.dom = this.$echarts.init(document.getElementById("mapChart"));
this.setOption(this.cityData);
var that = this;
window.onresize = function() {
setTimeout(() => {
that.dom.resize();
}, 1000);
};
},
convertData(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = this.geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
},
setOption(data) {
var option = {
//散点图标题
tooltip: {
//鼠标放上去提示
trigger: "item",
formatter: (val)=>{
if(val.seriesType != 'map'){
return ''
}else {
let name = val.name;
let value = val.value;
if(name == '北京'){
console.log('北京')
value = this.beijing
}else if(name == '天津'){
value = this.tianjing
}else if(name == '上海'){
value = this.shanghai
}else if(name == '重庆'){
value = this.chongqing
}else if(name == '台湾'){
value = '-'
}else if(name == '南海诸岛'){
value = '-'
}else if(name == '香港'){
value = '-'
}else if(name == '澳门'){
value = '-'
}
return name+"\n"+value
}
}
},
// legend: {},//地图的点
geo: {
//城市地图
map: "china",
show: true,
zoom: 1.2,
roam: false, //禁止拖拽和伸缩 true为可拖拽
label: {
show: false
},
itemStyle: {
normal: {
//地图背景色
areaColor: "#034DE4",
opacity: 0.5
},
emphasis: {
//鼠标放上去区域背景色
areaColor: "#034DE4",
opacity: 0.5
}
},
silent: true,
regions: this.regions //地图上每个省份标不同颜色
},
backgroundColor: "#fff", //地图背景色
series: [
{
name: "区域",
type: "map",
mapType: "china",
roam: false,
zoom: 1.2,
data: this.myData,
label: {
normal: {
textStyle: {
fontSize: 12
}
}
},
itemStyle: {
normal: {
//地图背景色
areaColor: "#ccf5fd",
opacity: 0.2
},
emphasis: {
//鼠标放上去区域背景色
areaColor: "#68b5fe",
opacity: 0.2
}
}
},
{
name: "", //除前三外的城市
type: "effectScatter",
coordinateSystem: "geo",
data: this.convertData(data),
//symbol: point, //散点用背景图片，point为连接的图片地址
symbolSize: function(val) {
//设置散点大小
//alert(val);
return val[2] / (val[2] / 5);
},
label: {
normal: {
formatter: "{b}",
position: "right",
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: "rgba(255,255,255,1)", //除前三外的散点颜色 rgba(255,255,255,1)
shadowBlur: 1,
shadowColor: 0,
fontSize: "6px"
}
}
},
{
name: "", //数据前三的城市
type: "effectScatter",
coordinateSystem: "geo",
data: this.convertData(data.slice(0, 3)),
symbolSize: function(val) {
//设置散点大小
return val[2] / (val[2] / 10);
},
showEffectOn: "render", //配置何时显示特效。可选：'render' 绘制完成后显示特效
rippleEffect: {
//涟漪特效相关配置
brushType: "fill" //波纹的绘制方式，可选 'stroke' 和 'fill'
},
hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果
label: {
//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
normal: {
formatter: "{b}",
position: "right",
show: false
}
},
itemStyle: {
//图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时
normal: {
color: "#ffff00", //前三散点的颜色
shadowBlur: 10,
shadowColor: 20,
fontSize: "12px"
}
},
zlevel: 1
}
]
/* grid: {
x:50,
y:50,
x2:50,
y2:50 //距离下边的距离
}, */
};
this.dom.setOption(option);
}
},
components: {}
};
</script>
<style scoped>
.mapChart {
width: 100%;
height: 80%;
}
</style>
使用的父组件
<template>
<mapChart
v-if="cityData && cityData.length > 0"
:cityData="cityData"
/>
</template>
<script>
import mapChart from "./../components/mapChart";
export default {
name: "homePage",
data() {
return {
cityData: []
}
},
created (){
this.cityMap();
},
methods:{
cityMap(){
this.paramsDate.cpclrqS = this.deviceFormData.time[0];
this.paramsDate.cpclrqE = this.deviceFormData.time[1];
let newObj = { type: val };
this.$http
.post(
this.$api.getProductCountByArea,
Object.assign(newObj, this.paramsDate)
)
.then(res => {
if (res.data.code === 2000) {
this.cityData = [];
let data = res.data.data.rows.filter((item, index) => {
return item.province != "全国";
});
// this.mapSelect = data;
// console.log(data, "地图");
for (var i = 0; i < data.length; i++) {
let item = data[i];
// console.log(item,'地图右侧数据')
this.barCrossData.yAxisData.push(item.province);
this.barCrossData.xAxisData.push(item.allCount);
let newObj = {};
newObj["name"] = item.province;
newObj["value"] = item.allCount;
this.cityData.push(newObj);
}
}
});
}
}
}
</script>
