Echarts读取本地json文件渲染轨迹，亲测ok

1. 报错及解决
2. 效果图
3. 源码lines-track.html如下
参考

1. 报错及解决

报错：由于浏览器的同源策略
已拦截跨源请求：同源策略禁止读取位于 file:///D:/learn/echarts/test/data/hangzhou-tracks.json 的远程资源。（原因：CORS 请求不是 http）。
。

解决：
1. firefox about:config 设置 security.fileuri.strict_origin_policy 为false
2. get请求修改为ajax get请求，完美解决；
3. 搭建http服务获取json，34行不管用，步骤3可省略

2. 效果图

修改hangzhou-track.json后成功渲染，结果如下图：（用自己的少量抽稀后的轨迹数据集）

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, //同步执行//url: "http://localhost:8000/users/getJson/",url: "data/hangzhou-track.json",dataType: "json", //返回数据形式为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) {//请求失败时执行该函数alert("图表请求数据失败!");}})});
</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

Echarts读取本地json文件渲染轨迹，亲测ok相关推荐

android mp3 lrc歌词文件utf-8歌词显示为乱码,Android读取本地json文件的方法(解决显示乱码问题)...
本文实例讲述了Android读取本地json文件的方法.分享给大家供大家参考,具体如下: 1.读取本地JSON ,但是显示汉字乱码 public static String readLocalJson ...
jquery ajax json文件,jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
JS 变量保存为本地json文件，读取本地json文件为变量
一.变量保存为本地json文件: 第一步:把返回的数据转成json格式 var content = json.stringify(data); 第二步:把转成blob这种格式 ...
Vue.js读取本地json文件并分页显示
Vue.js读取本地json文件并分页显示 1.功能实现通过axios异步加载技术读取本地的json文件内容,并通过vue.js处理数据在h5页面分页显示(这里以3行数据分页) 2.student. ...
php读本地json文件内容,php读取本地json文件有哪些方法
这次给大家带来php读取本地json文件有哪些方法,php读取本地json文件的注意事项有哪些,下面就是实战案例,一起来看一下. 1.data.json文件{ "goods":[ ...
Vue3通过axios来读取本地json文件
前言一般前端mock数据或者数据量过大且不需要考虑安全问题,或者数据稳定不需要常做变更的场景,这些数据可以由前端进行维护,将数据转为json文件放到前端本地进行读取. 本人在项目开发中,要实现地图的 ...
vue 项目如何读取本地json文件数据
在项目根目录有一个static文件夹目录,将所需要的json文件放在该static目录下,使用axios发起get请求获取对应的json文件数据 import axios from 'axios' / ...
JavaScript读取本地json文件方式
JavaScript读取本地文件方式: 假如有本地文件:authors.json 内容为: [ {"name": "Kwan-Liu Ma","num ...
vue2.0+ axios如何读取本地json文件的数据
1.用vue-cli搭建起一个hello-world(名字随意)的工程,不做任何修改. 2.引入Axios. 在入口文件main.ts中引入Axios import Axios from 'axios ...

Echarts读取本地json文件渲染轨迹，亲测ok

Echarts读取本地json文件渲染轨迹，亲测ok

1. 报错及解决

2. 效果图

3. 源码lines-track.html如下

参考

Echarts读取本地json文件渲染轨迹，亲测ok相关推荐

最新文章

热门文章