Recently, the project needs to do some data display. I found echarts after searching on the Internet. There are several steps to use it:
1. First go to the official website to download an echarts.js file and import it;
2. Before drawing the picture we want, we need a container with width and height;
3. Initialize an echarts instance through the echarts.init method and generate a simple graph through the setoption method;
<html lang="en">
<head>
<meta charset="utf-8">
<title>echarts map distribution animation effects</title>
</head>
<body style="background:#1B1B1B">
<div id="mainMap" style="height:700px;width: 100%;padding:10px;background:#1B1B1B"></div>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script src="js/echarts.js" charset="UTF-8"></script>
<script type="text/javascript">
$('#document').ready(function(){
getEcharts();
});
</script>
<script type="text/javascript">
function getEcharts(){
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 Configure the path of echarts for the module loader, link to echarts.js from the current page, and define the required chart path
require.config({
paths: {
echarts: './js'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 Dynamically load echarts and start using it in the callback function, pay attention to keep the on-demand loading structure to define the chart path
require(
[
'echarts',
'echarts/chart/map'
],
function (ec) {
// --- map ---
var mydata = [
{name:'Mudanjiang',value:95},
{name:'Harbin',value:90},
{name:'Daqing',value:80},
{name:'Changsha',value:70},
{name:'Quzhou',value:60},
{name:"Langfang",value:50},
{name:"菏泽",value:40},
{name:"Hefei",value:30},
{name:"武汉",coord:[114.31,30.52],value:20},
{name:'Chongqing',coord:[107.7539,30.1904],value:20},
{name:'Jinhua',coord:[120.0037,29.1028],value:20},
{name:'Changchun',coord:[125.8154,44.2584],value:20},
{name:'Changzhi',coord:[112.8625,36.4746],value:20},
{name:'Qingdao',coord:[120.4651,36.3373],value:20},
{name:'Shaoguan',coord:[113.7964,24.7028],value:20}
];
var myChart2 = ec.init(document.getElementById('mainMap'));
myChart2.setOption({
dataRange: {
min: 0,
max : 100,
calculable : true,
color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
textStyle:{
color:'#fff'
}
},
series : [
{
name: 'Nationwide',
type: 'map',
roam: true,
hoverable: false,
mapType: 'china',
itemStyle:{
normal:{
borderColor:'rgba(100,149,237,1)',
borderWidth:0.5,
areaStyle:{
color: '#1b1b1b'
}
}
},
data:[],
//
geoCoord: {
'Shanghai': [121.4648,31.2891],
'Dongguan': [113.8953,22.901],
'Dongying': [118.7073,37.5513],
'Zhongshan': [113.4229,22.478],
'Linfen': [111.4783,36.1615],
'Linyi': [118.3118,35.2936],
'Dandong': [124.541,40.4242],
'Lishui': [119.5642,28.1854],
'Urumqi': [87.9236,43.5883],
'Foshan': [112.8955,23.1097],
'Baoding': [115.0488,39.0948],
'Lanzhou': [103.5901,36.3043],
'Baotou': [110.3467,41.4899],
'Beijing': [116.4551,40.2539],
'North Sea': [109.314,21.6211],
'Nanjing': [118.8062,31.9208],
'Nanning': [108.479,23.1152],
'Nanchang': [116.0046,28.6633],
'Nantong': [121.1023,32.1625],
'Xiamen': [118.1689,24.6478],
'Taizhou': [121.1353,28.6688],
'Hefei': [117.29,32.0581],
'Hohhot': [111.4124,40.4901],
'Xianyang': [108.4131,34.8706],
'Harbin': [127.9688,45.368],
'Tangshan': [118.4766,39.6826],
'Jiaxing': [120.9155,30.6354],
'Datong': [113.7854,39.8035],
'Dalian': [122.2229,39.4409],
'Tianjin': [117.4219,39.4189],
'Taiyuan': [112.3352,37.9413],
'Weihai': [121.9482,37.1393],
'Ningbo': [121.5967,29.6466],
'Baoji': [107.1826,34.3433],
'Suqian': [118.5535,33.7775],
'Changzhou': [119.4543,31.5582],
'Guangzhou': [113.5107,23.2196],
'Langfang': [116.521,39.0509],
'Yan'an': [109.1052,36.4252],
'Zhangjiakou': [115.1477,40.8527],
'Xuzhou': [117.5208,34.3268],
'Texas': [116.6858,37.2107],
'Huizhou': [114.6204,23.1647],
'Chengdu': [103.9526,30.7617],
'Yangzhou': [119.4653,32.8162],
'Chengde': [117.5757,41.4075],
'Lhasa': [91.1865,30.1465],
'Wuxi': [120.3442,31.5527],
'Sunshine': [119.2786,35.5023],
'Kunming': [102.9199,25.4663],
'Hangzhou': [119.5313,29.8773],
'Zaozhuang': [117.323,34.8926],
'Liuzhou': [109.3799,24.9774],
'Zhuzhou': [113.5327,27.0319],
'Wuhan': [114.3896,30.6628],
'Shantou': [117.1692,23.3405],
'Jiangmen': [112.6318,22.1484],
'Shenyang': [123.1238,42.1216],
'Cangzhou': [116.8286,38.2104],
'Heyuan': [114.917,23.9722],
'Quanzhou': [118.3228,25.1147],
'Taian': [117.0264,36.0516],
'Taizhou': [120.0586,32.5525],
'Jinan': [117.1582,36.8701],
'Jining': [116.8286,35.3375],
'Haikou': [110.3893,19.8516],
'Zibo': [118.0371,36.6064],
'Huai'an': [118.927,33.4039],
'Shenzhen': [114.5435,22.5439],
'Qingyuan': [112.9175,24.3292],
'Wenzhou': [120.498,27.8119],
'Weinan': [109.7864,35.0299],
'Huzhou': [119.8608,30.7782],
'Xiangtan': [112.5439,27.7075],
'Binzhou': [117.8174,37.4963],
'Weifang': [119.0918,36.524],
'Yantai': [120.7397,37.5128],
'Yuxi': [101.9312,23.8898],
'Zhuhai': [113.7305,22.1155],
'Yancheng': [120.2234,33.5577],
'Panjin': [121.9482,41.0449],
'Shijiazhuang': [114.4995,38.1006],
'Fuzhou': [119.4543,25.9222],
'Qinhuangdao': [119.2126,40.0232],
'Shaoxing': [120.564,29.7565],
'Liaocheng': [115.9167,36.4032],
'Zhaoqing': [112.1265,23.5822],
'Zhoushan': [122.2559,30.2234],
'Suzhou': [120.6519,31.3989],
'Laiwu': [117.6526,36.2714],
'Heze': [115.6201,35.2057],
'Yingkou': [122.4316,40.4297],
'Huludao': [120.1575,40.578],
'Hengshui': [115.8838,37.7161],
'Quzhou': [118.6853,28.8666],
'Xining': [101.4038,36.8207],
'Xi'an': [109.1162,34.2004],
'Guiyang': [106.6992,26.7682],
'Lianyungang': [119.1248,34.552],
'Xingtai': [114.8071,37.2821],
'Handan': [114.4775,36.535],
'Zhengzhou': [113.4668,34.6234],
'Ordos': [108.9734,39.2487],
'Chongqing': [107.7539,30.1904],
'Jinhua': [120.0037,29.1028],
'Tongchuan': [109.0393,35.1947],
'Yinchuan': [106.3586,38.1775],
'Zhenjiang': [119.4763,31.9702],
'Changchun': [125.8154,44.2584],
'Changsha': [113.0823,28.2568],
'Changzhi': [112.8625,36.4746],
'Yangquan': [113.4778,38.0951],
'Qingdao': [120.4651,36.3373],
'Shaoguan': [113.7964,24.7028]
},
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
return 10 + v/10
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:false}
},
emphasis: {
label:{position:'top'}
}
},
data :mydata
}
},
{
name: 'Beijing Top10',
type: 'map',
mapType: 'china',
data:[],
markPoint : {
symbol:'effectScatter',
symbolSize : function (v){
return 0.1
},
effect : {
show: true,
shadowBlur : 0
},
itemStyle:{
normal:{
label:{show:true,
position:'top',
textStyle: {
fontSize: 14
}
}
},
emphasis: {
label:{show:false}
}
},
data : mydata
}
}
]
});
});
}
</script>
</body>
</html>
It is just a scatter map display with glare, the specific configuration can be viewed on the official website
It is very convenient to use it for data display, and it is worth seeing. Also, when importing a json file, the file name cannot be in Chinese or it cannot be parsed.
Official website link: http://echarts.baidu.com/index.html