Webview +vue.js +echarts

最新推荐文章于 2025-06-12 18:06:08 发布

原创最新推荐文章于 2025-06-12 18:06:08 发布 · 302 阅读

1 ·

CC 4.0 BY-SA版权

VUE3 同时被 2 个专栏收录

54 篇文章

订阅专栏

Android

52 篇文章

订阅专栏

本文档描述了在Android应用中使用WebView加载包含Echarts图表的HTML页面时遇到的问题。在Android 7.0上可以正常显示，但在5.0系统下图表无法显示。通过引入jQuery，问题在5.0上得到解决。主要涉及的技术包括：Vue.js、Echarts、Android WebView设置及JavaScript交互。

1.在assets目录下创建web目录，如下图

2.b.html 内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../wwwroot/js/vue.js"></script>
    <script src="../wwwroot/js/echarts.js"></script>
</head>
<body bgcolor="#FFFFFF">
<div id="app">
   
    <div id="main" style="width: 200px; height: 200px; background-color:black">
        {{message}}
    </div>
</div>
<h1>easyboot11</h1>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }, 

        methods: {
            myEcharts() {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    series: [{
                        type: 'gauge',
                        min: 0,
                        max: 120,
                        radius: '100%',
                        axisLine: {
                            lineStyle: {
                                width: 20,
                                color: [
                                    [0.3, '#67e0e3'],
                                    [0.7, '#37a2da'],
                                    [1, '#fd666d']
                                ]
                            }
                        },
                        pointer: {
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            distance: -20,
                            length: 8,
                            lineStyle: {
                                color: '#fff',
                                width: 2
                            }
                        },
                        splitLine: {
                            distance: -20,
                            length: 20,
                            lineStyle: {
                                color: '#fff',
                                width: 4
                            }
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 15,
                            itemStyle: {
                                borderWidth: 5
                            }
                        },
                        axisLabel: {
                            color: 'auto',
                            distance: 25,
                            fontSize: 10
                        },
                        detail: {
                            valueAnimation: true,
                            formatter: '{value} km/h',
                            color: 'auto',
                            fontSize: 16
                        },
                        data: [{
                            value: 90
                        }]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        },
        mounted() {
            this.myEcharts();
        }

   
    })
    
</script>
</html>

3.在activity中的oncreate中调用方法

webViewEchart = (WebView) this.view.findViewById(R.id.wv_Dashboard);
webSettings=webViewEchart.getSettings();
webSettings.setAllowUniversalAccessFromFileURLs(true);
webSettings.setAllowFileAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setAllowContentAccess(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setAppCacheEnabled(true);

webViewEchart.loadUrl("file:///android_asset/web/wwwroot/b.html");

4.在android中的显示效果