echartsregistermap的简单介绍

本篇文章给大家谈谈echartsregistermap，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、ECharts3 怎么加载 china.js 地图
• 2、【echarts】的json地图如何自定义各省份颜色
• 3、echarts 地图配置(以四川省地图为例)
• 4、2021-06-06在vue中使用 echarts3d地图
• 5、echars 如何做一个只显示一个省的地图？？急！！

ECharts3 怎么加载 china.js 地图

echarts3加载手渗镇map的方式和2不一样了，你必须得先注册地图才行，

“`js$.getJSON(‘./china.json’, function (data) { echarts.registerMap(‘china’

, data); var chart = echarts.init(document.getElementById(‘map’)); chart.setOp

tion({ series: [{ type: ‘map’, map: ‘china’ }] }); });“`

类似这样,你需要下载中国的地理矢量数据geojson

echarts3与echarts2区别：

1、js文件：

首先是js文件，echarts3做了很大的优化，在echarts2中，对各种控件的类库管理的较为详

细，有专门的目录结构来存放相关喊没的js文件及相关资源，但是在引入文件的时候往往会很不

方便，可能会一不小心就漏掉一个文件，而echarts3可以根据需要在下载项下直接根据所需

的功能构架类库，使用时只要导入一个echarts.min.js文件就可以；

2、文件导入：

在echarts2中，require是作为模块化加载的入口，在使用过程中关于路径配置经常会出现

问题，特别是制作地图的时候，而在echarts3中只需要在开头加一句[html] view plain copy

script src="js/echarts.js"/script  接下去只要调用接口就可以了；

3、离线地图：

echarts2中离线地图的精确度存在很大的问题，特别是下钻到区县一级，边界线存在

模糊、交叉、空白等问题，并且经常出现飞地，与实际地图出入较大，个人认为基本没

什么用，在echarts3中对此做了很大的改进，基本解决了以上问题，市与市之间、区县

与区县之间基本上不存在衔接问题；另外，在echarts3中可以根据需要自主构建地图，

这个服务给实毕粗际使用提供了很大的便利；

4、工具栏：

在echarts3的toolbox里面把辅助线功能取消掉了，图标变小了，总体上感觉echarts3

里面的toolbox更丑了；

5、地图漫游工具：

在echarts3里面把地图漫游工具取消掉了，说实话，echarts2里面的地图漫游工具看着

还是挺不错的，虽然并没有什么用；

6、坐标系:

echarts3中，数据结构进行了统一化抽象，最常用的数据结构有：线性表、树、图。例

如，线性表以及树、图的节点列表的结构可以归一化为这样的二维数组；echarts3中另

一个重要的数据结构抽象是独立出了“坐标系”概念；事实上在 ECharts2 中已经有

grid、polar配置项存在，但是并不是按一个“坐标系”的理解去实现的；echarts3中，

支持了直角坐标系（catesian，兼容 echarts2中的grid）、极坐标系（polar）、地理

坐标系（geo）；

7、Option变动：

1）组件位置想x、y等变成了left、top,可以使用像素和百分比，适应性更强。

2）为了让结构更合理，echarts3中label被移出来和itemStyle平级。

根据官方说法，在echarts3中以前的用法也是兼容的，只是不推荐。

参考资料

echarts3与echarts2区别.CSDN[引用时间2018-1-22]

【echarts】的json地图如何自定义各省份颜色

根据选择的地区去加载地图数据然后给chart.setOption(); 改变红色历迅字体的值就可以，红色字体是省的拼音具体查看echarts/map文件夹内文件，有js加载方式和肢竖此json加载方式

$.get('map/json/纤滚china.json', function (chinaJson) {

echarts.registerMap('china', chinaJson);

var chart = echarts.init(document.getElementById('main'));

chart.setOption({

series: [{

type: 'map',

map: 'china'

}]

});

});

[img]

echarts 地图配置(以四川省地图为例)

1.引入 import China from '@/utils/echarts/china-map-geojson.min'

