在Android中使用EChart

来源：互联网发布：2017淘宝买不到qq号了编辑：程序博客网时间：2024/06/01 09:40

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

这里写图片描述

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

这里写图片描述

接下来是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();

阅读全文

1 0