相信很少用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>
<html style="height: 100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- <script src="../js/echarts-all.js" type="text/javascript"></script> -->
<script src="../echarts/echarts.js" type="text/javascript"></script>
</head>
<body style="height: 100%; margin: 0; background-color: #0F3894;">
<div id="main" style="height: 100%;"></div>
<script src="expMap.js" type="text/javascript"></script>
</body>
</html>
如果还想扩展其它地图，比如东北地区包含哪些省，照上面的方法一样可以。希望对大家有所帮助
附上效果图：
6389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
