标签：android echarts webview javascript
android 中想要实现图表的展示，非常麻烦。网上查了一下实现方案，无非三种：
1.自己写画布，慢慢实现，要求太高，很难搞定。
2.用AchartEngine实现，丑陋，而且扩展性很小。
3.采用webview加载js的方式，虽然理论上会比较耗费资源，但是效果不错，而且难度小很多。
下面以一个例子具体介绍依稀这种方式：
首先布局文件：
<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>
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;
@Override
protected 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");
}
@Override
public 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;
}
}
}
<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>
最后实现效果如下图：
最后附上源码：
http://download.csdn.net/detail/huozhonbin/8551227
oschina地址：
http://git.oschina.net/wangjian/EchartAndroid
标签：android echarts webview javascript
原文地址：http://blog.csdn.net/huozhonbin/article/details/44781867
