echarts制作区域地图。

首先获取需要制作地图的json数据

http://datav.aliyun.com/tools/atlas/#&lat=22.65267050733856&lng=114.18983459472656&zoom=10

页面引入json数据

initChart() {var myChart = echarts.init(this.$refs.chart1);echarts.registerMap("zhouShan", mapData);//mapData即为json数据var geoCoordMap = {嵊泗: [122.457809, 30.727166],岱山: [122.201132, 30.242865],定海: [122.11711, 30.065158],普陀: [122.316956, 29.979933],};var data = [{name: "嵊泗",value: 85,},{name: "岱山",value: 85,},{name: "定海",value: 85,},{name: "普陀",value: 85,},];//正常var normal = [{name: "设备正常",value: [122.094467, 30.042349, 250],type: "normal",},{name: "设备正常",value: [122.059083, 30.105859, 250],type: "normal",},];//预警var earlyWarning = [{name: "预警",value: [122.383061, 29.885281],type: "earlyarning",},{name: "预警",value: [122.183214, 29.705382, 250],type: "earlyarning",},];// 报警var warning = [{name: "报警",value: [122.388437, 30.257613],type: "warning",},{name: "报警",value: [122.332395, 30.444444, 250],type: "warning",},];var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}}return res;};const option = {tooltip: {trigger: "item",position: "top",formatter: function (params) {switch (params.name) {case "定海区":return;case "岱山县":return;case "嵊泗县":return;case "普陀区":return;}return params.name;},},// 图例legend: {orient: "vertical",id: 1,y: "bottom",x: "right",data: ["正常", "预警", "报警"],icon: "circle",textStyle: {color: "#fff",},},geo: {map: "zhouShan",aspectScale: 1.1, //长宽比zoom: 1.5,roam: false,itemStyle: {normal: {areaColor: "#013C62",shadowColor: "#182f68",shadowOffsetX: 1,shadowOffsetY: 2,},emphasis: {areaColor: "#2AB8FF",borderWidth: 0,color: "green",label: {show: true,},},},},series: [{type: "effectScatter",silent: true, //禁用地图的hover事件coordinateSystem: "geo",data: convertData(data),symbolSize: function (val) {return val[1] / 3;},showEffectOn: "render",rippleEffect: {brushType: "stroke",},hoverAnimation: false,label: {//中心点设置normal: {formatter: "{b}",position: "bottom",color: "#fff",show: true,},},itemStyle: {normal: {color: "#10f9ff",shadowBlur: 0,shadowColor: "#05C3F9",},},zlevel: 2,},{type: "map",mapType: "zhouShan",zoom: 1.5,aspectScale: 1.1,selectedMode: "false", //禁止区域选中label: {normal: {show: false,textStyle: {color: "#fff",},},emphasis: {show: false,textStyle: {color: "#fff",},},},itemStyle: {// 表面层normal: {borderColor: "#2ab8ff",// borderColor: "#2980b9",borderWidth: 1,areaColor: "#274d68",// areaColor: "rgba(26,192,211)",},//高亮层emphasis: {areaColor: "rgba(43,145,183)",// areaColor: "rgba(193,202,114)",borderWidth: 0,color: "green",},},data: data,},// 图例{name: "正常",type: "scatter",coordinateSystem: "geo",data: normal,symbolSize: function (val) {return val[1] / 3;},label: {normal: {show: false,formatter: function (params) {return params.name;},position: "top",color: "#fff",fontSize: "8",},emphasis: {show: false,},},itemStyle: {normal: {color: "rgba(0,192,111)",borderWidth: 2,borderColor: "#fff",},},},{name: "预警",type: "scatter",coordinateSystem: "geo",data: earlyWarning,symbolSize: function (val) {return val[1] / 3;},label: {normal: {show: false,formatter: function (params) {return +params.name;},position: "top",color: "#fff",fontSize: "8",},emphasis: {show: false,},},itemStyle: {normal: {color: "rgba(255,255,0)",borderWidth: 2,borderColor: "#fff",},},},{name: "报警",type: "scatter",coordinateSystem: "geo",data: warning,symbolSize: function (val) {return val[1] / 3;},label: {normal: {show: false,formatter: function (params) {return "管网名称: " + params.name;},position: "top",color: "#fff",fontSize: "8",},emphasis: {show: false,},},itemStyle: {normal: {color: "rgba(217,0,27)",borderWidth: 2,borderColor: "#fff",},},},],};myChart.setOption(option);window.addEventListener("resize", () => {myChart.resize();});},

效果如下

echarts制作区域地图。相关推荐

【vue项目使用echarts实现区域地图绘制，且可点击单独区域】
vue项目使用echarts实现区域地图绘制,且可点击单独区域 - 菜鸟程序员的总结 - 博客园
echarts自定义区域地图
echarts自定义区域地图地图代码逻辑梳理文件梳理 myChina.json mapData.json mock.json(权限json---等同于后台返回的权限json) chinaMapDa ...
react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色
react 可视化项目 ECharts 3D区域地图图表地图介绍 echarts图表引入 react页面中引入使用地图介绍做可视化项目时需要3d的区域地图,在网上搜到ECharts社区的一个其他 ...
vue用 echarts 显示区域地图并用不同颜色显示每个区域
认定了一个女孩就要好好的珍惜对待她,人生不容辜负,你必须要更加努力 .加油骚年. 用 echarts 做动态中国区域地图或者全国地图效果如下做这些必须先引入echarts 怎么引入的自己 ...
Echarts实现区域地图数据渲染的一些尝试 || 各种方案/资源的集锦
最近,需要利用Ecarts完成一个区域地图数据渲染,因为区域地图每一块的数据能尽可能渲染的丰富一些,比如一些点的预警以及区域色块的区分,所以和之前只是简单根据每个区域数据量(单块数据)渲染有所不同. ...
echarts市级区域地图数据展示
一.原理引用对应市区json数据(比如我就是引用的河南省驻马店市的数据),通过百度地图坐标拾取器获取地区的经纬度,将数据填在对应位置(我下面有注释),再配置下样式颜色之类的渲染上就可以了二.看图片 ...
在html中使用Echarts制作中国地图
这里写目录标题制作一共三步一.下载echarts.min.js和china.js文件 1.1在官网下载echarts.min.js 1.2下载china.js(建议直接复制目前2022-2-15 ...
echart 地图某个地区_一站式解决echarts实现区域地图
近期项目中有个大屏展示的需求,需要显示行政区的地图.苦苦寻找的过程中发现此方面资料很少且大部分在CSDN上付费下载,着实麻烦,特此总结,供大家参考. 直接上图关键知识点 geo数据 geo是echa ...
echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍
今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...

echarts制作区域地图。

echarts制作区域地图。相关推荐

最新文章

热门文章