vue项目中使用echarts教程，请看我上一篇文章。
大量echarts地图示例和带审图号geojson文件下载，在文章最后自取。
效果实现步骤
在项目中用vue实现echarts的一些功能，主要是地理区域数据的可视化的地图方面的。map+scatter+effectScatter，显示geojson的点、线数据。
首选可以通过指定geojson数据初始化地图。
let myChart = null;
let option = null;
export {
myChart,
option,
}
// 初始化区域地图
export function initAreaMap(chartsDomName) {
//每次都重新加载初始化
if(myChart){
option.geo = [];
option.series = [];
myChart.setOption(option,true);// 重新渲染
}
var chartDom = document.getElementById(chartsDomName);
myChart = echarts.init(chartDom);
myChart.showLoading();
//从指定文件获取数据
axios.get('./data/geo/sc-ls-hd.geojson').then(response => {
myChart.hideLoading();
echarts.registerMap('xxxxxx', response.data);
option = {
title: {
show:false,
left: "center",
top: "10",
text: '',
textStyle:{
color:"#0aa7e5",
},
backgroundColor:"#1e5288",
},
grid: {
left: "10px",
right: "5px",
bottom: "5px",
// containLabel: true//grid 区域是否包含坐标轴的刻度标签。
},
//提示框组件。
tooltip: {
trigger: 'item', // item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'坐标轴触发，主要在柱状图
// formatter: '{b}<br/>{c} (万人)' //{a}（系列名称），{b}（区域名称），{c}（合并数值）
formatter:function(params){
if (params.componentSubType === 'map') {
return params.data.name + "<br/>" + params.data.value + '(人)';
}
// 由于是写在最外层的所以需要判断一下当前鼠标是在地图上还是散点上悬浮
else if (params.componentSubType === 'scatter') {
return params.data.name + "<br/>" + params.data.extend + '';
}
else if (params.componentSubType === 'effectScatter') {
return params.data.name + "<br/>" + params.data.extend + '';
}
else{
if(params.seriesId == "zonebreak"){
return (params && params.data && params.data.name) ? (params.data.name + "<br/>" + params.data.groupId ) : '';
}
else{
return (params && params.data && params.data.name) ? (params.data.name + "<br/>" + params.data.activetime ) : '';
}
}
}
},
//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
toolbox: {
show: false,
orient: 'vertical',
left: 'right',
top: 'center',
iconStyle:{
color:'#ffffff'
},
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
//视觉映射组件，visualMap的优先级是最高
visualMap: {
show:false,
min: 2000, //10,
max: 70000, //120,
left:10,
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['#3ea9ff','#0479E0'] //['lightskyblue', 'yellow', 'orangered']
},
seriesIndex: 0, // 仅使第一个series生效,这样仅仅使用map，而不影响scatter、effectScatter
data: [{
name: '系列1',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}],
},
bmap: {
zoom: 1,
roam: false,
mapStyle: {
styleJson: [
{
featureType: 'water',
elementType: 'all',
stylers: {
color: '#d1d1d1'
}
},
{
featureType: 'land',
elementType: 'all',
stylers: {
color: '#f3f3f3'
}
},
{
featureType: 'railway',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'highway',
elementType: 'all',
stylers: {
color: '#fdfdfd'
}
},
{
featureType: 'highway',
elementType: 'labels',
stylers: {
visibility: 'off'
}
},
{
featureType: 'arterial',
elementType: 'geometry',
stylers: {
color: '#fefefe'
}
},
{
featureType: 'arterial',
elementType: 'geometry.fill',
stylers: {
color: '#fefefe'
}
},
{
featureType: 'poi',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'green',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'subway',
elementType: 'all',
stylers: {
visibility: 'off'
}
},
{
featureType: 'manmade',
elementType: 'all',
stylers: {
color: '#d1d1d1'
}
},
{
featureType: 'local',
elementType: 'all',
stylers: {
color: '#d1d1d1'
}
},
{
featureType: 'arterial',
elementType: 'labels',
stylers: {
visibility: 'off'
}
},
{
featureType: 'boundary',
elementType: 'all',
stylers: {
color: '#fefefe'
}
},
{
featureType: 'building',
elementType: 'all',
stylers: {
color: '#d1d1d1'
}
},
{
featureType: 'label',
elementType: 'labels.text.fill',
stylers: {
color: '#999999'
}
}
]
}
},
//地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集
geo: [
{
map: "sc-ls-hd",
zoom:1,
zlevel:1,
layoutCenter: ['57%', '50%'],//定义地图中心在屏幕中的位置，layoutSize 定义地图的大小
layoutSize: '95%',
aspectScale: 1.00,//1.25,//宽高比，高是100，宽是75
// left:"4%",
// right:"2%",
// top:"4%",
// bottom:"2%",
center: [102.7498702, 26.5670195 /* 102.262856,27.895473 */],
label: {
// label 设置文本标签的显示格式，去掉不影响显示地图
normal: {
color: "#ffffff",
fontWeight: 'bold',
show: true, //显示名称
},
},
//默认是 'name'，针对 GeoJSON 要素的自定义属性名称，作为主键用于关联数据点和 GeoJSON 地理要素
// 数据点中的 name：Alabama 会关联到 GeoJSON 中 NAME 属性值为 Alabama 的地理要素{"type":"Feature","id":"01","properties":{"NAME":"Alabama"}, "geometry": { ... }}
nameProperty:'XZQMC',
itemStyle: {
areaColor: "#3EA9FF", //地图区域的颜色(没有数据时会按照这个颜色显示)
borderColor: "#fff", //地图区域的边框
borderWidth: 0.6,
opacity:0.6,
},
emphasis: { //高亮的显示设置
label: {
color: "#fff",
},
itemStyle: {
areaColor: "#00ffff",//"#9DE3FF",
},
},
select: { //选中显示设置
label: {
color: "#fff",
},
itemStyle: {
areaColor: "#00ffff",
},
},
},
],
series: [
//在 ECharts 3 中不再建议在地图类型的图表使用 markLine 和 markPoint。
//如果要实现点数据或者线数据的可视化，可以使用在地理坐标系组件上的散点图和线图。
{
name: '',
type: 'map',
//指定geo属性后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，
//而是采用 geo 中的相应属性。
geoIndex: 0, // map: 'sc-ls',
top:'bottom',
zoom:1,
// layoutCenter: ['50%', '50%'],//定义地图中心在屏幕中的位置，layoutSize 定义地图的大小
// layoutSize: '100%',
// aspectScale: 1.25,//宽高比，高是100，宽是75
roam: false,
label: {
show: true
},
data: [
{"name": "x1","value": 55000},
{"name": "x2","value": 2897},
......
],
},
{
name: '',
type: 'scatter', //散点（气泡）图。直角坐标系上的散点图可以用来展现数据的 x，y 之间的关系
/**
* 'cartesian2d'使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
'polar'使用极坐标系，通过 polarIndex 指定相应的极坐标组件
'geo'使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
'calendar'使用日历坐标系，通过 calendarIndex 指定相应的日历坐标系组件。
*/
coordinateSystem: 'geo', //使用的坐标系,地理坐标系
data: [
],
symbol:'image://' + map_proj,
symbolSize: 28,
/** 以定义 data 的哪个维度被编码成什么 */
encode: {
value: 2
},
labelLine:{
show: false,
postion: 'top'
},
itemStyle: {
color:'#fac858',//
// color:
// {
// type: "radial", // 径向渐变，前三个参数分别是圆心 x, y 和半径
// x: 0.5,
// y: 0.5,
// r: 0.5,
// colorStops: [
// {
// offset: 0.5,
// color: "#fff", // 50% 处的颜色
// },
// {
// offset: 1,
// color: "rgb(0 0 0 / 0%)", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
borderColor: "#fff", //边框白色
borderWidth: 1, //边框宽度
},
label: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
label: {
show: true
}
},
//散点图所有图形的 zlevel 值。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
zlevel: 1,
},
{
name: '建筑项目数据 top5',
//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
type: 'effectScatter',
coordinateSystem: 'geo',
//标记的大小
symbol:'image://' + map_proj,
symbolSize: 36,
encode: {
value: 2
},
//配置何时显示特效。'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
showEffectOn: 'emphasis',
//涟漪特效相关配置
rippleEffect: {
//波纹的绘制方式，可选 'stroke' 和 'fill'
brushType: 'stroke',
},
label: {
formatter: '{b}',
position: 'top',
show: false
},
//图形样式
itemStyle: {
color:'#fac858',
//图形阴影的模糊大小
shadowBlur: 10,
//阴影颜色
shadowColor: 'red'
},
//高亮的图形和标签样式
emphasis: {
//是否开启高亮后的放大效果。从 5.3.2 版本开始支持 number，用以设置高亮的放大倍数，默认放大 1.1 倍。
scale: true,
itemStyle:{
color: '#ff9900'
}
},
zlevel: 2
},
]
};
myChart.setOption(option);
});
}接着，可以在界面里动态加载需要叠加或者替换的geojson数据显示到地图上。
//清空原来载在地图上的数据即scatter+effectScatter，再新叠加一个特效effectScatteroption.series[1].data = [];option.series[2].data = [];if(option.series.length >= 4){let indexNear = option.series.findIndex(item => item.id === "nearbreak");let indexZone = option.series.findIndex(item => item.id === "zonebreak");if(indexNear > -1){this.showCarouseType = "NBREAK";}if(indexZone > -1){this.showCarouseType = "ZBREAK";}}myChart.setOption(option,true);//从指定文件获取数据axios.get('./data/geo/point.json').then(response => {let geoCoorData = [];let queryBusiData = response.data.features;if(queryBusiData != null && queryBusiData.length > 0){let tempValue = [];//转换地图标注数据，并刷新地图for(var k=0;k<queryBusiData.length;k++){tempValue.push(queryBusiData[k].geometry.coordinates[0]);tempValue.push(queryBusiData[k].geometry.coordinates[1]);var tempExtend = "num:" + queryBusiData[k].properties['num'];geoCoorData.push({name: "name:" + queryBusiData[k].properties['name'],value: tempValue,extend:tempExtend});tempValue = [];}}option.series.push({name: '点数据',type: 'effectScatter', //散点（气泡）图。直角坐标系上的散点图可以用来展现数据的 x，y 之间的关系id:"strong",/*** 'cartesian2d'使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。'polar'使用极坐标系，通过 polarIndex 指定相应的极坐标组件'geo'使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。'calendar'使用日历坐标系，通过 calendarIndex 指定相应的日历坐标系组件。*/coordinateSystem: 'geo', //使用的坐标系,地理坐标系data: geoCoorData,symbolSize: 24,/** 以定义 data 的哪个维度被编码成什么 */encode: {value: 2},//配置何时显示特效。'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。showEffectOn: 'render',//涟漪特效相关配置rippleEffect: {color:'#980000',number: 4, //波纹的数量period: 8, //动画的周期，秒数//波纹的绘制方式，可选 'stroke' 和 'fill'brushType: 'stroke'},label: {formatter: '{b}',position: 'top',fonSize: 16,color: '#fff',show: true,},//解决标签重叠问题labelLayout:function(params) {return {x: params.rect.x + 10,y: params.rect.y + params.rect.height / 2,verticalAlign: 'top',align: 'left',moveOverlap:'shiftY',}},itemStyle: {color:'#980000',//borderColor: "#980000", //边框白色borderWidth: 1, //边框宽度},emphasis: {label: {show: true}},//散点图所有图形的 zlevel 值。zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。zlevel: 2,});myChart.setOption(option,true);});
新增其他类型如type=lines来叠加显示。
//清空原来加载的scatter+effectScatter，新增叠加新的类型如type=lines来加载显示线条option.series[1].data = [];option.series[2].data = [];if(option.series.length >= 4){let indexZone = option.series.findIndex(item => item.id === "zonebreak");if(indexZone > -1){option.series.splice(indexZone, 1);}}myChart.setOption(option,true);//数据赋值this.showCarouseType = "NBREAK";//从指定文件获取数据axios.get('./data/geo/lines.geojson').then(response => {//数据转换let mapLinesBreakData = [];let tempBreakData = response.data.features;for(var k=0;k<tempBreakData.length;k++){let tempCoordinates = tempBreakData[k].geometry.coordinates;for(var m=0;m<tempCoordinates.length;m++){mapLinesBreakData.push({name: tempBreakData[k].properties.name,groupId: tempBreakData[k].properties.code,activetime: tempBreakData[k].properties.time,coords: tempCoordinates[m]});}}option.series.push({name: 'lines数据',type: 'lines',id: "nearbreak",coordinateSystem: 'geo', //使用地理坐标系polyline: true, //是否是多段线。silent: false, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。// progressiveThreshold: 500,// progressive: 200,//指定geo属性后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，//而是采用 geo 中的相应属性。// type: 'map',zlevel: 3, //z相比zlevel优先级更低，而且不会创建新的 Canvas。top:'bottom',label: {show: true,position: 'end',color: "#BB1100",fontSize:16,},emphasis: { //高亮的显示设置disabled: false, //是否关闭高亮状态// 高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：'none' 不淡出其它图形，默认使用该配置。// 'self' 只聚焦（不淡出）当前高亮的数据的图形。'series' 聚焦当前高亮的数据所在的系列的所有图形。focus: 'self',label: {color: "#980000",},lineStyle: {width: 6,type: 'solid', //'solid' 'dashed' 'dotted'},},//表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，'series' 分别表示单选，多选以及选择整个系列。selectedMode: 'single',// 统一的样式设置lineStyle: {normal: {color: function(params){let activetime = params.data.activetime ? params.data.activetime : ""; //这是数据中的参数，可改if(activetime.indexOf("Q1") > -1 || activetime.indexOf("Q2") > -1){//Q1,Q2 绿色return "#00ff00";}else if(activetime.indexOf("Q3") > -1){//Q3紫色return "#ff00ff";}else if(activetime.indexOf("Q4") > -1){//Q4 红色return "#ff0000";}else{//默认红色return "#ff0000";}},opacity: 0.9 ,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形width: 3,type: 'solid', //'solid' 'dashed' 'dotted'}},data: mapLinesBreakData,});myChart.setOption(option);});
开发过程中遇到一些点，也简单记录如下：
1.从geojson获取数据时，若部分地区name重叠，可以通过修改显示名称的坐标来调整；
2.提示框组件的显示内容可以通过formatter:function(params){})参数值来区分显示；
3.地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集；
4.effectScatter标签重叠问题通过labelLayout解决。
labelLayout:function(params) {return {x: params.rect.x + 10,y: params.rect.y + params.rect.height / 2,verticalAlign: 'top',align: 'left',moveOverlap:'shiftY',}},
扩展资源：带审图号geojson文件下载
isqqw echarts图表集 isqqw.com 的地图频道里面免费下载
扩展资源：大量echarts地图示例
isqqw echarts图表集 isqqw.com
echarts图表集 www.isqqw.com
扫一扫
1479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
