之前都是在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文件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
align: left;
valign: left;
}
</style>
<!-- 引入 ECharts 文件 -->
<script src="./js/echarts.min.js"></script>
</head>
<body>
<div id="main"
style="height: 100%; width: 100%; border: 0px; text-align: left; align: left; valign: left;"></div>
<script type="text/javascript">
var xName = [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月',
'十月', '十一月', '十二月' ]; //x軸數據顯示數據
var yname = [ 100.5, 123, 86.5, 58.9, 90, 92.4, 88.7, 69.2, 98, 75,
97.8, 109 ]; // 已關控
var wname = [ 50, 48, 55, 99, 100, 98.9, 87.3, 55, 83, 59, 68, 88 ]; //未管控
var lengend = [ '話費', '流量' ];
var sum = [ 80, 80, 80, 80, 80, 80, 80, 80, 80, 80 ];
var barwidth = 60;
function createBarLineChart() {
var myChart = echarts.init(document.getElementById('main'));
var option = {
legend : { // 圖例的樣式
show : true,
orient : 'horizontal',
itemGap : 50, // 圖例之間的距離
itemHeight : 10, // 圖例的高度
data : [ {
name : lengend[0],
icon : "rectangle"
}, {
name : lengend[1],
icon : "rectangle"
} ],
textStyle : {
color : 'black',
fontSize : 16,
},
},
grid : { //設置圖標在div中的位置
left : '2%',
right : '2%',
bottom : '3%',
show : false,
containLabel : true
// 是否包含標題
},
tooltip : {
show : true,
},
xAxis : [ {
type : 'category',
data : xName,
boundaryGap : true, // 值是在中間還在在原點
axisLine : {
lineStyle : {
color : 'black'
},
show : true
}, //x軸 的顏色
axisTick : {
show : false
}, // 是否加上x軸的小柱柱
axisLabel : {
interval : 0,
rotate : 0, //字體傾斜
textStyle : {
color : 'black', // x軸的顏色
fontSize : '14'
}
}
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
name : lengend[0],
type : 'bar', // line表示線圖 bar表示柱圖
stack : '管控',
barWidth : barwidth,
data : yname,
label : { // 設置數據是否顯示
normal : {
show : true,
position : 'inside',
textStyle : {
color : "white"
}
}
}
}, {
name : lengend[1],
type : 'bar',
stack : '管控',
barWidth : barwidth,
data : wname,
label : {
normal : {
show : true,
position : 'top',
textStyle : {
color : "black"
}
}
},
}, ],
};
myChart.setOption(option);
}
</script>
</body>
</html>
（2）用webView加載html
布局文件：
<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"
tools:context="com.example.ztext.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/barchart_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>
（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
