94Echarts - 地理坐标/地图(Use lines to draw 1 million ny streets.)

简介: 94Echarts - 地理坐标/地图(Use lines to draw 1 million ny streets.)
效果图

源代码
var CHUNK_COUNT = 32;
var dataCount = 0;
function fetchData(idx) {
    if (idx >= CHUNK_COUNT) {
        return;
    }
    var dataURL = `data/asset/data/links-ny/links_ny_${idx}.bin`;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', dataURL, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function (e) {
        var rawData = new Float32Array(this.response);
        var data = new Float64Array(rawData.length - 2);
        var offsetX = rawData[0];
        var offsetY = rawData[1];
        var off = 0;
        var addedDataCount = 0;
        for (var i = 2; i < rawData.length;) {
            var count = rawData[i++];
            data[off++] = count;
            for (var k = 0; k < count; k++) {
                var x = rawData[i++] + offsetX;
                var y = rawData[i++] + offsetY;
                data[off++] = x;
                data[off++] = y;
                addedDataCount++;
            }
        }
        myChart.appendData({
            seriesIndex: 0,
            data: data
        });
        dataCount += addedDataCount;
        fetchData(idx + 1);
    }
    xhr.send();
}
option = {
    progressive: 20000,
    backgroundColor: '#111',
    geo: {
        center: [-74.04327099998152, 40.86737600240287],
        zoom: 360,
        map: 'world',
        roam: true,
        silent: true,
        itemStyle: {
            normal: {
                color: 'transparent',
                borderColor: 'rgba(255,255,255,0.1)',
                borderWidth: 1
            }
        }
    },
    series: [{
        type: 'lines',
        coordinateSystem: 'geo',
        blendMode: 'lighter',
        dimensions: ['value'],
        data: new Float64Array(),
        polyline: true,
        large: true,
        lineStyle: {
            color: 'orange',
            width: 0.5,
            opacity: 0.3
        }
    }]
}
fetchData(0);
目录
相关文章
|
2月前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
312 1
|
3月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
194 23
echarts地图数据信息流向图效果
|
2月前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
686 0
|
6月前
|
JSON 数据可视化 JavaScript
Echarts地图实现:山东省会员活跃度
使用ECharts展示山东会员活跃度,通过散点图和地图结合,颜色对比强烈,背景深蓝(#020933)、点色明亮黄(#F4E925)。核心代码示例展示了散点、地图及特效散点系列配置。[点击下载](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89493130)代码和数据。
95 0
Echarts地图实现:山东省会员活跃度
|
6月前
|
JSON JavaScript 前端开发
Echarts地图实现:杭州市困难人数分布
使用ECharts实现杭州困难人数分布地图,结合地区与散点图,动态展示数据变化。支持进入下级区域并返回。预览包含动画效果。关键代码涉及地图初始化、数据加载及事件处理。需`hangzhou-map.json`数据文件。完整代码和资源见链接。
117 0
|
5月前
echarts 热力图(中国地图版)
echarts 热力图(中国地图版)
198 0
|
5月前
echarts 高亮轮廓的中国地图
echarts 高亮轮廓的中国地图
208 0
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
81 1
|
2月前
|
JavaScript
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
516 0
|
3月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】