vue echarts自定义地图

地理坐标组件

自定义地图（eg:在吉林省地图上添加公主岭、梅河口）

 

1、不采用echarts 默认的js,json 数据

2、使用 geojson（网址：http://geojson.io/#map=8/43.127/123.992）

3、Geojson 数据格式：

{

  "type": "FeatureCollection",

  "features": [

    {

      "type": "Feature",

      "properties": {}, 注明所画城市

      "geometry": {

        "type": "Polygon",

        "coordinates": [

          [

            [

              123.98345947265624,

              43.94537239244209

            ],

            [

              123.93402099609374,

              43.65594991256823

            ],

            [

              124.58221435546875,

              43.305193797650546

            ],

            [

              125.06011962890624,

              43.45291889355465

            ],

            [

              125.0958251953125,

              43.765143524274066

            ],

            [

              124.45312499999999,

              43.96119063892024

            ],

            [

              123.98345947265624,

              43.94537239244209

            ]

          ]

        ]

      }

    }

  ]

}

4、Coordinates, properties[cp]  在注册地图之前转换成json格式

for ( var i = 0; i < res. data. features. length; i++) {

if ( res. data. features[ i]. geometry. coordinates != "") {

res. data. features[ i]. geometry. coordinates = JSON. parse( res. data. features[ i]. geometry. coordinates);

}

if ( res. data. features[ i]. properties. cp != "") {

res. data. features[ i]. properties. cp = JSON. parse( res. data. features[ i]. properties. cp);

}

}

实例代码：vue  echarts 地图组件

< template >

< div >

< div :style="{width: '90%',height: height,}" class= "map" ref= "myEchart" ></ div >

</ div >

</ template >

< script >

import api from '@/fetch/api'

import echarts from 'echarts'

export default {

props: {

areaCode: {

type: String,

default: "22"

},

max: {

type: String,

default: '500'

},

mapData: {// geo.json数据

type: Object,

default: []

},

list: {

type: Array,

default: []

},

height: {

type: String,

default: document. documentElement. clientHeight- 320+ 'px'

}

},

data() {

return {

chart: null,

chartData: [],

option: {

title : {

left: 'center',

textStyle:{

fontSize: 16,

}

}

},

}

},

mounted() {

this. initChart();

},

methods: {

initChart() { // 初始化

this. chart = echarts. init( this. $refs. myEchart);

this. getAreaMapInfoList();

},

getAreaMapInfoList () { // 获取地图数据

for( var i= 0; i< this. mapData. features. length; i++ ){

let name = this. mapData. features[ i]. properties. name;

let code = this. mapData. features[ i]. properties. code;

let cp = this. mapData. features[ i]. properties. cp;

var totalCount = 0;

for( var j= 0; j< this. list. length; j++ ){

if( this. list[ j]. code == code){

totalCount = this. list[ j]. entNum;

break;

}

}

this. chartData. push({

name: name,

value: cp. concat( totalCount),

code: code

});

}

//注册地图

echarts. registerMap( 'jilin', this. mapData);

this. renderMap( 'jilin', this. chartData);

},

renderMap( map, data){ //绘制地图

this. option. title. subtext = "";

//地理坐标系组件

this. option. geo = { //引入地图 ，渲染地图凹凸显示

map: map,

label: {

normal: {

show: true,

color: '#fff'

},

emphasis: {

show: false,

color: '#fff'

}

},

roam: false, //禁止缩放

zoom: 1,

itemStyle: {

normal: {

borderColor: '#387ba7', //地图边界线的颜色

areaColor: '#1c3c63', //地图整体区域的颜色

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

shadowBlur: 10,

shadowOffsetX: 10

},

emphasis: {

areaColor: '#132845' //鼠标滑过的颜色

}

}

},

// 地图标点

this. option. series = [

{

name: '点',

type: 'scatter',

coordinateSystem: 'geo',

symbol: 'pin', //关系图节点标记的图形

symbolSize: [ 30, 30],

symbolOffset: [ 0, '-40%'], //关系图节点标记相对于原本位置的偏移。[0, '50%']

large : true,

label: {

normal: {

show: true,

textStyle: {

color: '#fff',

fontSize: 9,

}

}

},

itemStyle : { //===============图形样式，有 normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。

normal : { //默认样式

label : {

show : true

},

borderType : 'solid', //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。

borderColor : 'rgba(255,215,0,0.4)', //设置图形边框为淡金色,透明度为0.4

borderWidth : 2, //图形的描边线宽。为 0 时无描边。

opacity : 1

// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5

},

emphasis : { //高亮状态

}

},

lineStyle : { //==========关系边的公用线条样式。

normal : {

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

width : '3',

type : 'dotted', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）

curveness : 0.3, //线条的曲线程度，从0到1

opacity : 1

// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5

},

emphasis : { //高亮状态

}

},

label : { //=============图形上的文本标签

normal : {

show : true, //是否显示标签。

position : 'inside', //标签的位置。['50%', '50%'] [x,y]

textStyle : { //标签的字体样式

color : '#cde6c7', //字体颜色

fontStyle : 'normal', //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜

fontWeight : 'bolder', //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...

fontFamily : 'sans-serif', //文字的字体系列

fontSize : 12, //字体大小

}

},

emphasis : { //高亮状态

}

},

edgeLabel : { //==============线条的边缘标签

normal : {

show : false

},

emphasis : { //高亮状态

}

},

zlevel: 12,

data: data,

}

];

//渲染地图

this. chart. setOption( this. option);

}

}

}

</ script >

结果图: