在Android中使用EChart

最新推荐文章于 2024-08-03 23:53:54 发布

码农进阶之路

最新推荐文章于 2024-08-03 23:53:54 发布

阅读量5k

点赞数 3

文章标签： android

本文链接：https://blog.csdn.net/qq_36056790/article/details/76436571

版权

因为项目需求，要求在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();