在安卓中使用echarts

最新推荐文章于 2025-06-02 12:23:05 发布

xuandroid

最新推荐文章于 2025-06-02 12:23:05 发布

阅读量1.3w

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xuandroid/article/details/51838264

本文介绍如何将ECharts图表库集成到Android应用中，并通过WebView展示动态交互式的图表。文章提供了一个具体示例，展示了从设置WebView到使用按钮触发JS代码的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看见js写得echarts觉得非常的棒，所以尝试把它也搬到安卓中。

首先：把echarts放进assets下如图：

用webview来呈现\界面，这里选择用按钮来显示js部分，因为加载html文件比较慢，如果不用按钮来出发请选择用线程睡两秒等一下。

wb.getSettings().setAllowFileAccess(true);
		wb.getSettings().setJavaScriptEnabled(true);
		wb.loadUrl("file:///android_asset/echart/index.html"); 
		btn.setOnClickListener(new OnClickListener() {
			
			@Override                        
			public void onClick(View v) {
				wb.loadUrl("javascript:createChart();");  
			}
		});

接下来就是我在html文件里的代码啦····我选择的是echarts官方的案例代码，做个示范：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<style>
html, body {
	height: 100%;
	width: 100%; 
	margin: 0;
	padding: 0;
	align: left;
	valign: left;
}
</style>
</head>
<body>
	<div id="main"
		style="height: 100%; width: 100%; border: 0px; text-align: left; align: left; valign: left;"></div>
	<!-- ECharts单文件引入 -->
	<script src="./js/echarts.js"></script>
	<script type="text/javascript">
    //初始化路径
    var myChart;  
     require.config({
            paths: {
                echarts: './js'
            }
        });
   

        //创建折线图
        function createLineChart(){
        	options = {
        		    title : {
        		        text: '某地区蒸发量和降水量',
        		        subtext: '纯属虚构',
        		        x:'left'
        		        
        		    },
        		    tooltip : {
        		        trigger: 'axis'
        		    },
        		    legend: {
        		        data:['蒸发量','降水量']
        		    },
        		    toolbox: {
        		        show : true,
        		        feature : {
        		            mark : {show: true},
        		            dataView : {show: true, readOnly: false},
        		            magicType : {show: true, type: ['line', 'bar']},
        		            restore : {show: true},
        		            saveAsImage : {show: true}
        		        }
        		    },
        		    calculable : true,
        		    xAxis : [
        		        {
        		            type : 'category',
        		            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        		        }
        		    ],
        		    yAxis : [
        		        {
        		            type : 'value'
        		        }
        		    ],
        		    series : [
        		        {
        		            name:'蒸发量',
        		            type:'bar',
        		            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
        		            markPoint : {
        		                data : [
        		                    {type : 'max', name: '最大值'},
        		                    {type : 'min', name: '最小值'}
        		                ]
        		            },
        		            markLine : {
        		                data : [
        		                    {type : 'average', name: '平均值'}
        		                ]
        		            }
        		        },
        		        {
        		            name:'降水量',
        		            type:'bar',
        		            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
        		            markPoint : {
        		                data : [
        		                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
        		                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
        		                ]
        		            },
        		            markLine : {
        		                data : [
        		                    {type : 'average', name : '平均值'}
        		                ]
        		            }
        		        }
        		    ]
        		};
    }

        function createChart(){
        	 doCreatChart(createLineChart());
        }
    
        function doCreatChart(specificChartFunction){

            require(
            ['echarts','echarts/theme/macarons','echarts/chart/line',
            'echarts/chart/bar','echarts/chart/pie'
            ],
            function(ec,theme){
            myChart =ec.init(document.getElementById('main'),theme);
            myChart.showLoading({  
                text : "图表数据正在努力加载..."  
            }); 
            specificChartFunction;
            myChart.setOption(options); //先把可选项注入myChart中  
            myChart.hideLoading(); 
            }
        );
        }

   
    </script>
</body>

其实这里应该放一张效果动态图，但我不会···真的非常炫酷，可以拖拽的图表，和pc呈现出的效果一样一样的··