在Android中使用EChart

因为项目需求，要求在Android中导入EChart图表。 EChart下载：http://echarts.baidu.com/download.html
第一步，在网站上下载图表组件，这里我选取的是完整，下载完成后是一个echarts.min.js文件。

在Android中使用EChart

第二步，将js文件导入android项目中。这里，我们首先要新建一个assets（Android Studio中需要自己创建assets），将项目调整至Project->app->src->main。
右击main->new->Folder->Assets Folder，并将js文件复制进新建的assets中。在assets中还要创建一个html文件，用来显示webview中显示的内容。

在Android中使用EChart

接下来是html文件里的代码，我选择EChart文档中的样例：南丁格尔图。详情见：http://echarts.baidu.com/gallery/editor.html?c=doc-example/tutorial-styling-step5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 400px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
 backgroundColor: '#2c343c',
 visualMap: {
 show: false,
 min: 80,
 max: 600,
 inRange: {
 colorLightness: [0, 1]
 }
 },
 series : [
 {
 name: '访问来源',
 type: 'pie',
 radius: '55%',
 data:[
 {value:235, name:'视频广告'},
 {value:274, name:'联盟广告'},
 {value:310, name:'邮件营销'},
 {value:335, name:'直接访问'},
 {value:400, name:'搜索引擎'}
 ],
 roseType: 'angle',
 label: {
 normal: {
 textStyle: {
 color: 'rgba(255, 255, 255, 0.3)'
 }
 }
 },
 labelLine: {
 normal: {
 lineStyle: {
 color: 'rgba(255, 255, 255, 0.3)'
 }
 }
 },
 itemStyle: {
 normal: {
 color: '#c23531',
 shadowBlur: 200,
 shadowColor: 'rgba(0, 0, 0, 0.5)'
 }
 }
 }
 ]
 };

// 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
</script>
</body>
</html>

第三步，我们要开始写Android项目中的代码。
activity_main.xml

<WebView
 android:id="@+id/chartshow_web"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

MainActivity.java

chartshow_web = (WebView) findViewById(R.id.chartshow_web);
chartshow_web.getSettings().setAllowFileAccess(true);
chartshow_web.getSettings().setJavaScriptEnabled(true);
chartshow_web.loadUrl("file:///android_asset/echart.html");

/**
 * js方法的调用必须在html页面加载完成之后才能调用。
 * 用webview加载html还是需要耗时间的，必须等待加载完，在执行代用js方法的代码。
 */
new Thread(new Runnable() {
@Override
public void run() {
try{
             Thread.sleep(2000);
         } catch (InterruptedException e){
             e.printStackTrace();
         }
     }
 }).start();

秒客网

在Android中使用EChart

相关文章