新建Android 项目，在src/main目录下创建asset目录(右键 -> New -> Directory -> assets)：
在echarts官网下载echarts.min.js文件，然后把下载完成的文件放在assets文件夹下：
在assets文件夹下新建trend.html文件(新建一个file把后缀改成.html就行)：
<!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>eCharts</title>
<script src="./echarts.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#main {
width: 100%;
height: 600px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="main"></div>
</div>
<script type="text/javascript">
function doCreateChart(type, timeList, tmpList, vibList, tmpMax, tmpMin, tmpAvg, vibMax, vibMin, vibAvg, vibUnit) {
// 以下用于展示图谱最大值，最小值
var tmpYAxisMax = 0;// 曲线1 y轴最大值
var tmpYAxisMin = 0;// 曲线1 y轴最小值
var vibYAxisMax = 0;// 曲线2 y轴最大值
var vibYAxisMin = 0;// 曲线2 y轴最小值
if(tmpMax > 0) {
tmpYAxisMax = tmpMax * (1 + 0.2);
} else {
tmpYAxisMax = (tmpMax * (1 - 0.2));
}
if(tmpMin > 0) {
tmpYAxisMin = tmpMin * (1 - 0.2);
} else {
tmpYAxisMin = tmpMin * (1 + 0.2);
}
if(vibMax > 0) {
vibYAxisMax = vibMax * (1 + 0.2);
} else {
vibYAxisMax = (vibMax * (1 - 0.2));
}
if(vibMin > 0) {
vibYAxisMin = vibMin * (1 - 0.2);
} else {
vibYAxisMin = vibMin * (1 + 0.2);
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
animation: false,
title: [
{
text: '曲线1(°C)',
top: 10,
left: 6,
textStyle: {
color: '#3b92e2',
fontWeight: 'bold',
fontSize: 14,
width: 100,
align: 'left',
},
},{
text: '最大值：' + parseFloat(tmpMax).toFixed(2),
top: 260,
left: 7,
textStyle: {
fontWeight: 'normal',
fontSize: 12,
width: 100,
align: 'left',
color: 'green'
},
},{
text: '最小值：' + parseFloat(tmpMin).toFixed(2),
top: 260,
left: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: 12,
width: 100,
align: 'left',
color: 'green'
},
},{
text: '平均值：' + parseFloat(tmpAvg).toFixed(2),
top: 260,
right: 10,
textStyle: {
fontWeight: 'normal',
fontSize: 12,
width: 100,
align: 'left',
color: 'green'
},
},{
text: '曲线2('+ vibUnit +')',
top: 320,
left: 7,
textStyle: {
color: '#3b92e2',
fontWeight: 'bold',
fontSize: 14,
width: 100,
align: 'left',
},
},{
text: '最大值：' + parseFloat(vibMax).toFixed(2),
bottom: 10,
left: 7,
textStyle: {
fontWeight: 'normal',
fontSize: 12,
width: 100,
color: 'green'
},
},{
text: '最小值：' + parseFloat(vibMin).toFixed(2),
bottom: 10,
left: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: 12,
width: 100,
color: 'green'
},
},{
text: '平均值：' + parseFloat(vibAvg).toFixed(2),
bottom: 10,
right: 10,
textStyle: {
fontWeight: 'normal',
fontSize: 12,
width: 100,
color: 'green'
},
}
],
grid: [
{
left: 45,
right: 20,
top: 60,
bottom: 370
},
{
left: 45,
right: 20,
top: 370,
bottom: 60
}
],
tooltip: {
trigger: 'axis',
backgroundColor: '#3b92e2',
textStyle: {
fontSize: 8,
color: "#ffffff"
},
padding: 5,
formatter: function(params) {
var index = params[0].dataIndex;
var content = "";
content += "时间：" + timeList[index] + '<br/>';
content += "值1：" + parseFloat(tmpList[index]).toFixed(3) + '<br/>';
content += "值2：" + parseFloat(vibList[index]).toFixed(3) + '<br/>';
return content
}
},
axisPointer: {
link: [
{
xAxisIndex: 'all'
}
]
},
xAxis: [
{
type: 'category',
data: timeList,
axisTick: {
show: false,
alignWithLabel: true
},
axisLine : {
show: false,
},
axisLabel: {
fontSize: 10,
}
},
{
type: 'category',
data: timeList,
gridIndex: 1,
type: 'category',
axisTick: {
show: false,
alignWithLabel: true
},
axisLine : {
show: false,
},
axisLabel: {
fontSize: 10,
}
}
],
yAxis: [{
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: ['#AAAAAA'],
width: 0.5,
type: 'dashed'
}
},
axisTick: {
show: false,
},
axisLine : {
show: false,
},
axisLabel: {
fontSize: 10,
formatter: function (value, index) {
return parseFloat(value).toFixed(2);
}
},
max: tmpYAxisMax,
min: tmpYAxisMin,
splitNumber: 3,
},{
gridIndex: 1,
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: ['#AAAAAA'],
width: 0.5,
type: 'dashed'
}
},
axisTick: {
show: false,
},
axisLine : {
show: false,
},
axisLabel: {
fontSize: 10,
formatter: function (value, index) {
return parseFloat(value).toFixed(2);
}
},
max: vibYAxisMax,
min: vibYAxisMin,
splitNumber: 3,
}],
dataZoom: [{ // 放大和缩放
type: 'inside',
xAxisIndex: [0, 1]
},{
type: 'inside',
xAxisIndex: [0, 1]
}],
series: [{
data: tmpList,
type: "line",
showSymbol: false,
lineStyle : {
normal : {
width: 1,
// color : '#7D7DFF' // 连线颜色
}
},
},{
data: vibList,
xAxisIndex: 1,
yAxisIndex: 1,
type: type,
showSymbol: false,
lineStyle : {
normal : {
width: 1,
// color : '#7D7DFF' // 连线颜色
}
},
}]
};
myChart.setOption(option);
}
</script>
<script type="text/javascript">
// 单独访问html的测试数据
var type = "line";
var timeList = ["2023-02-27 11:22:05","2023-02-27 11:22:25","2023-02-27 11:22:30","2023-02-27 11:22:35","2023-02-27 11:22:40","2023-02-27 11:22:45","2023-02-27 11:22:50","2023-02-27 11:22:55","2023-02-27 11:23:00"];
var tmpList = [15.51,17.05,16.85,16.85,16.63,16.43,16.47,16.43,16.33]
var vibList = [25.51,27.05,26.85,26.85,26.63,26.43,26.47,26.43,26.33]
var tmpMax = 20.46;
var tmpMin = 12.408;
var tmpAvg = 15.408;
var vibMax = 30.46;
var vibMin = 22.408;
var vibAvg = 25.408;
doCreateChart(type, timeList, tmpList, vibList, tmpMax, tmpMin, tmpAvg, vibMax, vibMin, vibAvg, "mm/s")
</script>
</body>
</html>
在MainActivity中调用并传入数据：
package com.yuqixian.demo.echarts;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;
import com.alibaba.fastjson.JSONObject;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
Button button;
WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
public void initView() {
button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
showMap();
}
});
webView = findViewById(R.id.webView);
}
// 画图
public void showMap() {
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.loadUrl("file:///android_asset/trend.html");
List<String> xList = new ArrayList<String>();
List<Double> yList1 = new ArrayList<Double>();
List<Double> yList2 = new ArrayList<Double>();
xList.add("2023-02-27 11:22:05");
xList.add("2023-02-27 11:22:25");
xList.add("2023-02-27 11:22:30");
xList.add("2023-02-27 11:22:35");
xList.add("2023-02-27 11:22:40");
yList1.add(15.51);
yList1.add(17.05);
yList1.add(16.85);
yList1.add(16.85);
yList1.add(16.63);
yList2.add(25.51);
yList2.add(27.05);
yList2.add(26.85);
yList2.add(26.85);
yList2.add(26.63);
double max1 = 20.46;
double min1 = 12.408;
double avg1 = 15.408;
double max2 = 30.46;
double min2 = 22.408;
double avg2 = 25.408;
String unit = "mm/s";
String timeList = JSONObject.toJSONString(xList);
String tmpList = JSONObject.toJSONString(yList1);
String vibList = JSONObject.toJSONString(yList2);
String tmpMax = JSONObject.toJSONString(max1);
String tmpMin = JSONObject.toJSONString(min1);
String tmpAvg = JSONObject.toJSONString(avg1);
String vibMax = JSONObject.toJSONString(max2);
String vibMin = JSONObject.toJSONString(min2);
String vibAvg = JSONObject.toJSONString(avg2);
String vibUnit = JSONObject.toJSONString(unit);
webView.setWebChromeClient(new WebChromeClient(){
@Override
public void onProgressChanged(WebView view, int newProgress) {
if (newProgress == 100) {// 网页加载完成
webView.loadUrl("javascript:doCreateChart('line'," + timeList + ", " + tmpList +", "
+ vibList +", " + tmpMax +", " + tmpMin + ", " + tmpAvg + ","
+ vibMax + "," + vibMin + "," + vibAvg + "," + vibUnit + ");");
}
super.onProgressChanged(view, newProgress);
}
});
}
}
注意：在web加载成功后再传递数据，不然会有白屏问题。
activity_main.xml：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="加载图谱"
android:textColor="#ffffff"
android:background="#3b92e2"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<!-- ScrollView下只能有一个根标签 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:id="@+id/webView"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
</LinearLayout>
运行效果：
