echarts GL操作实践

最新推荐文章于 2024-09-03 15:07:27 发布
置顶 最新推荐文章于 2024-09-03 15:07:27 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： echarts学习之路 文章标签： 前端 jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38101304/article/details/106487951
版权 
<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/echarts/layer/theme/default/layer.css" th:href="@{echarts/layer/theme/default/layer.css}" rel="stylesheet"/>
    <link href="../static/echarts/nano.min.css" th:href="@{/echarts/nano.min.css}" rel="stylesheet"/>
</head>
<style>
    .changeColor {
        position: relative;
        bottom: 80px;
        left: 5px;
        display: flex;
        width: 100px;
        justify-content: space-between;
    }
    .chart {
        height: 100%;
    }
    body {
        margin: 0px;
        height: 100%;
    }
    html {
        height: 100%;
    }
    .beautiful {
        width: 40px;
        height: 28.8px;
        border-radius: 3px;
        border: 2px solid #337ab7;
        display: none;
        position: absolute;
        left: 100%;
        bottom: 100%;
    }
    .btns{
        height: 28.8px;
        position: absolute;
        left: 160%;
        bottom: 120%;
    }
</style>
<script th:src="@{/js/jquery.min.js}" src="../static/js/jquery.min.js"></script>
<script th:src="@{/echarts/echarts.min.js}" src="../static/echarts/echarts.min.js"></script>
<script th:src="@{/echarts/echarts.GL.min.js}" src="../static/echarts/echarts.GL.min.js"></script>
<script th:src="@{/echarts/layer/layer.min.js}"></script>
<script th:src="@{/echarts/axios.min.js}" src="../static/echarts/axios.min.js"></script>
<script th:src="@{/echarts/pickr.min.js}" src="../static/echarts/pickr.min.js"></script>
<script th:src="@{/ruoyi/js/ry-ui.js}"></script>
<div id="chart" class="chart">
</div>
<body>
    <div class="changeColor">
        <div id="color1"></div>
        <div id="color2"></div>
        <div id="color3"></div>
        <input contenteditable="true" type="text" class="beautiful"/>
        <button class="btn btn-warning btns" onclick="setFlashTime()" id="btn">刷新时间</button>
        <input contenteditable="true" type="text"onchange="updateArea(this)"/>
    </div>
</body>
    <script th:inline="javascript">
         var ctx = [[@{/}]];
        var LastOne={};
        var ModbusAddrSum="";
        var PressureType="";
         const prefix = ctx + "workOrder/order";
        //获取当前支架的数量和类型
        $(function () {
            $.ajax({
                type:"get",
                url:prefix+"/getConfig",
                dataType:"json",
                success:function (data) {
                    ModbusAddrSum=data.ModbusAddrSum;
                    PressureType=data.PressureType;
                }
            })
        });


       const txtstyle={
          'color':'white',
          'fontFamily':'"microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei",sans-serif',
           'fontSize':22
           };

        const myChart = echarts.init(document.getElementById("chart"), "shine");
        window.onresize = function(){
            myChart.resize();
        };
        let option = {

        legend:{
             textStyle:{
             color:"white"
        }
        },
            grid3D: {
                viewControl: {
                    center: [20, -25, 0],
                    //projection:'orthographic'  正交投影
                    alpha:60,  //视角绕x轴的角度
                    beta:50, //视角绕y轴的角度
                    distance:300,

                },
                splitLine:false,//是否显示轴线
                boxWidth: 200,
                boxDepth: 150,//y轴的高度
                boxHeight:50,//z轴的高度
                show:true, //是否显示坐标轴

            },
            title:{
                text:"支架压力", //大标题
                left:20, //距离容器的距离
                top:20,
                textStyle:txtstyle

            },
            backgroundColor: '#173265',
            tooltip: {
                formatter: function(e) {
                const data = e.data;
                if (PressureType==1) {
                   return `
                        支架数量: ${data[2]}<br />
                        时间: ${data[3]}<br />
                        压力: ${data[1]}<br/>
                        最大值:${data[1]}
                    `
                }else{
                    return `
                        支架数量: ${data[2]}<br />
                        时间: ${data[3]}<br />
                        压力: ${data[1]}<br/>
                        最后值：${data[1]}<br/>

                    `
                }
                },
            },
            yAxis3D: {
                type: "category",
                name: "时间",
                axisLabel: {
                    interval:0,
                    color:"white"
                },
                //data:["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"],
                   data:["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16",
                       "17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33",
                       "34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50",
                       "51","52","53","54","55","56","57","58","59"],
                nameTextStyle:{
                    backgroundColor:"white",
                    fontSize:20,
                    padding:5
                },
                axisTick:{
                    lineStyle:{
                        color:"white"
                    }

                },

            },
            xAxis3D: {
                type: "category",
                name: "支架数量",
                axisLabel: {
                    interval:12,
                    color:"white"
                },
                axisTick:{
                    lineStyle:{
                        color:"white"
                    }

                },
                // minInterval: 1, //好看
                max:function () {
                    return ModbusAddrSum;
                },
                nameTextStyle:{
                    backgroundColor:"white",
                   fontSize:20,
                    padding:5
            }
            },
            zAxis3D: {
                nameTextStyle:{
                    backgroundColor:"white",
                    fontSize:20,
                    padding:5
                },
                name:"支架压力",
                axisTick:{
                    lineStyle:{
                        color:"white"
                    }

                },
                axisLabel:{
                    color:"white"
                }
            },
            visualMap: {
                type: "piecewise",
                dimension:1,
                //splitNumber: 3,
                // inRange: {
                //     color: ["#264653", "#2a9d8f", "#e9c46a"],
                // },
                pieces: [
                    { gte: 80, color: 'red' },
                    { gte: 64, lt: 80, color: 'blue' },
                    { gte: 40, lt: 64, color: 'yellow' },
                    { gte: 0, lt: 40, color: 'green' },
                    { value: 0, color: 'white' },
                ],
                textStyle:{
                    color:function(index){
                        var colors = ["red","blue","yellow","green","white"];
                        return colors[index];
                    },
                    fontSize:18
                }
            },
            dataset: {
                source: [],
            },
            series: [
                {
                    type: "bar3D",
                    //barGap:'100',/*多个并排柱子设置柱子之间的间距*/
                   // barCategoryGap:'100',//*多个并排柱子设置柱子之间的间距*
                    bevelSizeL:5,
                    shading: "lambert",
                    encode: {
                        x: "maxshelfval",
                        y: "FixTime",
                        z: "maxpressureval",
                    },
                    label: {
                        formatter: function(e){
                            return e.data[1];
                        },
                    },
                },
            ],
        };

        function getMax(data) {
            let _data_max=0;
            for (let i = 1; i < data.length; i++) {
                let v = parseInt(data[i][1]);
                if (v > _data_max) _data_max = v;

                LastOne[data[i][0]]=data[i][2];

            }
            return _data_max;
        };

        // function pickr() {
        //     var pickr1 = Pickr.create({
        //         el: "#color1",
        //         theme: "nano",
        //         default: "#0935bc",
        //         swatches: ["#0935bc"],
        //         components: {
        //             preview: true,
        //             opacity: true,
        //             hue: true,
        //             interaction: {
        //                 input: true,
        //                 clear: true,
        //                 save: true
        //             }
        //         },
        //         i18n: {
        //             "btn:save": "保存",
        //             "btn:clear": "取消"
        //         }
        //     });
        //     var pickr2 = Pickr.create({
        //         el: "#color2",
        //         theme: "nano",
        //         default: "#14ab27",
        //         swatches: ["#14ab27"],
        //         components: {
        //             preview: true,
        //             opacity: true,
        //             hue: true,
        //             interaction: {
        //                 input: true,
        //                 clear: true,
        //                 save: true
        //             }
        //         },
        //         i18n: {
        //             "btn:save": "保存",
        //             "btn:clear": "取消"
        //         }
        //     });
        //     var pickr3 = Pickr.create({
        //         el: "#color3",
        //         theme: "nano",
        //         default: "#b7a50c",
        //         swatches: ["#b7a50c"],
        //         components: {
        //             preview: true,
        //             opacity: true,
        //             hue: true,
        //             interaction: {
        //                 input: true,
        //                 clear: true,
        //                 save: true
        //             }
        //         },
        //         i18n: {
        //             "btn:save": "保存",
        //             "btn:clear": "取消"
        //         }
        //     });
        //     pickr1.on("save", color => {
        //         option.visualMap.inRange.color[0] = color.toHEXA().toString();
        //         myChart.setOption(option);
        //     });
        //     pickr2.on("save", color => {
        //         option.visualMap.inRange.color[1] = color.toHEXA().toString();
        //         myChart.setOption(option);
        //     });
        //     pickr3.on("save", color => {
        //         option.visualMap.inRange.color[2] = color.toHEXA().toString();
        //         myChart.setOption(option);
        //     });
        // }

        const url = prefix+"/test1";
        function getData(HZ) {
            axios.get(url).then((e) => {
                option.dataset.source = e.data; //这里把请求到的数据传入echarts
                option.visualMap.max=getMax(e.data);
                myChart.showLoading();     //数据加载完之前先显示一段简单的loading动画
                myChart.setOption(option);
                myChart.hideLoading();
                window.setTimeout(() => {
                    getData(HZ);
                }, (HZ?HZ:30) * 1000); //30s后 重新自己调用一次
            });
        }

        // pickr();
        var HZ=30;
        getData(HZ);
           function setFlashTime () {
           var btnVal= $("#btn").text();
           if (btnVal=="刷新时间"){
               $("#btn").text("确定").removeClass("btn-warning").addClass("btn-success");
               $(".beautiful").show();
           }
           if (btnVal=="确定"){
               var inputVal=$(".beautiful").val();
               if (inputVal=="") {
                 $.modal.alertWarning("请输入刷新时间!")
               }
               else {
               $.modal.confirm("确定修改刷新时间吗?",function () {
                   getData(inputVal);
                   layer.msg("修改成功");
                   $("#btn").text("刷新时间");
                   $(".beautiful").hide();
               })
           }
           }
           }



 //输入数据修改数据范围
        function updateArea(e) {
        var pieces=[];
        var data=$(e).val();
        if (data!=""){
            pieces.push({ gte: 80, color: 'red' });
            pieces.push({ gte: 64, lt: 80, color: 'blue' });
            pieces.push({ gte: 40, lt: 64, color: 'yellow' });
            pieces.push({gt:0,lt:data,colo:'green'});
            pieces.push({value:0,color:'white'});
            option.visualMap.pieces=pieces;
            myChart.setOption(option);
        }

        }

    </script>
