android 用echarts绘制图表(折线与柱状图)

置顶会爬楼梯的鱼

已于 2022-12-05 15:28:57 修改

阅读量3k

点赞数 4

分类专栏： view 文章标签： echarts android 前端

于 2022-11-04 15:13:41 首次发布

本文链接：https://blog.youkuaiyun.com/qq_30089721/article/details/127688349

版权

view 专栏收录该内容

2 篇文章

订阅专栏

1.首先在echarts官网下载echarts.min.js文件。

2.新建android 项目，把下载完成后把文件放在android项目的assets文件夹下。

3.在assets文件夹下新一个.html的文件，名称自己取。(新建一个file把后缀改成.html就行)

4.在html文件里绘制图形然后在activity里调用，下面把代码贴出来。

view.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>
    <div id="main"
         style="width: 100%; height: 350px;background-color: #181D31; border-radius: 10px;"></div>
    <div class="mark" style="width: 100%; box-sizing: border-box;padding: 0 30px;color: #ffffff;
    display: flex; justify-content: space-between;position: relative;bottom: 45px;">
        <text class="left" style="font-size: 12px;"></text>
        <text class="right" style="font-size: 12px;"></text>
    </div>
    <script src="./echarts.min.js"></script>
</head>
<body style="margin: 10; padding: 0">
<script type="text/javascript">
			function doCreateChart(type, xData, yData1,yData2) {
			    document.querySelector(".left").innerHTML = "10/01";
			    document.querySelector(".right").innerHTML = "10/02";
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
					animation: false,
					title: {
						text: '睡眠类型',
						padding: 20,
						textStyle: {
							color: '#FFFFFF'
						}
					},
					legend: {
					icon:"circle",
					orient: 'horizontal',
					x:'center',
					y:'bottom',
					padding:[0,0,10,0],
					itemGap:40,
                    data:['浅睡','深睡'],
                    	textStyle: {
							color: '#FFFFFF'
						}
                    },
					tooltip: {
						trigger: 'axis',
						textStyle: {
							fontSize: 8,
							backgroundColor: '#FFFFFF',
							color: "black"
						},
						padding: 5,
						formatter: function(params) {
							var content = "";
							var xName = "时间:";
							var yName1 = "深睡:";
							var yName2 = "浅数:";
							content += xName + params[0].name + '<br/>';
							content += yName1 + params[0].value+ '<br/>';
							content += yName2 + params[1].value;
							return content
						}
					},
					xAxis: {
						type: 'category',
						data: xData,
						axisTick: {
							alignWithLabel: true
						}
					},
					yAxis: {
						type: 'value',
						splitLine: {
						show: true,
						lineStyle: {
							color: ['#AAAAAA'],
							width: 0.5,
							type: 'dashed'
						}
					 },
					},
					series: [{
					    name:'浅睡',
						data: yData1,
						type: type,
						symbolSize: 4,
						symbol: 'circle',
					itemStyle: {
						normal: {
							color: '#5D2EEE', //折点颜色
							lineStyle: {
								color: '#5D2EEE' //折线颜色
							}
						}
					  }
					},{
					name:'深睡',
					data:yData2,
					type: type,
					symbolSize: 4,
					symbol: 'circle',
					itemStyle: {
						normal: {
							color: '#AEF1FF', //折点颜色
							lineStyle: {
								color: '#AEF1FF' //折线颜色
							}
						}
					  }
					}]
				};
				myChart.setOption(option);
			}

</script>
</body>
</html>

view1.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>
    <div id="main"
         style="width: 100%; height: 350px;background-color: #181D31; border-radius: 10px;"></div>
    <div class="mark" style="width: 100%; box-sizing: border-box;padding: 0 30px;color: #ffffff;
    display: flex; justify-content: space-between;position: relative;bottom: 45px;">
        <text class="left" style="font-size: 12px;"></text>
        <text class="right" style="font-size: 12px;"></text>
    </div>
    <script src="./echarts.min.js"></script>
