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依赖

  1.    (这个是Echats的依赖包)compile 'com.github.abel533:ECharts:3.0.0.2'

  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);   

 

到这里 基本就完成了!!!

 

 

你可能感兴趣的:(Android使用Echarts 进行图表开发 (WebView加载))