Android使用Echarts 进行图表开发（WebView加载）_android webview echarts

作者：盐析白兔 | 2024-03-17 06:50:10

踩

android webview echarts

在两年前时候北京的一家公司是给高中生做理化生结合他们课本做的一款App，App中的功能是实现一些点线图和柱状图还有扇形图，平时开发中其实App中去加载一些这种数据图很少遇到，但是也会有很多人不太理解在实际的Android开发中怎么去运用开发，其实Android 中自定义View 是可以实现的，但是市面上科技已经很发达有很多第三方的开源运用js写的，使用方便，动画也相比起来比较好看，那么今天就来讲一讲Android 中使用WebView 去加载这些图标。

先附上Echarts的官方网址： Apache ECharts

废话不多说，在我们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是一个容器意思就是给这个图标设置大小的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <style type="text/css">
      #main_diancigy{
            width: 350px;
            height: 300px;
         /*background-color: #eee;*/
      }
   </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
<div id="main_diancigy"></div>
<!-- 引入ECharts.js -->

<script src='../js/jquery-2.2.3.min.js'></script>
<script src='../js/echarts.min.js'></script>
<script src='../js/total.js'></script>
</body>
</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} <br/>{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);

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

附简书地址-->ShinnyYang_ - 简书 (jianshu.com)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/254672

Android使用Echarts 进行图表开发 （WebView加载）_android webview echarts

Android使用Echarts 进行图表开发（WebView加载）_android webview echarts