zoukankan      html  css  js  c++  java
  • web端生成的带有echarts图表的html页面,嵌入在(javaFx)webview中显示错位问题

    web项目需要嵌入到手机APP的webview里面以及 windows客户端应用(JavaFx)的webview里面,这个时候就出现了问题。

    echarts渲染的时候根据浏览器不同的内核显示是有区别的。

    项目里面的echarts折线图显示的效果是这样的

    这个效果在网页上面,跟Android app的webview里面显示是没问题的,但是在window显示的echarts折线图显示是错位的,柱状图也显示错位了。

    后来查Echarts的api时发现4.x有新特性,在初始化是可以配置渲染方式为canvas或者svg,默认为canvas。

    初始化代码:var mychart = echarts.init(document.getElementById('demo'), null, {renderer: 'svg'}); 

    在看了下项目显示效果折线是没问题了,但是折线上面的一个标记的特殊的点什么的位置之前是在canvas渲染模式下调整好的,到了svg渲染模式下全变化了,这个需要在从新调整,有时候这个点在不同的环境里面显示的还不一样,得通过修改echarts的options配置来达到显示的最优解。

    另外一点要注意的就是修改成svg以后,rich富文本设置的效果就没有效果了,svg渲染下不支持rich了。

    还有一点很重要的就是:svg渲染下画折线图的时候如果超过连续3个点重复坐标那么折线就不会显示,得把所有重复的点去掉才可以。

     

     

  • 相关阅读:
    node环境下安装vue-cli
    Git 查看、删除、重命名远程分支
    git 错误 fatal: Not a valid object name: 'master'.
    爬虫基本原理
    最长非重复子串(python实现)
    数据分析初步(jupyter常用快捷键,numpy,pandas,matplotlib常用用法)
    学linux,这篇就够了
    爬虫之requests
    nginx配置
    Linux下uwsgi服务器配置及重启
  • 原文地址:https://www.cnblogs.com/wangmaoling/p/11263963.html
Copyright © 2011-2022 走看看