2.引入import '@/utils/echarts/sichuan'

 3.this.$echarts.registerMap('china', China.ChinaData);

 const geoCoordMap = {

      甘孜藏族自治州: [99.9207, 31.0803],

      阿坝藏族羌族自治州: [102.4805, 32.4536],

      凉山彝族自治州: [101.9641, 27.6746],

      凉山彝族自治州1: [102.1111, 28.6746],

      绵阳市: [104.7327, 31.8713],

      达州市: 蔽差[107.6111, 31.333],

      广元市: [105.6885, 32.2284],

      雅安市: [102.6672, 29.8938],

      宜宾市: [104.6558, 28.548],

      乐山市: [103.5791, 29.1742],

      南充市: [106.2048, 31.1517],

      巴中市: [107.0618, 31.9977],

      泸州市: [105.4578, 28.493],

      成都市: [103.9526, 30.7617],

      资阳市: [104.9744, 30.1575],

      攀枝花市: [101.6895, 26.7133],

      眉山市: [103.8098, 30.0146],

      广安市: [106.6333, 30.4376],

      德阳市: [104.48, 31.1133],

      内江市: [104.8535, 29.6136],

      遂宁市: [105.5347, 30.6683],

      自贡市: [104.6667, 29.2786]

    }

    const mapData = [

 { name: '资阳市', value: 5 },

  { name: '乐山市', value: 6 },

  { name: '成都市', value: 7 },

  { name: '雅安市', value: 9 },

  { name: '阿坝藏族羌族自治州', value: 10 },

 衡并厅 { name: '凉山彝族自治州', value: 11 },

  { name: '凉山彝族自治州1', value: 12 }

    ];

    const 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),

            selected: true //点击事件

          });

        }

      }

      return res;

    };

    const option = {

      geo: {

        map: '四川',

        itemStyle: {

          areaColor: '#e8f5fe',

          borderColor: '#1c85f6'

        },

        emphasis: {

          itemStyle: {

            areaColor: 'lightblue',

            shadowColor: '#fff',

            shadowBlur: 10

          },

          label: {

            show: false

          }

        }

      },

      series: [

        {

          name: '666',

          type: 'scatter',

          coordinateSystem: 'geo',

          symbol: 'pin',

          symbolSize: [20, 20],

          label: {

            normal: {

              show: true,

              textStyle: {

                color: '#2cdee5',

                fontSize: 12

              },

              position: 'bottom',

              formatter(value) {

                return value.data.value[2];

              }

            }

  咐隐        },

          itemStyle: {

            normal: {

              color: '#2cdee5'

            }

          },

          data: convertData(

            mapData

          ),

          showEffectOn: 'render',

          rippleEffect: {

            brushType: 'stroke'

          },

          hoverAnimation: true,

          zlevel: 1

        }

      ]

    }

效果图:

2021-06-06在vue中使用 echarts3d地图

vue中使颂档敬用 echarts地图

main.js中

package.json 使用版本

在vue文件中使用

3d地图示例

中国地图json数蠢掘据

import '@/components/china'

var myChart = this. echarts.registerMap("china", china);//china为上野慎图中的json数据

const myChart = this.$echarts.init(document.getElementById('main'));

option={

//此处配置可参考官网例子即可

}；

myChart.setOption(option);

此处说明如何出现geo3d（立体地图）

数据来源

;lat=30.332329214580188lng=106.72278672066881zoom=3.5

按照需求，选择对应的数据，保存为json文件引入项目中即可

echars 如何做一个只显示一个省的地图？？急！！

我以显示浙江省的地图为例，写段代码

首先巧缺我们需要两个文物宽枣件：

1、echarts.min.js

2、zhejiang.js

!doctype html

html

head

    meta charset="utf-8"

    titleecharts图形插件使用/title

/head

body

div id="main" style="height:800px;"/div

script type="text/JavaScript" src="echarts.min.js"/script

script type="text/JavaScript" src="zhejiang.js"/script

script type="text/javascript"

        var chart = echarts.init(document.getElementById('main'));

        chart.setOption({

            series: [{

                type: 'map',

selectedMode : 'single',

                map: '浙江',

itemStyle:{  

normal:{label:{show:true}},  

emphasis:{label:{show:true}}  

}

    罩拆        }]

        });

/script

/body

/html

这样就可以显示浙江省地图了

至于zhejiang.js在哪里获取，可以在github上找到，网页链接，目录为：echarts/map/js/province/

关于echartsregistermap和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。