},

beforeDestroy() {if(!this.chart) {return;

}this.chart.dispose(); //销毁echart实例this.chart= null;

},

methods: {

ByRequired(world){this.$nextTick(()=>{varmyChart=this.$echarts.init(this.$refs.WorldEchart);

echarts.registerMap('dalian', world,{});

myChart.setOption({

series: [{

name:'大连市',

label: {

normal: {

show:true,

},

emphasis: {

show:true}

},

itemStyle: {

color:'#ddb926'},

type:'map',

zoom:1,//缩放比例能控制echart图形在dom中的大小

roam:true,

mapType:'dalian',

emphasis: {

label: {

show:true}

},//文本位置修正

textFixed: {

Alaska: [20,-20]

},

data: [{

name:'瓦房店市',

value:4822023},

{

name:'普兰店市',

value:731449},

{

name:'庄河市',

value:6553255},

{

name:'金州区',

value:949131},

{

name:'长海县',

value:8041430},

{

name:'甘井子区',

value:5187582},

{

name:'沙河口区',

value:3590347},

{

name:'西岗区',

value:917092},

{

name:'中山区',

value:632323},

{

name:'旅顺口区',

value:9317568}

]

}],//右下角数值条

visualMap: {

left:'right',

min:1,

max:100,

inRange: {

color: ['#313695','#4575b4','#74add1','#abd9e9','#e0f3f8','#ffffbf','#fee090','#fdae61','#f46d43','#d73027','#a50026']

},//text: ['High', 'Low'], // 文本，默认为数值文本

calculable:true},

tooltip: {

trigger:'item',

showDelay:0,

transitionDuration:0.2,

formatter:function(params) {varvalue=(params.value+'').split('.');

value=value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,'$1,');returnparams.seriesName+'
'+params.name+':'+value;

}

},

});

})

},

ByStaticJson() {

let myChartbyjson=echarts.init(this.$refs.ChinaEchart);//这里是为了获得容器所在位置

varmapJsonPath= "/static/china.json";//json文件的相对路径

$.get(mapJsonPath,function(mapJson) {

echarts.registerMap("china", mapJson);//注册地图

let option={

zoom:2,

series: [{

name:this.selCity,

itemStyle:{

normal:{

label:{

show:true,

textStyle: {

color:"#231816"}

},

areaStyle:{color:'#B1D0EC'},

color:'#ff0000',

borderColor:'#dadfde'//区块的边框颜色

},

emphasis:{//鼠标hover样式

label:{

show:true,

textStyle:{

color:'#fa4f04'}

}

}

},

type:"map",

mapType:"china",//自定义扩展图表类型

label: {

show:true,

},

}, ],

};

myChartbyjson.setOption(option);

myChartbyjson.on('click',function(param) {

alert(param.name);//遍历取到provincesText 中的下标 去拿到对应的省js

for(vari= 0; i

//showProvince(provinces[i]) ;

showProvince(provinces[i],provincesText[i])break;

}

}

});

});

},

ByGeoRegister() {

let myChart=echarts.init(this.$refs.YunnanEChart);//这里是为了获得容器所在位置

window.οnresize=myChart.resize;

myChart.setOption({//进行相关配置

backgroundColor:"#02AFDB",

tooltip: {},//鼠标移到图里面的浮动提示框

dataRange: {

show:false,

min:0,

max:1000,

text: ['High','Low'],

realtime:true,

calculable:true,

color: ['orangered','yellow','lightskyblue']

},

geo: {//这个是重点配置区

map:'云南',//表示中国地图

roam:true,

label: {

normal: {

show:true,//是否显示对应地名

textStyle: {

color:'rgba(0,0,0,0.4)'}

}

},

itemStyle: {

normal: {

borderColor:'rgba(0, 0, 0, 0.2)'},

emphasis: {

areaColor:null,

shadowOffsetX:0,

shadowOffsetY:0,

shadowBlur:20,

borderWidth:0,

shadowColor:'rgba(0, 0, 0, 0.5)'}

}

},

series: [{

type:'scatter',

coordinateSystem:'geo' //对应上方配置

},

{

name:'启动次数',//浮动框的标题

type:'map',

geoIndex:0,

data: [{"name":"北京","value":599}, {"name":"上海","value":142}, {"name":"黑龙江","value":44}, {"name":"深圳","value":92}, {"name":"湖北","value":810}, {"name":"四川","value":453}]

}

]

})

},

ByMapName() {

let that= this;this.mychart= this.$echarts.init(this.$refs.GuangXiEChart);//绘制图表

this.mychart.setOption({

backgroundColor:"#404a59",

zoom:2,

title: {

text:"福建",

top:25,

left:"center",

textStyle: {

fontSize:25,

fontWeight:650,

color:"#fff",

},

},

tooltip: {

trigger:"item",

formatter:function(val) {return "
人数:" + 1 + "人";

},

},

toolbox: {

show:true,

orient:"vertical",

left:"right",

top:"center",

feature: {

dataView: {

readOnly:false},

restore: {},

saveAsImage: {},

},

},

series: [{

type:"map",

map:"福建",//这里需要注意呀,

//mapType: "浙江",

//是否开启鼠标缩放和平移漫游 默认不开启

itemStyle: {

normal: {

areaColor:"#323c48",

borderColor:"#111",

},

emphasis: {

areaColor:"#2a333d",

label: {

show:true,

color:"white",

},

},

},

roam:true,

top:70,

label: {

show:true,//是否显示对应地名

},

data:this.cityDatas,

}, ],

});this.mychart.on("click",function(params) { //地图添加点击事件，当点击区域块的时候，params.name能够取到区域的名称：云南，北京...

alert(params.data.code);

console.log(JSON.stringify(params));

});

}

}

}

}.box{width:50%;height:50%;float:left;line-height:inherit;

}