ECharts散点图地图加载不出来的问题

1. 需要的效果图

这里写图片描述

遇到的问题:Echarts3.0 散点图只显示南沙群岛,如下图所示。

这里写图片描述

2. 解决方法

2.1 去官网下载需要的ECharts版本 http://echarts.baidu.com/download.html

这里写图片描述

注意:刚开始我用的是“常用“版本,虽然官网说包含散点图,但是我需要的图还是无法加载,换成完整版的问题解决。

2.2 散点图涉及到地图,需要下载地图数据 http://echarts.baidu.com/download-map.html

有两种引用地图的方式: js 的方式和 json 的方式,刚才下载的地址上有说明。

这里写图片描述

原因:3.0 里地图数据是单独加载的,地图数据,js 文件可以直接 script 标签引入,json 文件可以用 jquery 等异步加载然后用如下方式注册到 echarts 中。

$.get('map/json/china.json', function (geoJson) {
    echarts.registerMap('china', geoJson);
});

加载 js 文件

<script src="js/vendor/jquery-3.2.1.min.js"></script>
<script src="js/vendor/echarts.min.js"></script>
<script src="js/china.js"></script>

问题解决

总结:不难,但是需要熟练使用

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将 Echarts 3D 散点图嵌入地图中,你需要使用 Echarts地图组件和 3D 散点图组件。以下是一些步骤: 1. 在 HTML 文件中引入 Echarts 库和地图数据文件: ```html <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/extension/dataTool.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/extension/map3d.min.js"></script> ``` 2. 在 JavaScript 文件中创建 Echarts 实例和配置项: ```javascript var chart = echarts.init(document.getElementById('map')); // 地图配置项 var mapOption = { bmap: { center: [116.46, 39.92], zoom: 10, roam: true }, series: [] }; // 3D 散点图配置项 var scatterOption = { tooltip: {}, visualMap: { min: 0, max: 100, inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] } }, series: [{ type: 'scatter3D', symbolSize: 10, data: [ [116.41637, 39.928353, 80], [116.41637, 39.928353, 50], [116.41637, 39.928353, 30], // more data... ], shading: 'lambert', label: { formatter: '{b}', position: 'right', show: false }, itemStyle: { color: '#ddb926' } }] }; // 合并两个配置项 var option = Object.assign({}, mapOption, scatterOption); ``` 3. 加载地图数据和 3D 散点图数据,并将其添加到 Echarts 实例中: ```javascript // 加载地图数据 $.getJSON('https://echarts.baidu.com/examples/data/asset/data/bj.json', function (geoJson) { echarts.registerMap('bj', geoJson); chart.setOption(option); }); // 加载 3D 散点图数据 $.get('https://echarts.baidu.com/examples/data/asset/data/locations.txt', function (data) { data = data.split('\n').map(function (line) { return line.split(' ').map(function (item) { return parseFloat(item); }); }); chart.setOption({ series: [{ type: 'scatter3D', data: data }] }); }); ``` 4. 在 HTML 文件中添加一个 div 元素来显示地图: ```html <div id="map" style="width: 100%; height: 600px;"></div> ``` 这样,你就可以在地图上嵌入 3D 散点图了。当然,具体的实现还需要根据你的实际需求来进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值