开发环境：android studio
就是在手机上显示图表，这里使用开源的项目：ECharts ：http://echarts.baidu.com/
这个，怎么说呢，刚下载时我也是下了一跳，根本不是android项目嘛，官网下了一堆js,无语了，难道要用webview 加载？一百度，果不其然 ，有这位前辈：http://blog.csdn.net/huozhonbin/article/details/44781867，好像也只有这一位了
使用webview 加载 js
哎，先说一个自己犯的错误，一直在读取 android studio 下assets下的文件路径，哎呀，各种失败，后来没办法了，开始怀疑人生了，上一个项目明明使用WebView打开网页，怎么现在读取本地文件有问题，就把网址换成了百度，还是打不开，无奈了，怎么可能！都要跳起来了，猛然间发现手机没有联网，哎，这么一个低级的错误，看来以后有需要联网的，手机上还是需要判断，没有联网要么提示要么后台开启
//获取Assets目录下的文件看一下目录：
chartshow_wb.loadUrl("file:///android_asset/echart/echarts.html");
官方的代码 的 js 文件我没有导入，直接使用的远程网络资源
继续说问题，按照上一位的代码做了一个测试，发现可以访问文件，但是JS效果出不来，比如alert()方法，找了好久，忘了在哪儿找到的了，加上就好了
<span style="white-space:pre"> </span>//js加上这个就好啦！奉劝一句，写js，先在电脑端调试好了，要不问题太多，官方给的源码有问题，貌似是百度出的，我真不是黑百度
chartshow_wb.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
});
color: (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getLinearGradient(
0, 0, 1000, 0,
[[0, 'rgba(255,0,0,0.8)'],[0.8, 'rgba(255,255,0,0.8)']]
)
})(),
就是上面的代码有错误，提供的资源里没有'zrender/tool/color' 直接删掉就好了
官方提供了12种图，但是只有11种是可以用的
webview 默认是使用手机第三方或手机默认浏览器打开的，所以重写方法就可以了，
还修改了是webview可以缩放
看个效果
public class MainActivity extends Activity implements View.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.content_main);
initView();
}
/**
* 初始化页面元素
*/
private void initView(){
findViewById(R.id.linechart_bt).setOnClickListener(this);
findViewById(R.id.barchart_bt).setOnClickListener(this);
findViewById(R.id.scatterchart_bt).setOnClickListener(this);
findViewById(R.id.kchart_bt).setOnClickListener(this);
findViewById(R.id.piechart_bt).setOnClickListener(this);
findViewById(R.id.radarchart_bt).setOnClickListener(this);
findViewById(R.id.chordchart_bt).setOnClickListener(this);
findViewById(R.id.forcechart_bt).setOnClickListener(this);
findViewById(R.id.mapchart_bt).setOnClickListener(this);
findViewById(R.id.gaugechart_bt).setOnClickListener(this);
findViewById(R.id.funnelchart_bt).setOnClickListener(this);
chartshow_wb=(WebView)findViewById(R.id.chartshow_wb);
//进行webwiev的一堆设置
//开启本地文件读取（默认为true，不设置也可以）
chartshow_wb.getSettings().setAllowFileAccess(true);
//设置编码
chartshow_wb.getSettings().setDefaultTextEncodingName("utf-8");
// 设置可以支持缩放
chartshow_wb.getSettings().setSupportZoom(true);
// 设置出现缩放工具
chartshow_wb.getSettings().setBuiltInZoomControls(true);
// 清除浏览器缓存
chartshow_wb.clearCache(true);
//开启脚本支持
chartshow_wb.getSettings().setJavaScriptEnabled(true);
// 放在 assets目录
//获取Assets目录下的文件
chartshow_wb.loadUrl("file:///android_asset/echart/echarts.html");
// chartshow_wb.loadUrl("file:///android_asset/test/echarts.html");
// chartshow_wb.loadUrl("file:///android_asset/test/index.html");
// chartshow_wb.loadUrl("http://www.baidu.com");
//在当前页面打开链接了
chartshow_wb.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
//js加上这个就好啦！
chartshow_wb.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
});
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.linechart_bt:
chartshow_wb.loadUrl("javascript:createChart('line',[]);");
// chartshow_wb.loadUrl("javascript:createChart('line',[89,78,77]);");
// chartshow_wb.loadUrl("javascript:wave();");
break;
case R.id.barchart_bt:
chartshow_wb.loadUrl("javascript:createChart('bar',[]);");
// chartshow_wb.loadUrl("javascript:createChart('bar',[89,78,77]);");
break;
case R.id.scatterchart_bt:
chartshow_wb.loadUrl("javascript:createChart('scatter',[]);");
break;
case R.id.kchart_bt:
chartshow_wb.loadUrl("javascript:createChart('k',[]);");
break;
case R.id.piechart_bt:
chartshow_wb.loadUrl("javascript:createChart('pie',[]);");
break;
case R.id.radarchart_bt:
chartshow_wb.loadUrl("javascript:createChart('radar',[]);");
break;
case R.id.chordchart_bt:
chartshow_wb.loadUrl("javascript:createChart('chord',[]);");
break;
case R.id.forcechart_bt:
chartshow_wb.loadUrl("javascript:createChart('force',[]);");
break;
case R.id.mapchart_bt:
chartshow_wb.loadUrl("javascript:createChart('map',[]);");
break;
case R.id.gaugechart_bt:
chartshow_wb.loadUrl("javascript:createChart('gauge',[]);");
break;
case R.id.funnelchart_bt:
chartshow_wb.loadUrl("javascript:createChart('funnel',[]);");
break;
default:
break;
}
}
@Override
//设置回退 在页面内回退
//覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && chartshow_wb.canGoBack()) {
chartshow_wb.goBack(); //goBack()表示返回WebView的上一页面
return true;
}
// finish();//结束退出程序
// return false;
return super.onKeyDown(keyCode,event);
}
}
这个代码实在是太长啦 html 文件贴上没意思，给一个我测试用的index.html
<html>
<script language="javascript">
/* This function is invoked by the activity
我只想表示，貌似 H5 真的很强大
*/
function wave() {
alert("1");
location.href="http:www.baidu.com";
}
</script>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
</html>