可视化例子(11)——ECharts line3D制作三维折线图

最新推荐文章于 2024-02-02 10:19:40 发布
最新推荐文章于 2024-02-02 10:19:40 发布
阅读量9.4k 收藏 25
点赞数 5
分类专栏： 可视化 Echarts 文章标签： 可视化 line3D
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ocean111best/article/details/104488935
版权

因工作需要，制作了三维折线图，可以看到三个变量的变化。其效果如下图所示：

其中遇到了一个很大的问题，line3D 无法出现标签（查看了所有配置项，均没有该配置，这应该是 ECharts 的一个 bug），即如图所示中数值无法出现。后来想到的解决办法是再画个散点图（scatter3D），因 3D 散点图可以出现标签。3D 折线图套上散点图，就如同折线图上面可以出现标签了。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Line 3D - ECHARTS-GL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
    <link rel="stylesheet" href="./../common.css">
</head>
<body>
<div id="main"></div>
<script src="../../node_modules/echarts/dist/echarts.js"></script>
<script src="../../dist/echarts-gl.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../js/commonUI.js"></script>
<script>

//广州市----
//data 里面每一个子数组分别存放的是各个区每日的人数值
data = [
    [0,0,0,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,1,1,1],  //从化区
    [0,1,3,3,4,7,7,8,8,8,8,8,8, 8,8,8,8,8,8,8,8,8],  //南沙区
    [5,6,9,9,9,11,11,11,13,13,14,14, 14,16,16,16,16,16,18,18,18,18],  //黄浦区
    [1,2,2,5,5,9,11,12,12,12,14,15, 15,15,15,15,16,16,17,19,19,19],  //花都区
    [1,1,1,1,2,5,6,6,8,12,15,16,16, 17,17,17,17,17,17,17,17,17],     //荔湾区
    [0,0,1,1,5,7,9,11,12,13,17,17, 17,17,17,17,17,17,17,17,17,17],    //增城区
    [5,5,6,11,16,17,17,26,27,29, 33,34,34,34,35,35,35,35,35,35,35,35],   //越秀区
    [5,5,7,11,14,16,18,20,25,25, 31,33,34,34,34,36,38,38,40,40,40,40],   //番禺区
    [13,17,22,22,26,33,34,36,36, 37,39,40,40,42,42,42,43,43,44,44,44,44],  //天河区
    [8,10,11,15,20,24,26,32,37, 44,47,54,57,60,61,63,63,64,64,65,66,66],   //海珠区
    [13,16,17,27,35,45, 49,53,58,61,65,66,68, 69,71,73,73,73,74,74,74,74]   //白云区
]

dataX = ['1/27', '1/28','1/29','1/30','1/31','2/1','2/2','2/3','2/4',
    '2/5','2/6','2/7','2/8','2/9','2/10','2/11','2/12','2/13',
    '2/14','2/15','2/16','2/17'];
dataY = ['从化区','南沙区','黄浦区','花都区','荔湾区','增城区',
    '越秀区','番禺区','天河区','海珠区','白云区'];

//vdata里面存放的是处理之后的数据
var vdata = [];

for(i=0;i<dataY.length;i++){
    vdata[i] = [];   //vdata里面存放的是二维数组
}

//将处理完之后的数据存放到 vdata 里面
for(var t=0;t<dataY.length;t++){
    var y = dataY[t];
    for(var k=0;k<data[0].length;k++){
        for(var p=0;p<dataX.length;p++){
            var x = dataX[p];
            var z = data[t][p];
            vdata[t].push([x,y,z]);
        }
        break;
    }
}

var chart = echarts.init(document.getElementById('main'));

