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

全部代码已经上传，点击上方进行下载
3D空间坐标系样式
支持多条曲线的绘制，可旋转拖动放大缩小

1.布局文件：

<?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"><WebViewandroid:id="@+id/web_view1"android:layout_width="match_parent"android:layout_height="match_parent"/>
</LinearLayout>

2.activity中：

 private WebView web_view;private JSONObject jsonObject;private ArrayList<ArrayList<JSONObject>> objectlist;@Overrideprotected 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);}//加载htmlweb_view.loadUrl("file:///android_asset/index.html");//这里是当html加载完成后执行传值操作web_view.setWebViewClient(new WebViewClient() {@Overridepublic 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文件目录下：

<!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>