</head>
<body style="margin: 10; padding: 0">
<script type="text/javascript">
			function doCreateChart(type, xData, yData1) {
			    document.querySelector(".left").innerHTML = "10/01";
			    document.querySelector(".right").innerHTML = "10/02";
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
					animation: false,
					title: {
						text: '打鼾次数',
						padding: 20,
						textStyle: {
							color: '#FFFFFF'
						}
					},
					tooltip: {
						trigger: 'axis',
						textStyle: {
							fontSize: 8,
							backgroundColor: '#FFFFFF',
							color: "black"
						},
						padding: 5,
						formatter: function(params) {
							var content = "";
							var xName = "时间:";
							var yName = "次数:";
							content += xName + params[0].name + '<br/>';
							content += yName + params[0].value+ '<br/>';
							return content
						}
					},
					xAxis: {
						type: 'category',
						data: xData,
						axisTick: {
							alignWithLabel: true
						}
					},
					yAxis: {
						type: 'value',
						splitLine: {
						show: true,
						lineStyle: {
							color: ['#AAAAAA'],
							width: 0.5,
							type: 'dashed'
						}
					 },
					},
					series: [{
					    name:'打鼾',
						data: yData1,
						type: type,
						symbolSize: 4,
						symbol: 'circle',
					itemStyle: {
						normal: {
							color: '#5D2EEE', //折点颜色
							lineStyle: {
								color: '#5D2EEE' //折线颜色
							}
						}
					  }
					}]
				};
				myChart.setOption(option);
			}

</script>
</body>
</html>

MainActivity里调用

@SuppressLint("SetJavaScriptEnabled")
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val webview = findViewById<WebView>(R.id.webview)
        val webview1 = findViewById<WebView>(R.id.webview1)
        webview.settings.allowFileAccess = true
        webview.settings.javaScriptEnabled = true
        webview.loadUrl("file:///android_asset/view.html")

        webview1.settings.allowFileAccess = true
        webview1.settings.javaScriptEnabled = true
        webview1.loadUrl("file:///android_asset/view1.html")

        val value = arrayOf("12:00", "13:00", "14:00", "15:00", "16:00", "17:00","18:00","19:00","20:00","21:00","22:00","23:00","00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00")
        val xValue= JSONArray(value)
        val yValue1 = arrayOf(5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20,46,150, 20, 36, 10, 10, 200,5, 20, 36, 10, 10, 20,46)
        val yValue2 = arrayOf(15, 60, 108, 30, 30, 60,15, 60, 112, 30, 35, 65,128,223, 60, 145, 36, 32, 268,16, 65, 147, 32, 31, 39,157)

        findViewById<Button>(R.id.bt_linechart).setOnClickListener {
            webview.loadUrl("javascript:doCreateChart('line',$xValue,${yValue1.toList()},${yValue2.toList()});")
            webview1.loadUrl("javascript:doCreateChart('line',$xValue,${yValue1.toList()});")
        }
        findViewById<Button>(R.id.bt_barchart).setOnClickListener {
            webview.loadUrl("javascript:doCreateChart('bar',$xValue,${yValue1.toList()},${yValue2.toList()});")
            webview1.loadUrl("javascript:doCreateChart('bar',$xValue,${yValue1.toList()});")
        }
      /*  findViewById<Button>(R.id.bt_piechart).setOnClickListener {
            webview.loadUrl("javascript:doCreateChart('pie',$xValue,${yValue1.toList()},${yValue2.toList()});")
            webview1.loadUrl("javascript:doCreateChart('pie',$xValue,${yValue1.toList()});")
        }*/
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/bt_linechart"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="linechart"
        app:layout_constraintEnd_toStartOf="@id/bt_barchart"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/bt_barchart"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="barchart"
        app:layout_constraintEnd_toStartOf="@id/bt_piechart"
        app:layout_constraintStart_toEndOf="@id/bt_linechart"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/bt_piechart"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="piechart"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/bt_barchart"
        app:layout_constraintTop_toTopOf="parent" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/bt_linechart">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            tools:ignore="WebViewLayout">

            <WebView
                android:id="@+id/webview"
                android:layout_width="match_parent"
                android:layout_height="350dp" />

            <WebView
                android:id="@+id/webview1"
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:layout_marginTop="10dp"
                app:layout_constraintTop_toBottomOf="@id/webview" />
        </LinearLayout>
    </ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>