chart.setOption({
    xAxis3D: {
        type: 'category',
        name: '',
        data: dataX,
        axisLabel:{
            show: true,
            interval: 0  //使x轴都显示
        }
    },
    yAxis3D: {
        type: 'category',
        name: '',
        data: dataY,
        axisLabel:{
            show: true,
            interval: 0   //使y轴都显示
        }
    },
    zAxis3D: {
        type: 'value',
        name: ''
    },
    //图例
    legend: {
        orient: 'vertical',
        right: 300,
        top: 230,
        icon: 'roundRect',
        textStyle:{
            color: '#fff'
        }
    },
    tooltip:{
        show:true
    },
    grid3D: {
        boxWidth: 300,
        boxHeight:120,
        boxDepth: 200,
        axisLine: {
            show: true,
            interval: 0,
            lineStyle: {
                color: '#fff'
            }
        },
        viewControl: {
            distance: 400
        }
    },
    series: [
        {
            type: 'scatter3D',
            name: '从化区',
            itemStyle:{
                color: 'rgb(165,  0, 38)'
            },
            label: {  //当type为scatter3D时有label出现
                show:true,
                position: 'bottom',
                distance : 0,
                textStyle:{
                    color:'#ffffff',
                    fontSize: 12,
                    borderWidth: 0,
                    borderColor: '#c6c6c6',
                    backgroundColor: 'transparent'
                }
            },
            data:vdata[0]    //每个区的数据一一对应
        },
        {
            type: 'scatter3D',
            name: '南沙区',
            itemStyle:{
                color: 'rgb(215, 48, 39)'
            },
            label: {
                show:true,
                position: 'bottom',
                distance : 0,
                textStyle:{
                    color:'#ffffff',
                    fontSize: 12,
                    borderWidth: 0,
                    borderColor: '#c6c6c6',
                    backgroundColor: 'transparent'
                }
            },
            data:vdata[1]
        },
        {
            type: 'scatter3D',
            name: '黄浦区',
            itemStyle:{
                color: 'rgb(244,109, 67)'
            },
            label: {
                show:true,
                position: 'bottom',
                distance : 0,
                textStyle:{
                    color:'#ffffff',
                    fontSize: 12,
                    borderWidth: 0,
                    borderColor: '#c6c6c6',
                    backgroundColor: 'transparent'
                }
            },
            data:vdata[2]
        },
        {
            type: 'scatter3D',
            name: '花都区',
            itemStyle:{
                color: 'rgb(253,174, 97)'
            },
            label: {
                show:true,
                position: 'bottom',
                distance : 0,
                textStyle:{
                    color:'#ffffff',
                    fontSize: 12,
                    borderWidth: 0,
                    borderColor: '#c6c6c6',
                    backgroundColor: 'transparent'
                }
            },
            data:vdata[3]
        },
        {
            type: 'scatter3D',
            name: '荔湾区',
            itemStyle:{
                color: 'rgb(254,224,144)'
            },
            label: {
                show:true,
                position: 'bottom',
                distance : 0,
                textStyle:{
                    color:'#ffffff',
                    fontSize: 12,
                    borderWidth: 0,
                    borderColor: '#c6c6c6',
                    backgroundColor: 'transparent'
                }
            },
            data:vdata[4]
        },
        {
            type: 'scatter3D',
            name: '增城区',
            itemStyle:{
                color: 'rgb(255,255,191)'
            },
            label: {
                show:true,
                position: 'top',
                distance : 0,
                textStyle:{
                    color:'#ffffff',
                    fontSize: 12,
                    borderWidth: 0,
                    borderColor: '#c6c6c6',
                    backgroundColor: 'transparent'
                }
            },
            data:vdata[5]
        },
        {
            type: 'scatter3D',
            name: '越秀区',
            itemStyle:{
                color: 'rgb(224,243,248)'
            },
            label: {
                show:true,
                position: 'bottom',
                distance : 0,
                textStyle:{
                    color:'#ffffff',
                    fontSize: 12,
                    borderWidth: 0,
                    borderColor: '#c6c6c6',
                    backgroundColor: 'transparent'
                }
            },
            data:vdata[6]
        },
        {
            type: 'scatter3D',
            name: '番禺区',
            itemStyle:{
                color: 'rgb(171,217,233)'
            },
            label: {
                show:true,
                position: 'top',
                distance : 0,
                textStyle:{
                    color:'#ffffff',
                    fontSize: 12,
                    borderWidth: 0,
                    borderColor: '#c6c6c6',
                    backgroundColor: 'transparent'
                }
            },
            data:vdata[7]
        },
        {
            type: 'scatter3D',
            name: '天河区',
            itemStyle:{
                color: 'rgb(116,173,209)'
            },
            label: {
                show:true,
                position: 'top',
                distance : 0,
                textStyle:{
                    color:'#ffffff',
                    fontSize: 12,
                    borderWidth: 0,
                    borderColor: '#c6c6c6',
                    backgroundColor: 'transparent'
                }
            },
            data:vdata[8]
        },
        {
            type: 'scatter3D',
            name: '海珠区',
            itemStyle:{
                color: 'rgb( 69,117,180)'
            },
            label: {
                show:true,
                position: 'top',
                distance : 0,
                textStyle:{
                    color:'#ffffff',
                    fontSize: 12,
                    borderWidth: 0,
                    borderColor: '#c6c6c6',
                    backgroundColor: 'transparent'
                }
            },
            data:vdata[9]
        },
        {
            type: 'scatter3D',
            name: '白云区',
            itemStyle:{
                color: 'rgb( 49, 54,149)'  //点的颜色
            },
            label: {
                show:true,
                position: 'top',
                distance : 0,
                textStyle:{
                    color:'#ffffff',
                    fontSize: 12,
                    borderWidth: 0,
                    borderColor: '#c6c6c6',
                    backgroundColor: 'transparent'
                }
            },
            data:vdata[10]
        },
        {
            type: 'line3D', //当type为line3D时有label没有作用，官网没有label这个配置项
            name: '从化区',
            lineStyle: {
                width: 8,   //线的宽度
                color: 'rgb(165,  0, 38)'   //线的颜色
            },
            data:vdata[0]   //线数据和点数据所需要的格式一样
        },
        {
            type: 'line3D',
            name: '南沙区',
            lineStyle: {
                color: 'rgb(215, 48, 39)',  //线的颜色
                width: 8     //线的宽度
            },
            data:vdata[1]
        },
        {
            type: 'line3D',
            name: '黄浦区',
            lineStyle: {
                color: 'rgb(244,109, 67)',
                width: 10
            },
            data:vdata[2]
        },
        {
            type: 'line3D',
            name: '花都区',
            lineStyle: {
                color: 'rgb(253,174, 97)',
                width: 8
            },
            data:vdata[3]
        },
        {
            type: 'line3D',
            name: '荔湾区',
            lineStyle: {
                color: 'rgb(254,224,144)',
                width: 8
            },
            data:vdata[4]
        },
        {
            type: 'line3D',
            name: '增城区',
            lineStyle: {
                color: 'rgb(255,255,191)',
                width: 8
            },
            data:vdata[5]
        },
        {
            type: 'line3D',
            name: '越秀区',
            lineStyle: {
                color: 'rgb(224,243,248)',
                width: 8
            },
            data:vdata[6]
        },
        {
            type: 'line3D',
            name: '番禺区',
            lineStyle: {
                color: 'rgb(171,217,233)',
                width: 8
            },
            data:vdata[7]
        },
        {
            type: 'line3D',
            name: '天河区',
            lineStyle: {
                color: 'rgb(116,173,209)',
                width: 8
            },
            data:vdata[8]
        },
        {
            type: 'line3D',
            name: '海珠区',
            lineStyle: {
                color: 'rgb( 69,117,180)',
                width: 8
            },
            data:vdata[9]
        },
        {
            type: 'line3D',
            name: '白云区',
            lineStyle: {
                color: 'rgb( 49, 54,149)',
                width: 8
            },
            data:vdata[10]
        }
    ]
});

window.addEventListener('resize', function () {
    chart.resize();
});

</script>
</body>
</html>

其中最终传入的数值 vdata 是二维数组，为如下所示：

其中配色也是用 ColorBrewer.js

爱睡懒觉的老舅
关注
  • 5
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
python_pyecharts画三维折线图1.csv
08-04
python_pyecharts画三维折线图 测试数据
echarts实现3D地球模式--3D线和标记mark
zk_1325572803的博客
01-16 9864
echarts实现3D地球模式–3D线和标记mark 效果 代码 <div id="container"> </div> <script type="text/javascript" src="js/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" ...
echarts中绘制3D三维地球
zhang_zan
02-02 1247
echarts中绘制3D三维地球
Echarts折线图曲线图和三维图
qq_36982349的博客
03-04 6041
1 折线图 鼠标放在点上时显示的数据效果，在代码中用到的就是tooltip这个参数，其中show的默认值是true，可以省略，当我们不想显示悬浮提示效果，将show修改为false。trigger设置这个参数，效果是可以看到一个竖直的虚线，不添加则不显示。backgroundColor效果是显示数据的弹窗对应的背景色，需要什么颜色自行设置。extraCssText可以设置弹窗显示的阴影效果。 配置项的全部代码 options: {    title:&n
Echarts可视化教程（三）——折线图的绘制
fh8uuc的博客
10-21 4116
阶梯图是一种比较特殊的折线图，阶梯图使用间歇型跳跃的方式显示一种无规律的数据的变化。我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！之间补充代码，这段代码由上面的堆积折线图示例代码修改而来，你需要补充完这段代码，实现将所有的四条折线都改成阶梯图：其中地铁。同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。中折线图的绘制，包括标准折线图、堆积折线图等。
Python数据可视化 Pyecharts 制作 Line3D 3D折线图
热门推荐
Mr数据杨
06-15 3万+
大家好，我是Mr数据杨。想象一下，郭嘉正在用Python为曹操分析各路诸侯的兵力走势。Line3D作为郭嘉手中的神兵利器，能够以三维折线图形式直观地展示每个诸侯国家的兵力变化，其在时间、地点和数量三个维度的波动一览无遗。这个图就像是一幅历史的长卷，将三国历年来的动荡局面绘制出来。基本设置，就如同军师为主公摆开的战场大盘，它决定了这个3D折线图的基础框架。是否开启动画，展示的颜色，以及初始的视角位置，都在这里一一设定。坐标轴设置，它就像是兵种的部署，决定了战场上士兵的分布和行进方向。
3D折线图 html
12-21
在一个三维座标系下画三维折线图，，，，，，，，，，
echarts 3D折线图应用
zt60112的博客
07-13 6278
废话不多说，先上效果图 公司最近做一个振动项目，需要展示振动曲线，考虑其直观性，决定用3D折线图来做。 首先你要引入echarts的相关js，下图为我引入的例子，其中GL那个js是echarts控制3D的，你可根据自己需要去echarts官方网站上下载这俩js <script src="${ctxStatic}/plugin/echarts4/echarts.min.js"></script> <script src="${ctxStatic}/plugin/echarts4/
263Echarts - 3D 折线图（三维折线图正交投影）
阿甘兄
05-06 7722
效果图 源代码 var data = []; // Parametric curve for (var t = 0; t < 25; t += 0.001) { var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t); var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t); ...
vue echarts 三维折线图
qq_51313111的博客
07-17 2481
<template> <div id="main" style="width: 900px;height: 600px"></div> </template> <script> import * as echarts from 'echarts'; import 'echarts-gl' export default { name: "hello", mounted() { this.drewLine() }, met
echarts3 折线图、柱状图
amu81918的博客
06-14 198
<%@ page contentType="text/html; charset=UTF-8"%> <%@ taglib prefix="e" uri="/firefly-theme-taglib" %> <%@ taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE html> &l...
echarts结合echarts-gl实现3D飞线地球可视化
08-05
echarts结合echarts-gl实现3D飞线地球可视化，这里提供一个简单案例的实现方式，访问页面需要通过类似vscode插件之Live Server等服务器的方式打开
基于Matlab绘制二维三维统计可视化图（源码）.rar
07-24
基于Matlab绘制二维三维统计可视化图（源码）.rar
分享一种echarts的三维动态地图效果
01-21
内容概要：使用echarts地图实现的三维立体动态风格的地图效果，地图边界还带有动态流动线条效果。 目标人群：前端开发工程师，大屏可视化开发人员 使用场景：地图三维立体可视化展示效果
vtk9.1——最新编译后的三维可视化库
12-20
是一个开源的免费软件系统，主要用于三维计算机图形学、图像处理和可视化。Vtk是在面向对象原理的基础上设计和实现的，它的内核是用C++构建的，包含有大约250,000行代码，2000多个类，还包含有几个转换界面。 编译了官网给的最新版本。官网给的是源码，这里编译成了dll，lib和头文件。适合vtk初学者。
echarts核心js以及用于3D效果的js
11-07
个人下载总结的关于echarts的核心js以及用于3D效果显示的封装js
数据可视化-制作折线图
最新发布
04-08
数据可视化-制作折线图
echarts柱状图饼图折线图.zip
07-31
echarts 电脑端 柱状图 折线图 饼图 散点图 js html
Springboot+mybatis+echarts实现数据可视化 折线图饼图柱状图
06-22
Springboot+mybatis+echarts实现数据可视化 可实现折线图饼图柱状图
echarts 三维折线图
08-12
Echarts是一款基于JavaScript的可视化库，它提供了丰富的图表类型，包括三维折线图。使用Echarts绘制三维折线图可以展示数据在三个维度上的变化趋势。 要绘制Echarts的三维折线图，你需要按照以下步骤进行操作： 1. 引入Echarts库：在HTML文件中引入Echarts的JavaScript文件。 2. 创建一个容器：在HTML文件中创建一个容器，用于展示图表。 3. 初始化图表：使用Echarts提供的API初始化一个图表实例。 4. 配置图表选项：使用Echarts提供的API配置图表的样式、数据和其他属性。 5. 渲染图表：使用Echarts提供的API将图表渲染到之前创建的容器中。 对于三维折线图，你可以通过配置Echarts的option对象来定义图表的样式和数据。在option对象中，你可以设置x、y和z轴的坐标刻度、标签和样式，以及线条的样式和数据。 以下是一个示例的Echarts三维折线图的代码片段： ```javascript // 引入Echarts库 <script src="echarts.min.js"></script> // 创建一个容器 <div id="chart-container" style="width: 400px; height: 300px;"></div> // 初始化图表 var chart = echarts.init(document.getElementById('chart-container')); // 配置图表选项 var option = { grid3D: {}, // 开启3D网格 xAxis3D: {}, // x轴配置 yAxis3D: {}, // y轴配置 zAxis3D: {}, // z轴配置 series: [{ // 线条配置 type: 'line3D', data: [[0, 0, 0], [1, 1,

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值