echarts方式实现android图表展示

采用webview加载js的方式，虽然理论上会比较耗费资源

ECharts下载地址：ECharts

以下是一个简单的例子：

布局文件：

<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>

对应的Activity如下，核心代码就是调用asset中的js文件。然后再调用的javascript函数。

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

对应的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>