之前都是在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
网友评论