I'm a rookie. I've been working on echarts maps recently. Seeing the official example of the "standard geoJson format extended map - the major cities of the country" was instantly compelled. No blame official website example is not good, I really do not understand how it is made. Finally, after a night of tossing and turning, I finally came up with an example of what I wanted to look like. (Same collection, master do not spray!)
The following example is that I got Shanwei City, and the links in it are my project, so I won't change them. This code is actually two examples together, you can also try it in your own project. The middle green part is the official copy of the "standard geoJson format extended map - the main cities of the country" code. The other code copies an example of step 4 of Echarts'start. You can change your project path to ok ay.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- by ECharts Prepare a size (width and height) Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts Single file introduction -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="{weiqiye::STATICS}/wx/echarts/build/dist/echarts.js"></script>
<script type="text/javascript">
// Path configuration
require.config({
paths: {
echarts: '{weiqiye::STATICS}/wx/echarts/build/dist'
}
});
// Use
require(
[
'echarts',
'echarts/chart/map' // bar module is loaded with histogram and loaded on demand
],
function (ec) {
// Initialize echarts charts based on prepared dom
var myChart = ec.init(document.getElementById('main'));
var cityMap = {
"Shanwei City": "441500"
};
var curIndx = 0;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
console.log(mapGeoData)
for (var city in cityMap) {
mapType.push(city);
// Custom Extended Chart Type
mapGeoData.params[city] = {
getGeoJson: (function (c) {
var geoJsonName = cityMap[c];
return function (callback) {
$.getJSON('{weiqiye::STATICS}/wx/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback);
}
})(city)
}
}
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
option = {
title: {
text : '',
},
tooltip : {
trigger: 'item',
formatter: '{b}All attractions'
},
series : [
{
name: '',
type: 'map',
mapType: 'Shanwei City',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[]
}
]
};
// Loading data for echarts objects
myChart.setOption(option);
}
);
</script>
</body>
Reprinted at: https://www.cnblogs.com/coprince/p/5590135.html