android 中图表展示的实现——echarts方式实现

浏览数：136 / 时间：2015年06月11日

android 中想要实现图表的展示，非常麻烦。网上查了一下实现方案，无非三种：

1.自己写画布，慢慢实现，要求太高，很难搞定。

2.用AchartEngine实现，丑陋，而且扩展性很小。

3.采用webview加载js的方式，虽然理论上会比较耗费资源，但是效果不错，而且难度小很多。

下面以一个例子具体介绍依稀这种方式：

首先布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.hzbst.echartst.MainActivity" >
	<LinearLayout 
	    android:id="@+id/bt_ly"
	    android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
	    >
		<Button
		    android:id="@+id/linechart_bt"
		    style="?android:attr/buttonStyleSmall"
		    android:layout_width="match_parent"
		    android:layout_height="wrap_content"
		    android:layout_weight="1"
		    android:text="折线图" />
	    
		<Button
		    android:id="@+id/barchart_bt"
		    style="?android:attr/buttonStyleSmall"
		    android:layout_width="match_parent"
		    android:layout_height="wrap_content"
		    android:layout_weight="1"
		    android:text="柱状图" />
		
		<Button
		    android:id="@+id/piechart_bt"
		    style="?android:attr/buttonStyleSmall"
		    android:layout_width="match_parent"
		    android:layout_height="wrap_content"
		    android:layout_weight="1"
		    android:text="饼状图" />
	</LinearLayout>
	<WebView 
	    android:id="@+id/chartshow_wb"
	    android:layout_below="@id/bt_ly"
	    android:layout_width="match_parent"
    	android:layout_height="match_parent"
	    />    
</RelativeLayout>

三个按钮，一个webview，很简单的布局。

对应的Activity如下：

package com.hzbst.echartst;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener{
	private Button linechart_bt;
	private Button barchart_bt;
	private Button piechart_bt;
	private WebView chartshow_wb;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
	}
	/**
	 * 初始化页面元素
	 */
	private void initView(){
		linechart_bt=(Button)findViewById(R.id.linechart_bt);
		barchart_bt=(Button)findViewById(R.id.barchart_bt);
		piechart_bt=(Button)findViewById(R.id.piechart_bt);
		linechart_bt.setOnClickListener(this);
		barchart_bt.setOnClickListener(this);
		piechart_bt.setOnClickListener(this);
		chartshow_wb=(WebView)findViewById(R.id.chartshow_wb);
		//进行webwiev的一堆设置
		//开启本地文件读取（默认为true，不设置也可以）
		chartshow_wb.getSettings().setAllowFileAccess(true);
		//开启脚本支持
		chartshow_wb.getSettings().setJavaScriptEnabled(true);
		chartshow_wb.loadUrl("file:///android_asset/echart/myechart.html");
	}
	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.linechart_bt:
			chartshow_wb.loadUrl("javascript:createChart('line',[89,78,77]);"); 
			break;
		case R.id.barchart_bt:
			chartshow_wb.loadUrl("javascript:createChart('bar',[89,78,77]);"); 
			break;
		case R.id.piechart_bt:
			chartshow_wb.loadUrl("javascript:createChart('pie',[89,78,77]);"); 
			break;
			default:
			break;
		}
	}
		
}

android 的代码到此就算完事了，非常简单。核心代码就是调用asset中的js文件。然后再调用的javascript函数。

采用这种方式，其实是将主要的开发量放到了javascript中了，因此需要对javascript语言有一些了解。

对应的html页面代码如下：

 <script type="text/javascript">
    //初始化路径
    var myChart;  
     require.config({
            paths: {
                echarts: './js'
            }
        });
    //  通用属性定义
    var options = {  
                title : {  
                    text : "Echart测试"  
                },  
                tooltip : {  
                    show : false  
                },   
                toolbox : {  
                    show : false
                },  
            }; 


        //创建折线图
        function createLineChart(dataArray){
        options = {
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['第一种','第二种','第三种']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'成交',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data:dataArray
             }
            ]
        };
    }

    //创建柱状图
        function createBarChart(dataArray){
       options = {
            xAxis : [
                {
                    type : 'category',
                    data : ['第一种','第二种','第三种']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'成交',
                    type:'bar',
                    data:dataArray

                }
            ]
        };
                    
    }

    //创建饼状图
        function createPieChart(dataArray){
        options = {
        series : [
            {
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
        };
    }


        function createChart(chartKind,dataArray){
            if (chartKind=='line') {
                doCreatChart(createLineChart(dataArray));
            };
            if (chartKind=='bar') {
                doCreatChart(createBarChart(dataArray));
            };
            if (chartKind=='pie') {
                doCreatChart(createPieChart(dataArray));
            };


        }
    
        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(); 
            }
        );
        }

 
    //createChart('line',[89,78,77]);
    //createChart('bar',[89,78,77]);
    //createChart('pie',[89,78,77]);
    </script>

个人比较喜欢这种图表实现方式，一个非常好的地方就是测试方便。之前用AchartEngine做过一个项目，一次次的重启android，太悲剧了。

最后实现效果如下图：

技术分享