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>
相关推荐
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
帅得不敢出门7 小时前
安卓设备adb执行AT指令控制电话卡
android·adb·sim卡·at指令·电话卡
薛一半7 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
过期的H2O27 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage7 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
你好龙卷风!!!8 小时前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
我又来搬代码了9 小时前
【Android】使用productFlavors构建多个变体
android
shenweihong10 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序