Android 实现三维空间坐标系(WebView与JS交互,支持多条曲线,可设置坐标轴翻转等)

全部代码已经上传,点击上方进行下载

支持多条曲线的绘制,可旋转拖动放大缩小

1.布局文件:

java 复制代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <WebView
        android:id="@+id/web_view1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

2.activity中:

java 复制代码
 private WebView web_view;
    private JSONObject jsonObject;
    private ArrayList<ArrayList<JSONObject>> objectlist;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        web_view = findViewById(R.id.web_view1);
        web_view.getSettings().setJavaScriptEnabled(true);
        //定义json,用于传值给html,然后在html中获取传入的数据进行显示。
        objectlist = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            ArrayList<JSONObject>  jsonObjectlist = new ArrayList<>();
             for (int j = 0; j < 20; j++) {
                JSONObject jsonObject = new JSONObject();
                try {
                    jsonObject.put("x", j);
                    jsonObject.put("y", j);
                    jsonObject.put("z", j);
                } catch (JSONException e) {
                    e.printStackTrace();
                }
                jsonObjectlist.add(jsonObject);
            }
            objectlist.add(jsonObjectlist);
        }

        //加载html
        web_view.loadUrl("file:///android_asset/index.html");



        //这里是当html加载完成后执行传值操作
        web_view.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                String jsonString = objectlist.toString();
                view.evaluateJavascript("javascript:test('" + jsonString + "');", null);
            }
        });
    }

3.写一个html,命名为index.html,并放在Android项目的assets文件目录下:

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3d图表</title>
    <script src="./js/echarts.js"></script>
    <script src="./js/echarts-gl.js"></script>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        html,
        body {
            width: 100%;
            height: 100vh;        
        }

        .main {
            width: 100%;
            height: 100vh;        
        }

         .popup {
      display: none; /* 默认隐藏弹窗 */
      position: fixed; /* 弹窗位置固定 */
      top: 50%; /* 垂直居中 */
      left: 50%; /* 水平居中 */
      transform: translate(-50%, -50%); /* 使用 transform 实现居中 */
      width: 300px; /* 弹窗宽度 */
      padding: 20px; /* 弹窗内边距 */
      background-color: #f1f1f1; /* 弹窗背景色 */
      border: 1px solid #ccc; /* 弹窗边框 */
      border-radius: 5px; /* 弹窗圆角 */
    }


    </style>

</head>

<body>

<div class="main">

</div>

<script>

 function test(jsonString) {
         var data1 = JSON.parse(jsonString);
         var data = [];
         var chartDom = document.querySelector('.main');
         var myChart = echarts.init(chartDom);
         var option;
         // 定义一个数组
         const series = []
         //循环接数据
         for (var i = 0; i < data1.length; i++) {
              var data = [];
              for (var j = 0; j < data1[i].length; j++) {
                data.push([data1[i][j].x, -data1[i][j].z, data1[i][j].y]);
               }
                //每条分支画线
                   series.push({
                        type: 'line3D',
                        data: data,
                        lineStyle: {
                    width: 4
                   }
                   })
            }


         option = {
             tooltip: {},
             backgroundColor: '#fff',
             xAxis3D: {
                 type: 'value',
                },
             yAxis3D: {
                type: 'value',
                },
             zAxis3D: {
                type: 'value',
                },
             grid3D: {
                viewControl: {
                   projection: 'orthographic'
                },
                },
             series,
            };
            option && myChart.setOption(option);
         }
</script>

</body>

</html>
相关推荐
Eastsea.Chen1 小时前
MTK Android12 user版本MtkLogger
android·framework
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā7 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue