Android项目中使用echarts

之前都是在web网页端使用echarts，现在在android项目中使用echarts，实现柱状图、折线图、雷达图等，以柱状图为例。

1、首先去echarts官方下载echarts下载js文件，最好下载完整版的，也可以根据自己的需要自定义构建。

图1

下载下来的js文件如图所示

图2

2.将下载下来的js文件放到android工程的assets文件夹下

图3

3.用WebView加载html，首先创建html文件，如果有现成的html文件直接复制进来进行，但如果想要自定义html时，就要进行创建。

选中assets文件夹下的echart文件夹，右键new，因为没有html选项，所以选择other

图4

在web文件夹下选中HTML File，新建html文件。

图5

注意：一开始我的eclipse新建里边没有web这个文件夹，即没法创建html文件，这时呢，通过help-->Install New SoftWare，

work with根据你的eclipse版本名选择

"http://download.eclipse.org/releases/kepler"(如果你是 Eclipse Kepler版本)

OR "http://download.eclipse.org/releases/juno"(如果你是 Eclipse Juno版本)

OR "http://download.eclipse.org/releases/indigo"(如果你是 EclipseIndigo版本)

OR "http://download.eclipse.org/releases/helios"(如果你是 Eclipse Helios版本)

图6

选择图中圈出来的选项

图7

选择图中两项，然后点击next一步一步的安装，然后再新建时就会有html选项

图8

4.（1）在echart文件夹下，新建myechart.html文件

（2）用webView加载html
布局文件：

（3）MainActivity
注意路径要正确！

package com.example.ztext;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener{

    private Button barchart_bt;
    private WebView chartshow_wb;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    /**
     * 初始化页面元素
     */
    private void initView(){
        barchart_bt=(Button)findViewById(R.id.barchart_bt);
        barchart_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.barchart_bt:
            chartshow_wb.loadUrl("javascript:createBarLineChart();"); 
            break;
        }
    }
        
}

5.运行结果如图所示

图9