</html>

图片采用了在这里插入图片描述 图片采用了echarts的3d效果，个人觉得echarts的属性比较灵活，每个属性基本都自带回调函数，便于我们灵活处理数据，重点要说一下option这个对象，所有的参数都在option对象中，我觉得最重要的方法是setOption方法，这个方法 可以方便我们处理一些需求，比如，我们要自定义映射范围，就可以通过重新设置option，然后在setoption方法，这俩方法，是最重要也是最好用的方法。 贴出来 记录一下，也方便大家 可以参考。

蜜蜂的快乐生活
关注
专栏目录
使用 ECharts-GL 实现世界级、国家级、省市级 3D 地图
duansamve的博客
09-24 1049
本篇文章，你将学习到如何利用 ECharts-GL 构建沉浸式的 3D 地图体验。并学习如何配置和定制地图的部分细节，包括地形、光照、视角以及纹理的三维表示
使用 ECharts GL 实现基础的三维可视化
月满闲庭的博客
06-26 1933
使用 ECharts GL 实现基础的三维可视化 ECharts GL （后面统一简称 GL）为 Apache EChartsTM 补充了丰富的三维可视化组件，这篇文章我们会简单介绍如何基于 GL 实现一些常见的三维可视化作品。实际上如果你对 ECharts 有一定了解的话，也可以很快的上手 GL，GL 的配置项完全是按照 ECharts 的标准和上手难度来设计的。 在看完文章之后，你可以前往 官方示例 和 Gallery 去了解更多使用 GL 制作的示例，对于文章中我们没法解释到的代码，也可以前往 GL
echarts-gl
12-14
百度官网给出的echarts版本与echarts-gl版本不匹配,这里给出历史版本下载
echarts-gl.js
12-15
ECharts GL 新增了三维的笛卡尔坐标系、地理坐标系，并且在这些新的三维坐标系基础上提供了六个新的系列类型，包括 散点图 scatter3D、折线图 line3D、柱状图 bar3D、曲面图 surface、飞线图 lines3D以及地图 map3D。展示出你想要的三维可视化作品。
echarts GL js
07-31
echarts中的GL表格js文档，需要单独引用，包JL 3d bar等
echarts-GLdemo实例，包含配对echarts和gl的js文件
09-06
echarts-GLdemo实例，包含配对echarts和gl的js文件
ECharts-GL 3D可视化库 v2.0.2-源码.zip
02-26
4. **交互性**：ECharts-GL保持了ECharts的优秀交互特性，用户可以通过鼠标和触摸进行旋转、缩放、平移等操作，动态探索3D视图。 5. **与其他ECharts组件的集成**：ECharts-GL可以无缝地与ECharts的其他2D图表配合...
3D地球echarts.min.js、echarts-gl.min.js、d3.js引用文件
07-19
本主题聚焦于三款JavaScript库：echarts.min.js、echarts-gl.min.js和d3.js，它们在构建3D地球可视化应用中扮演着关键角色。 首先，echarts.min.js是百度开发的一个强大的数据可视化库，基于JavaScript，支持多种...
echarts-gl 初体验
llxgdy的博客
08-07 8505
根据官方文档，首先需要下载echarts.js，echarts-gl.js并引入 在官网下载了文件一顿操作后各种报错，都是js文件的问题，这里放两个下载链接，需要自取 echarts.min.js echarts-gl.min.js 跟着文档实现了简单的三维笛卡尔坐标系，效果如下 代码： html <div id="main" style="width: 600px;height:400px;"></div> script <script type="text/javasc
新版echarts5.3.2离线文档
05-26
2. **API**：ECharts 提供了一系列JavaScript API，用于在运行时动态交互和操作图表，如初始化图表、设置数据、更新配置、加载更多数据、清除图表等。ECharts 5.3.2可能引入了新的API或对现有API进行了性能优化，以...
推荐开源项目：ECharts-GL —— 3D数据可视化的强大工具
gitblog_00089的博客
05-12 2267
推荐开源项目：ECharts-GL —— 3D数据可视化的强大工具 项目地址:https://gitcode.com/gh_mirrors/ec/echarts-gl 项目介绍 ECharts-GL是著名的数据可视化库Apache ECharts的一个扩展包，它将数据可视化的边界拓展到3D空间和全球视图，同时利用WebGL进行硬件加速，提供了更丰富、更生动的图表类型。通过ECharts-GL，你可...
echarts-gl.7z
09-04
ECharts GL 新增了三维的笛卡尔坐标系、地理坐标系，并且在这些新的三维坐标系基础上提供了六个新的系列类型，包括 散点图 scatter3D、折线图 line3D、柱状图 bar3D、曲面图 surface、飞线图 lines3D以及地图 map3D。
ECharts-GL三维数据可视化
weixin_52905182的博客
07-26 1791
多次调用 echarts.init 会导致内存泄漏，应当在恰当时机销毁已经存在的 ECharts 实例，clear()不会销毁实例，只是重新绘制图形，dispose()会销毁实例，需要重新构建 ECharts 对象。ECharts-GL，作为 ECharts 家族的一员，继承了 ECharts 的易用性和高性能，还引入了 WebGL 技术，用于创建令人惊叹的 3D 地图和数据可视化作品。~在绑定事件监听器时，要确保正确解绑，可以使用 ECharts 提供的off方法来取消事件。
ECharts-GL 深度指南
gitblog_00650的博客
08-09 1275
ECharts-GL 深度指南 项目地址:https://gitcode.com/gh_mirrors/ec/echarts-gl 项目介绍 ECharts-GL 是 Apache ECharts 的扩展包，专门用于提供地球可视化及三维图表功能。这个库基于 WebGL 技术，支持在网页中展示复杂的三维数据，包括但不限于散点图、线图、地形图等。ECharts-GL 能够帮助开发者轻松创建具有交互性的...
Echarts GL 结合mapbox趟坑记（使用appendData）
追逐丶的博客
03-05 5780
前言 echartsGL官网示例有个很炫酷的散点图，通过服务器分批加载实现了千万条以上数据的展示： domo可以看这里。 其实就是分批加载服务器数据然后呈现。看上去很简单，其实坑不是一般的多。 二、数据转换 通过官网下载上述demo，放到本地，打开控制台，找到数据请求地址，修改demo里的ROOTPATH，尝试在本地跑起来。一看，报错。接口不支持跨域。没办法，只能模拟一下接口返回的数据，通过Fl......
266Echarts - GL 矢量场图（Global wind visualization）
阿甘兄
05-06 2377
效果图 源代码 $.getJSON('data-gl/asset/data/winds.json', function (windData) { var data = []; var p = 0; var maxMag = 0; var minMag = Infinity; for (var j = 0; j < windData.ny; j++)...
echart echart-gl
jia_huining的博客
11-26 2815
import { mapdata} from '@/api/sendjob/130000.js'; var mapechart = this.$echarts.init(this.$refs.map);//初始化 this.$echarts.registerMap('mapname', mapdata} ); var option = { tooltip: { // 提示框 trigger: 'item', formatt...
ECharts-GL：3D数据可视化的强有力工具
最新发布
gitblog_00001的博客
09-03 772
ECharts-GL 是 Apache ECharts 的扩展包，利用 WebGL 技术提供3D数据可视化，支持3D散点图、三维网格和地球视图，适用于数据分析和地理信息展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值