Webview +vue.js +echarts

最新推荐文章于 2023-05-05 09:34:44 发布

easyboot

最新推荐文章于 2023-05-05 09:34:44 发布

阅读量212

点赞数

分类专栏： # Vue.js Android

本文链接：https://blog.csdn.net/easyboot/article/details/118751704

版权

Android 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

Vue.js

20 篇文章 0 订阅

订阅专栏

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中的显示效果

5. 目前测试android 7.0 可用，5.0下不显示原因现在不明

测试了一下使用jquery就可以在5.0下显示了

easyboot

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Webview +vue.js +echarts

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=...
复制链接

扫一扫