echart是一個(gè)用于數(shù)據(jù)可視化的開源JavaScript圖表庫(kù),它可以通過各種圖表來(lái)展示數(shù)據(jù),如折線圖、餅圖、地圖、散點(diǎn)圖等。其中,地圖是應(yīng)用最廣泛的一種圖表,而展示地圖數(shù)據(jù)需要使用對(duì)應(yīng)的省市json數(shù)據(jù)。下面我們來(lái)介紹一下echart省市json數(shù)據(jù)的使用方法。
首先,我們需要準(zhǔn)備省市json數(shù)據(jù)文件,一般可以從網(wǎng)上下載。例如,我們下載了一個(gè)名為china.json的省市json數(shù)據(jù)文件。接著,我們需要在HTML文件中引入echart和jquery庫(kù):
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
然后,我們可以在JavaScript代碼中加載省市json數(shù)據(jù):
$.get('china.json', function (chinaJson) { echarts.registerMap('china', chinaJson); var chart = echarts.init(document.getElementById('main')); chart.setOption({ visualMap: { type: 'continuous', min: 0, max: 200, text: ['High', 'Low'], realtime: false, calculable: true, inRange: { color: ['#f1c61b', '#fc983b', '#f9753d', '#e6554d', '#d43d51'] } }, series: [{ type: 'map', map: 'china' }] }); });
以上代碼展示了如何加載china.json數(shù)據(jù),并將地圖顯示在頁(yè)面上。其中,map:'china'的意思是要顯示的地圖類型是中國(guó)地圖,這個(gè)類型名稱就是通過echarts.registerMap方法注冊(cè)的。
最后,我們需要在HTML文件中添加一個(gè)div元素,用來(lái)容納地圖的顯示區(qū)域:
<div id="main" style="width: 800px;height:600px;"></div>
這樣就完成了echart省市json數(shù)據(jù)的使用過程。當(dāng)然,echart還支持很多其他的配置和功能,有興趣的讀者可以進(jìn)一步了解。
上一篇vue el row
下一篇python 模式字符串