当前位置: 代码迷 >> Android >> android 中图表显示的实现——echarts方式实现
  详细解决方案

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

热度:71   发布时间:2016-04-28 01:46:55.0
android 中图表展示的实现——echarts方式实现

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,太悲剧了。


最后实现效果如下图:


最后附上源码:

http://download.csdn.net/detail/huozhonbin/8551227

oschina地址:

http://git.oschina.net/wangjian/EchartAndroid





  相关解决方案