echaer 地图_Echarts实现中国地图、省份地图及对应数据展示

Echarts实现中国地图、省份地图及对应数据展示

一、概述

首先ECharts 是一个使用 JavaScript 实现的开源可视化库。兼容当前绝大部分浏览器，而且提供大量可交互、可高度个性化定制的图表，满足开发者各种需求。

今天主要展示echarts地图功能。echarts内置了世界地图、中国及各个省市自治区地图数据，可通过标准GeoJson扩展地图类型。

二、echarts实现中国地图

先看实现效果

中国地图数据展示

实现步骤

首先要给echarts提供一个容器。

导入echarts和中国地图的js数据，当然有需求的可以在main文件中按需引入。

import echarts from "echarts";

import "../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据

实例化echarts对象

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

参数设置，因为项目需求需要添加阴影和单独设置地图边框，所以实际上是2张地图重叠，下面那张地图做阴影和边框处理。

let option = {

tooltip: {

show: false

},

geo: {

map: "china",

roam: false,// 一定要关闭拖拽

zoom: 1.23,

center: [105, 36], // 调整地图位置

label: {

normal: {

show: false, //关闭省份名展示

fontSize: "10",

color: "rgba(0,0,0,0.7)"

},

emphasis: {

show: false

}

},

itemStyle: {

normal: {

areaColor: "#0d0059",

borderColor: "#389dff",

borderWidth: 1, //设置外层边框

shadowBlur: 5,

shadowOffsetY: 8,

shadowOffsetX: 0,

shadowColor: "#01012a"

},

emphasis: {

areaColor: "#184cff",

shadowOffsetX: 0,

shadowOffsetY: 0,

shadowBlur: 5,

borderWidth: 0,

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

}

}

},

series: [

{

type: "map",

map: "china",

roam: false,

zoom: 1.23,

center: [105, 36],

// geoIndex: 1,

// aspectScale: 0.75, //长宽比

showLegendSymbol: false, // 存在legend时显示

label: {

normal: {

show: false

},

emphasis: {

show: false,

textStyle: {

color: "#fff"

}

}

},

itemStyle: {

normal: {

areaColor: "#0d0059",

borderColor: "#389dff",

borderWidth: 0.5

},

emphasis: {

areaColor: "#17008d",

shadowOffsetX: 0,

shadowOffsetY: 0,

shadowBlur: 5,

borderWidth: 0,

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

}

}

}

]

};

this.myEchart.setOption(option);

添加散点数据，这里注意要把上面设置过的地图带上，之前设置的series的数据会被覆盖掉。

var dataValue = this.dealWithData();

var data1 = dataValue.splice(0, 6);

var option = {

series: