全部代码已经上传,点击上方进行下载
支持多条曲线的绘制,可旋转拖动放大缩小
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>