數據圖表插件echarts（二）

時間 2019-11-10

標籤數據圖表插件 echarts 简体版

原文原文鏈接

前言javascript

上一篇文章簡單介紹了一下百度公司前端部門寫的一個js插件echarts，這是一款很強大的圖表插件，裏面的地圖控件也是很強大的，支持離線的使用，而且數據也是離線的，使用很方便。下面我就簡單介紹一下echarts中的地圖控件css

1、插件下載html

echarts3是一個集成的插件，把不少東西都集成到一塊兒了，使用很方便，從官網上下載一下，和普通js文件同樣，直接添加到項目中，在HTML頭部引用一下便可。前端

地圖的插件也是一個js文件，數據是一個json文件，從官網下載下來，添加引用，可是必定注意引用的前後順序。java

一、echarts下載地址jquery

http://echarts.baidu.com/download.htmljson

二、地圖下載echarts

http://echarts.baidu.com/download-map.html （js文件和json文件）包括中國地圖和世界地圖，還有各個省份的地圖數據。ide

2、插件引用ui

一、js的引用

 1 <script src="echarts.js"></script>
 2 <script src="map/js/china.js"></script>
 3 <script>
 4 var chart = echarts.init(document.getElementById('main'));
 5 chart.setOption({
 6     series: [{
 7         type: 'map',
 8         map: 'china'
 9     }]
10 });
11 </script>

View Code

二、json的引用

 1 $.get('map/json/china.json', function (chinaJson) {
 2     echarts.registerMap('china', chinaJson);
 3     var chart = echarts.init(document.getElementById('main'));
 4     chart.setOption({
 5         series: [{
 6             type: 'map',
 7             map: 'china'
 8         }]
 9     });
10 });

View Code

3、完整的demo

HTML代碼：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <script type="text/javascript" src="js/jquery.min.js"></script>
 6 <title>河南省地圖</title>
 7 </head>
 8 <body>
 9 <div id="main" style="width:100%;height:800px;"></div>
10 <script type="text/javascript" src="js/echarts.js"></script>
11 <script type="text/javascript" src="js/henan.js"></script>
12 <script type="text/javascript">
13 $(function () {
14 //獲取地區的json數據
15 var henanJson = $.get('json/henan.json');
16 //加載省份的地圖
17 echarts.registerMap('henan', henanJson);
18 var myChart = echarts.init(document.getElementById('main'));
19 myChart.setOption({
20 series: [{
21 type: 'map',
22 mapType: '河南'
23 }]
24 });
25 
26 myChart.on('click', function (param) {
27 var selectedCity = param.name;
28 alert(selectedCity);
29 //點擊獲取對應的市的名稱
30 var flag = false;
31 var selected = param.selected;
32 for (var p in selected) {
33 getVodList(mapUtil.findFbdm(selectedCity), selectedCity);
34 //加載右側的列表
35 if (p == selectedCity) {
36 flag = true;
37 selectedCity = p;
38 }
39 }
40 if (flag) {
41 //從新畫地圖進入到該市的縣級地圖 (下鑽到縣級 )
42 var map = new Map();
43 map = getMap(selectedCity, 3);
44 initMap(map, selectedCity, 'xj');
45 $('#Header').css('display', '');
46 
47 //顯示隱藏的返回按鈕
48 myChart.on('click', function (param) {
49 var selectedTown = param.target;
50 //點擊獲取對應的縣的名稱
51 getVodList(mapUtil.findFbdm(selectedTown), selectedTown);
52 //加載右側的列表
53 });
54 }
55 });
56 });
57 </script>
58 </body>
59 </html>