Echarts读取本地json文件渲染轨迹，亲测ok
生活随笔
收集整理的這篇文章主要介紹了
Echarts读取本地json文件渲染轨迹，亲测ok
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Echarts讀取本地json文件渲染軌跡，親測ok
- 1. 報錯及解決
- 2. 效果圖
- 3. 源碼lines-track.html如下
- 參考
1. 報錯及解決
- 報錯：由于瀏覽器的同源策略
已攔截跨源請求：同源策略禁止讀取位于 file:///D:/learn/echarts/test/data/hangzhou-tracks.json 的遠(yuǎn)程資源。（原因：CORS 請求不是 http）。
。
- 解決：
1. firefox about:config 設(shè)置 security.fileuri.strict_origin_policy 為false
2. get請求修改為ajax get請求，完美解決；
3. 搭建http服務(wù)獲取json，34行不管用，步驟3可省略
2. 效果圖
修改hangzhou-track.json后成功渲染，結(jié)果如下圖：（用自己的少量抽稀后的軌跡數(shù)據(jù)集）
3. 源碼lines-track.html如下
<html>
<head><meta charset='utf-8'><script src='lib/esl.js'></script><script src='lib/config.js'></script><script src='lib/jquery.min.js'></script><script src='http://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu'></script><meta name='viewport' content='width=device-width, initial-scale=1'/>
</head>
<body>
<style>html, body, #main {width: 100%;height: 100%;margin: 0;}
</style>
<div id='main'></div>
<script>require(['echarts','extension/bmap'], function (echarts) {var myChart = echarts.init(document.getElementById('main'));
// $.get('data/hangzhou-tracks.json', function (data) {$.ajax({type: "GET",async: false, //同步執(zhí)行//url: "http://localhost:8000/users/getJson/",url: "data/hangzhou-track.json",dataType: "json", //返回數(shù)據(jù)形式為jsonsuccess: function (data) {console.log(data);var lines = data.map(function (track) {return {coords: track.map(function (seg, idx) {return seg.coord;})};});myChart.setOption({animation: false,bmap: {center: [120.13066322374, 30.240018034923],zoom: 14,roam: true,mapStyle: {styleJson: [{'featureType': 'water','elementType': 'all','stylers': {'color': '#d1d1d1'}},{'featureType': 'land','elementType': 'all','stylers': {'color': '#f3f3f3'}},{'featureType': 'railway','elementType': 'all','stylers': {'visibility': 'off'}},{'featureType': 'highway','elementType': 'all','stylers': {'color': '#fdfdfd'}},{'featureType': 'highway','elementType': 'labels','stylers': {'visibility': 'off'}},{'featureType': 'arterial','elementType': 'geometry','stylers': {'color': '#fefefe'}},{'featureType': 'arterial','elementType': 'geometry.fill','stylers': {'color': '#fefefe'}},{'featureType': 'poi','elementType': 'all','stylers': {'visibility': 'off'}},{'featureType': 'green','elementType': 'all','stylers': {'visibility': 'off'}},{'featureType': 'subway','elementType': 'all','stylers': {'visibility': 'off'}},{'featureType': 'manmade','elementType': 'all','stylers': {'color': '#d1d1d1'}},{'featureType': 'local','elementType': 'all','stylers': {'color': '#d1d1d1'}},{'featureType': 'arterial','elementType': 'labels','stylers': {'visibility': 'off'}},{'featureType': 'boundary','elementType': 'all','stylers': {'color': '#fefefe'}},{'featureType': 'building','elementType': 'all','stylers': {'color': '#d1d1d1'}},{'featureType': 'label','elementType': 'geometry.fill','stylers': {'color': '#848484'}},{'featureType': 'label','elementType': 'geometry','stylers': {'visibility': 'off'}}]}},series: [{type: 'lines',coordinateSystem: 'bmap',data: lines,polyline: true,lineStyle: {normal: {color: 'purple',opacity: 0.4,width: 1}}}]});},error: function (errorMsg) {//請求失敗時執(zhí)行該函數(shù)alert("圖表請求數(shù)據(jù)失敗!");}})});
</script>
</body>
</html>
參考
- https://echarts.apache.org/examples/zh/index.html#chart-type-graph
- https://github.com/seminar2012/echarts/blob/master/test/lines-track.html
總結(jié)
以上是生活随笔為你收集整理的Echarts读取本地json文件渲染轨迹，亲测ok的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IDEA Java解析GeoJson.j
- 下一篇： JAVA IDEA集成geotools