import
import echarts from "echarts"; import elementResizeDetector from "element-resize-detector" //窗口变化时，刷新图表，保持大小可观template
<template> <div ref="chart" :style="{width:'100%',height:height+'px'}" ></div> </template>mount方法中添加绘图方法
mounted() { let erd = elementResizeDetector(); let _this = this; _this.myChart = echarts.init(_this.$refs.chart); erd.listenTo(_this.$refs.chart_, function (element) { let width = element.offsetWidth let height = element.offsetHeight _this.$nextTick(function () { //使echarts尺寸重置 _this.myChart.resize(); }) }) _this.myChart.on('click', function (params) { _this.$emit("clickMap", this.city); }.bind(_this)) this.height = this.$refs.chart_.offsetHeight - 10; this.init(); }int方法里面
echarts.registerMap('Map', mapJson); //注册对应的地图参数 //这里加true是为了让地图重新绘制，不然如果你有筛选的时候地图会飞出去 let _this = this; this.myChart.setOption({ backgroundColor: '#fff', tooltip: { trigger: "item", formatter: p => { let data = p.data; let txtCon = `${p.name}<br><hr>${_this.kpiArr.filter(item =>{ return _this.kpiName ==item.name })[0].show} : ${data.dra? data.dra : '-'}<br>抢修中 : ${ data.ing? data.ing : '-'}<br>已恢复 : ${data.rec? data.rec : '-'}`; //已恢复 : ${data.rec? data.rec : '-' return txtCon; } }, title: { show: false, x: "left", y: "top", text: this.cityName, textStyle: { color: "#515a6e", fontSize: 16 } }, visualMap: { min: 0, max: visualMapMax == 0 ? 10 : visualMapMax, text: ['', ''], realtime: false, calculable: true, inRange: { color: ['lightskyblue', 'yellow', 'orangered'] } }, //这里可以添加echarts内置的，例如下载图片等 /*toolbox: { feature: { dataView: { show: false, readOnly: true }, magicType: { show: false, type: ["line", "bar"] }, restore: { show: false }, saveAsImage: { show: true, name: this.cityName + "地图", pixelRatio: 2 } }, iconStyle: { normal: { borderColor: "#41A7DE" } }, itemSize: 15, top: 20, right: 22 },*/ /* dataRange: { right: "2%", bottom: "3%", icon: "circle", align: "left", splitList: [{ start: 0, end: 0, label: '未发生', color: "#6ead51" }, { start: 0, end: 250, label: '0-150', color: "#92b733" }, { start: 250, end: 500, label: '250-500', color: "#c4aa29" }, { start: 500, end: 750, label: '500-750', color: "#ce6c2b" }, { start: 750, label: '750以上', color: "#c92626" } ], textStyle: { color: "#0fccff", fontSize: 16 } },*/ series: [{ name: "地图", type: "map", map: "Map", roam: true, //是否可缩放 zoom: 1.1, //缩放比例 data: mapData, /* itemStyle: { normal: { show: true, areaColor: '#e3efff', borderColor: '#fff', borderWidth: '1', }, emphasis: { //对应的鼠标悬浮效果 show: false, areaColor:"#729fff",//提示标签背景颜色 textStyle: { color: "#2c3e50" //729fff } } },*/ label: { normal: { show: true, //显示省份标签 textStyle: { color: "#2c3e50", //省份标签字体颜色 fontSize: 12 } }, emphasis: { //对应的鼠标悬浮效果 show: false, areaColor:"#729fff",//提示标签背景颜色 textStyle: { color: "#2c3e50" //729fff } } } }] }, true)mapJson 参见echarts示例 ：https://gallery.echartsjs.com/editor.html?c=xz3jGj90ns
遭遇问题 因为使用了visualMap，地图色块渐变色处理机制，一定要避免visualMap匹配的值不是undefined；同时使用visualMap时候注意最大值，最小值的设置。 补充：
this.myChart.setOption({ backgroundColor: '#fff', title: { show: false, x: "left", y: "top", text: '', textStyle: { color: "#515a6e", fontSize: 16 } }, // geo 是effectScatter 和 scatter绘制图形的坐标系，上图实质涉及两个图层一个是纯粹的地理坐标图geo，一个是咱们加好的地图，地理坐标图上只有关于地理坐标的名称信息，其它信息均无。 geo: { map: "Map", label: { textStyle: { fontSize: '.1rem', } }, itemStyle: { normal: { areaColor:"#e3f4ff",// '#e3efff', borderColor: '#fff' }, emphasis: { areaColor: "#e3f4ff", //'#e3efff' } } }, series: [effectScatter,{ zlevel: 0, name: "地图", type: "map", map: "Map", /* roam: 'scale', //是否可缩放 zoom: 1.2, //缩放比例*/ data: mapData, label: { normal: { show: true, //显示省份标签 textStyle: { color: "#2c3e50", //省份标签字体颜色 fontSize: 16 } }, emphasis: { //对应的鼠标悬浮效果 show: false, areaColor:"#e3f4ff",//提示标签背景颜色 textStyle: { color: "#2c3e50" //729fff } } }, itemStyle: { normal: { areaColor: "#e3f4ff", borderColor: "#fff", borderWidth: '2', }, emphasis: { } } },scatter] }, true) let effectScatter = { name: '定位点', type: 'effectScatter', // 散点图 coordinateSystem: 'geo', // 使用地理坐标系 hoverAnimation: 'false', legendHoverLink: 'false', rippleEffect: { period: 4, brushType: 'stroke', scale: 3 }, data:[], itemStyle: { normal: { color: '#5599E4', } }, // zlevel: 1, }; //定位点 let scatter = { name: '点', type: 'scatter', coordinateSystem: 'geo', symbol: 'pin', symbolSize: 25, label: { normal: { show: true, formatter: p => { let data = p.value[2]; return data; }, textStyle: { color: '#fff', fontSize: 9, } } }, itemStyle: { normal: { color: '#F62157', //标志颜色 } }, //zlevel: 6, data: [] }; //标记可以用markPoint在同一个图层上打点，此处用两个图层可以方便绘制出动态的点，带涟漪效果，但是如果图层拖拽或者放大缩小，两图层表现不一致
