组件为renderjs 组件,在PC上可以正常点击,但是在移动端无法触发click事件。
import echarts from "echarts"
import chinaJson from "./config.js"
export default {
props: {
mapData:{
default:function(){
return [];
},
type:Array
}
},
data() {
return {
}
},
mounted() {
let vm =this;
this.$nextTick(function(){
vm.createMap()
})
},
methods: {
createMap(){
var params = {
names: [//把各个大区的省份用二维数组分开
['北京','天津','河北','山西','内蒙古'],
["黑龙江","吉林","辽宁"],
['山东','江苏','安徽','江西','浙江','福建','上海'],
['河南','湖北','湖南'],
['广东','广西','海南'],
['重庆','四川','云南','西藏','贵州'],
['陕西','甘肃','青海','宁夏','新疆'],
['香港','澳门','台湾']
],
properties: {//自定义大区的名字,要和上面的大区省份一一对应
name: ['华北','东北','华东','华中','华南','西南','西北','港澳台'],
cp: [//经纬度可以自己随意定义,如'东北'等在地图的位置
[134.47,47.78],
[126.32,43.50],
[121.28,31.13],
[114.20,30.32],
[113.15,23.08],
[104.04,30.39],
[103.49,36.03],
[103.49,56.03]
]
}
};
this.mergeProvinces(chinaJson, params.names, params.properties);
echarts.registerMap('china', chinaJson); // 注册地图
//var pRChart = echarts.init(this.$refs.ChinaMap.$el);
var pRChart = echarts.init(document.getElementById("echart"));
let option={
geo:this.geo(),
tooltip:this.tooltips(),
series:this.series(),
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
};
pRChart.setOption(option,true);
},
tooltips(){
return {
trigger: 'item',
backgroundColor: '#fff',
padding: 0,
//geoIndex: 0,
textStyle:{
color: '#333'
},
formatter: function (params) {
var style = `
<style>
.title{background:#f1f4fc;line-height:25px;text-align:center;padding:5px 10px;}
table{width:100%;text-align:center;border-collapse:collapse;}
table td{border-right:1px solid #ddd;border-bottom:1px solid #ddd;padding:5px 10px;}
table td:last-child{border-right:0;}
</style>
`
var title = `<div class="title">${params.name}</div><table>`,
con = '',
bottom = '</table>';
if(params.data) {
var arr = params.data.value
for(var i = 0; i < arr.length; i++) {
con += `<tr><td>${arr[i][0]}</td><td>${arr[i][1]}</td><td>${arr[i][2]}</td></tr>`
}
}
return style + title + con + bottom
}
};
},
geo(){
return [
{
map: 'china',
top: 0,
bottom: 0,
roam: true,//禁止拖拽和伸缩
regions: [
{
name:"东北",
itemStyle: {
areaColor: "#123",
color: "#678",
}
},
{
name:"华北",
itemStyle: {
areaColor: "#234",
color: "#678",
}
},
{
name:"华南",
itemStyle: {
areaColor: "#345",
color: "#678",
}
},
{
name:"华东",
itemStyle: {
areaColor: "#456",
color: "#678",
}
},
{
name:"西南",
itemStyle: {
areaColor: "#567",
color: "#678",
}
},
{
name:"西北",
itemStyle: {
areaColor: "#678",
color: "#678",
}
},
] // 设置单独的样式。
}];
},
series(){
return [
{
name: '大区',//城市
type: 'map',
map: 'china',
geoIndex: 0,
aspectScale: 0.75, //长宽比
symbolSize: 20,
data: this.mapData,
showLegendSymbol: true, // 存在legend时显示
label: {
normal: {
show: false,
areaColor:"#333",
textStyle: {
color: '#333'
}
},
emphasis: {//鼠标放上去时的状态
show: false,
textStyle: {
color: '#333'
}
}
},
roam: true,//禁止拖拽和伸缩
itemStyle: {
normal: {
areaColor: '#d3dae1',
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
areaColor: '#3c55b7'
}
}
}
] ;
},
mergeProvinces(chinaJson, names, properties){
var features = chinaJson.features;
var polygons = [];
var polygons2 = [];
for(var i = 0; i < names.length; i++) {
var polygonsCoordinates = [];
var polygonsEncodeOffsets = [];
for(var z = 0; z < names[i].length;z++){
for(var j = 0; j < features.length; j++) {
if(features[j].properties.name.indexOf(names[i][z])>-1) {
if(features[j].geometry.coordinates[0].constructor == String){//合并coordinates
for(var l = 0; l<features[j].geometry.coordinates.length;l++){
polygonsCoordinates.push(features[j].geometry.coordinates[l]);
}
}else if(features[j].geometry.coordinates[0].constructor == Array){
for(var k=0;k<features[j].geometry.coordinates.length;k++){
for(var d=0;d<features[j].geometry.coordinates[k].length;d++){
polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);
}
}
}
if (typeof features[j].geometry.encodeOffsets =="undefined"){
continue;
}
if(features[j].geometry.encodeOffsets[0].constructor == String){//合并encodeOffsets
polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets);
}else if(features[j].geometry.encodeOffsets[0].constructor == Array){
for(var k=0;k<features[j].geometry.encodeOffsets.length;k++){
if(features[j].geometry.encodeOffsets[k][0].constructor == Array){
for(var e=0;e<features[j].geometry.encodeOffsets[k].length;e++){
polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k][e]);
}
}else{
polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k]);
}
}
}
break;
}
}
}
polygons.push(polygonsCoordinates);
polygons2.push(polygonsEncodeOffsets);
}
// 构建新的合并区域
var features = [];
for(var a = 0;a<names.length;a++){
var feature = {
id: features.length.toString(),
type: "FeatureCollection",
geometry: {
type: "Polygon",
coordinates: polygons[a],
encodeOffsets: polygons2[a]
},
properties: {
name: properties.name[a] || "",
childNum:polygons[a].length
}
};
if(properties.cp[a]) {
feature.properties.cp = properties.cp[a];
}
// 将新的合并区域添加到地图中
features.push(feature);
}
chinaJson.features = features;
},
},
};
2 个回复
alchemist - 010
请问解决了吗
alchemist - 010
弄好了,echarts的版本太高引起的
1***@qq.com
是哪个版本
2021-01-11 22:04