echarts实现自定义扩展地图-中国七大区域图

相信很少用echarts的人第一次接触时会有很多疑惑，比如，在百度突然看到一段代码，感觉莫名奇妙，不知道怎么用。正所谓熟能生巧，当你专一用echarts一个月后，你会发现其实任何技术并没有想象那么难。

下面进入正题：

第一步：下载echarts包，这里需要注意的是，网上现在有很多版本的，比如echarts-all.js，要实现自定义扩展地图这个就满足不了，需要用到比较早的那个地图版本,结构如下图：相信很多人看了就知道是哪个版本了

还需要七大区的geoJSON数据包，后面我在下载那上传供大家下载

第二步就是实现过程，下面就直接贴代码

var dom = document.getElementById("main");

var myChart;

var option;

require.config({

paths: {

echarts: '/echarts/'

}

});

if (!myChart) {

require(

[

'echarts',

'echarts/chart/map',

function (ec) {

//debugger;

// 基于准备好的dom，初始化echarts图表

require('echarts/util/mapData/params').params.areas = {

getGeoJson: function (callback) {

$.getJSON('./geoJson/area.json', function (data) {

//debugger;

// 压缩后的地图数据必须使用 decode 函数转换

callback(require('echarts/util/mapData/params').decode(data));

});

}

var ecConfig = require('echarts/config');//初始化事件

option = {

title: {

text: '',

subtext: '',

tooltip: {

trigger: 'item',

dataRange: {

min: 0,

max: 500,

text: ['大', '小'],

realtime: false,

calculable: true,

//color: ['orangered', 'yellow', 'lightskyblue']

series: [

{

name: '',

type: 'map',

mapType: 'areas', // 自定义扩展图表类型

selectedMode: false,//single

itemStyle: {

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

emphasis: { label: { show: true } }

data: [

{ name: '东北地区', value: Math.round(Math.random() * 500) },

{ name: '华北地区', value: Math.round(Math.random() * 500) },

{ name: '华东地区', value: Math.round(Math.random() * 500) },

{ name: '华南地区', value: Math.round(Math.random() * 500) },

{ name: '华中地区', value: Math.round(Math.random() * 500) },

{ name: '西南地区', value: Math.round(Math.random() * 500) },

{ name: '西北地区', value: Math.round(Math.random() * 500) }

]

}

]

};

myChart = ec.init(dom);

myChart.setOption(option, true);

});

}

三、前端引用

<!DOCTYPE html>

<head>

</head>

</body>

</html>

如果还想扩展其它地图，比如东北地区包含哪些省，照上面的方法一样可以。希望对大家有所帮助

附上效果图：

echarts实现自定义扩展地图-中国七大区域图相关推荐

中国七大区域（东北，西北，华北，华南，华中，华东，西南） vue + Echrats地图效果
需求:根据中国七大区域战士统计数据,鼠标移入显示每一个阶段数据代码部分引入的七大区域数据里面是六大区域,蒙古分成了蒙东,蒙西,详情数据可以私信我,把里面的数据合并改一下就是七大区域了. map ...
用jQuery插件jVectorMap制作中国省份区域图
jVectorMap是一个优秀的.兼容性强的jQuery地图插件.它可以工作在包括IE6在内的各款浏览器中,矢量图输出,除官方提供各国地图数据外,用户可以使用数据转换程序定制地图数据. 这里基于jVe ...
【26】地图可视化：基于 Echarts + Flask 的动态实时地图组件 - 点气泡流向组合区域三级下钻地图
目录一.大屏整体架构 Echarts + Flask + Bootstrap 1. 效果展示动态效果鼠标右键切换主题 2. 前端布局 Bootstrap 3. HTTP 服务端使用 Flask ...
echarts地图文字重叠解决方案_Echarts扩展地图文字位置错乱的问题
最近在弄echarts 因为要用到扩展地图,所以在官网下载了相应的json文件 ,引入之后发现文字位置错乱于是查找网上资料发现 textFixed : { '大洋洲' : [265, 0], }, ...
echarts自定义省份地图及map上的内容
先来看效果,太原市的地图,显示市下面的区,区下面的商户,默认显示3个商户信息,其余商户信息鼠标移动上去显示商户信息: 我是怎么做的呢?因为网上找的地图都不符合需求,所以从设计开始就按非常规方法:大致就 ...
使用echarts扩展地图案例
查看了echarts上面香港的地图扩展以后自己做了一个云南地图扩展: 里面的jquery和echarts文件自行下载,地图json数据我已经上传资源了. 下面直接贴代码不磨叽 <!DOCTYPE ...
echarts配合google地图，并自定义google地图的样式
前言全网关于google地图配合echarts的使用找了很久,其实echarts结合百度地图使用会更方便一些.公司因为想要更国际化,所以更倾向于使用google地图准备工作要想使用google地 ...
echarts实现中国地图，山西地图，图表面积图配置项
文章目录 1.vue引入echars 2.建立echars基本框架 3.中国地图 4.山西地图为例,展示点击获取城市名称并保存在data中,方便使用 6.图表面积图(大小,线条颜色,面积颜色,百分比显 ...
uniapp+Echarts微信小程序实现中国地图
uniapp+Echarts微信小程序实现中国地图在uni-app项目引用Echarts 使用Echarts 地图实现: 最终效果 **项目源码**地址:[https://github.com/wa ...

echarts实现自定义扩展地图-中国七大区域图

echarts实现自定义扩展地图-中国七大区域图相关推荐

最新文章

热门文章