Android使用Echarts 进行图表开发 （WebView加载）
在两年前时候北京的一家公司是给 高中生做理化生结合他们课本做的一款App，App中的功能是实现一些 点线图和柱状图 还有扇形图， 平时开发中 其实App中去加载一些这种数据图 很少遇到， 但是也会有很多人 不太理解在实际的Android开发中怎么去运用开发， 其实Android 中 自定义View 是可以实现的， 但是 市面上科技已经很发达 有很多第三方的开源 运用js写的， 使用方便，动画也相比起来比较好看，那么今天就来讲一讲Android 中使用WebView 去加载 这些图标。
先附上Echarts的官方网址： https://echarts.apache.org/zh/index.html
废话不多说， 在我们Android 开发中如果要使用一些第三方的插件， 那么肯定避免不了要导入一些jar包 或者是依赖包。
（ AChartEngine.jar）
注意事项： 因为该对象库依赖Gson，所以project同样需要添加Gson依赖
-
（这个是Echats的依赖包）compile 'com.github.abel533:ECharts:3.0.0.2'
-
（这个不用说了 大家应该很熟悉了）implementation 'com.google.code.gson:gson:2.8.1'
第一步 就是我们main包路径下 去创建一个存放本地文件的 文件夹 ==> assets
然后再里面创建 对应的 html和对应的 js文件夹
在写html加js之前 我们首先要导入 jquery的包。
echarts.min.js
jquery-1.11.0.js
jquery-2.2.3.min.js
然后就开始我们的写作
1、html是一个容器 意思就是给这个图标设置大小的
2、 js中
//基于准备好的DOM，初始化echarts实例
var myChart_diancigy = echarts.init(document.getElementById('main_diancigy'));
//指定图表的配置项和数据
var option = {
title: {
text: '数据统计图',
// subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['已调查图斑数', '剩余图斑数', '已上报项目数']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
function setnum(params){
var datasArr = params.data;
var dat = [];
var da = {
name:"",
value:""
}
da.name = "已调查图斑数";
da.value = datasArr.total1;
var da1 = {
name:"",
value:""
}
da1.name = "剩余图斑数";
da1.value = datasArr.total2;
var da2 = {
name:"",
value:""
}
da2.name = "已上报项目数";
da2.value = datasArr.sum;
dat.push(da);
dat.push(da1);
dat.push(da2);
option.series[0].data = dat;
myChart_diancigy.setOption(option);
}
WebView 工具类
package com.provincialarea.utils;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
/**
* Created by ShinnyYang on 2017/5/11.
*/
public class WebViewUtil {
/**
* 给webview添加数据
*
* @param webView
* @param url
*/
public static void setWebView(WebView webView, String url) {
//如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
webView.getSettings().setJavaScriptEnabled(true);
// webView.getSettings().setDomStorageEnabled(true);
webView.loadUrl(url);
webView.setWebViewClient(new WebViewClient());
webView.clearCache(true);
webView.setWebChromeClient(new WebChromeClient());
//缓存模式如下：
//LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
//LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。
//LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
//LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
//不使用缓存,只从网络获取数据。
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
// webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
}
}
Activity中去加载
//webview 加载数据 String fileUrl = "file:///android_asset/html/total.html"; WebViewUtil.setWebView(webView, fileUrl);
和js交互数据 （ 我这里传递给js的数据是一个 json）
webView.evaluateJavascript("setnum(" + response + ")", null);
到这里 基本就完成了！！！