Home > Developer > Web Develop
I am a rookie, recently engaged in Echarts map. See the official " standard geojson format extension map-the main city of the country" example, the moment is forced. Not a strange example of the official website is not good, I can not understand how it is made. Last night, finally made a look like example. (Have the same feeling of the collection, Master do not spray!) ）
The following example is I made Shanwei, the link is my project, I will not change. This code is actually two examples together, you can also try their own projects inside. The middle green section is a copy of the official " standard geojson format extension map-national major city"code. Other code is the example of Echarts's start 4th step. You can change your project path to OK.
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>ECharts</title>
<body>
<!--prepare a DOM-to-size (wide-height) for echarts
<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 '//use a histogram to load the bar module and load it on demand
],
Function (EC) {
Initialize the Echarts chart based on the prepared DOM
var mychart = ec.init (document.getElementById (' main '));
var CityMap = {
"Shanwei": "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 Extension Chart types
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 ',
Selectedmode: ' Single ',
itemstyle:{
Normal:{label:{show:true}},
Emphasis:{label:{show:true}}
},
Data:[]
}
]
};
Loading data for Echarts objects
mychart.setoption (option);
}
);
</script>
</body>
echarts-map extension-standard geojson format extension map-examples
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
