uniapp中无法使用antv-F2,使用web-view组件加载antv-F2的html5页面也不行？？？

分类：HBuilderX

uniapp

如题，因项目需要使用antv-F2，尝试在uniapp中使用antv-F2，因uniapp的canvas与html5的canvas不一致，所以无法在uniapp中使用antv-F2突变，，于是使用组件web-view加载云端的html页面，然后还是不行，按照官方文档，web-view实际上是支持dom的，但是加载web页面后为什么还是异常呢
浏览器中打开正常，

web-view加载后显示图表是这样的

2018-12-24 14:04 负责人:无分享

10 个回复

DCloud_UNI_GSQ

html页面是按移动端适配的吗？是否有测试demo

xmsite (作者)

这是在线的demo，你直接使用web-view加载出来试试，就是我上面的效果了https://antv.alipay.com/assets/dist/3.0.0/f2/3.x/gallery/forecast-line.html?enableWK=YES

2018-12-25 11:52
xmsite (作者)

将demo的页面放在本地也是一样的

2018-12-25 11:54
xmsite (作者)

是按移动段适配的

2018-12-25 12:21

熠

antv-f2有小程序版 https://github.com/antvis/wx-f2

l***@126.com

请问楼主你的项目最后使用了antv-f2吗我也想用但是uni 不支持dom操作，试了好久我要放弃了

xmsite (作者)

还在研究中……

2019-01-15 19:38
5***@qq.com

你们研究好了么

2019-01-23 15:50
l***@126.com

回复 5***@qq.com:我最后还是用了echarts

2019-02-22 10:22

秋云

同样急需F2图表组件，求官方开发

DCloud_UNI_GSQ

后期会解决此问题，使用web-view加载canvas异常的可以在远程页面再套一个iframe

秋云

wx-charts跨端图表组件

F2图表跨端插件没开发出来，但搞了一个wx-charts插件，仿照F2样式做的，调用很简单方便，解决H5端图表显示模糊等问题，支持toolTip及入场动画展示。已上传插件市场，欢迎各位下载，觉得好用5星好评哦

wx-charts跨端图表
https://ext.dcloud.net.cn/plugin?id=271

羊仔

去掉demo里的
opts: {
onInit: initChart
}
然后加上
mounted() {
this.$mp.page.selectComponent("#column-dom").init(this.initChart);
},

然后就可以正常的玩antv了

xmsite (作者)

app中支持吗请问

2020-01-06 19:42
羊仔

回复 xmsite: 没试过

2020-01-07 09:06

z***@163.com - 半只绵羊

试了下可以

<style>  
</style>  

<template>  
    <view>  
        <canvas id="myChart" width="400" height="260"></canvas>  
    </view>  
</template>  
<script>  
    const F2 = require('@antv/f2')  

    export default{  
        data () {  
            return{  
                data : [  
                    { genre: 'Sports', sold: 275 },  
                    { genre: 'Strategy', sold: 115 },  
                    { genre: 'Action', sold: 120 },  
                    { genre: 'Shooter', sold: 350 },  
                    { genre: 'Other', sold: 150 },  
                ]  
            }  
        },  
        methods:{},  
        onReady () {  
            let el = document.querySelector('#myChart')  
            let canvas = el.querySelector('canvas')  
            console.log('canvas', canvas)  
            let chart = new F2.Chart({  
                el: canvas,  
                pixelRatio: window.devicePixelRatio  
            })  
            console.log('chart', chart)  
            chart.source(this.data)  
            chart.interval().position('genre*sold').color('genre')  
            chart.render()  
        }  
    }  
</script>