android 中想要实现图表的展示，非常麻烦。网上查了一下实现方案，无非三种：
1.自己写画布，慢慢实现，要求太高，很难搞定。
2.用AchartEngine实现，丑陋，而且扩展性很小。
3.采用webview加载js的方式，虽然理论上会比较耗费资源，但是效果不错，而且难度小很多。
下面以一个例子具体介绍依稀这种方式：
首先布局文件：
<RelativeLayout xmlns:android=""xmlns: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" ><LinearLayoutandroid:id="@+id/bt_ly"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"><Buttonandroid:id="@+id/linechart_bt"style="?android:attr/buttonStyleSmall"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:text="折线图" /><Buttonandroid:id="@+id/barchart_bt"style="?android:attr/buttonStyleSmall"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:text="柱状图" /><Buttonandroid: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><WebViewandroid: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;@Overrideprotected 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");}@Overridepublic 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，太悲剧了。
最后实现效果如下图：
每个人在他的人生发轫之初，总有一段时光，
