echarts的使用注意要点

更新日期: 2019-07-18阅读量: 1522标签: echarts

在公司做了一版dashboard,对echarts有了大量的实践。坚果图,日历图,折线图,地理图。难易程度排名为坚果图,折线图,日历图,地理图。总结了以下几点注意事项:


利用好回调函数,可以极大的增加图表个性化。如

tooltip : {
        trigger: 'item',
        formatter : function (params) {
           var value = params.value[1].toString().replace(/(\d{1,3})(?=(\d{3})+$)/g,function($1){return $1=$1+','})
           return `${params.value[0]}<br/>活跃人次:${value}`
         }
      }


图表共同的特点是鼠标悬浮的标签可以用回调函数格式化,散点图的symbol大小也可以通过回调函数设置,映射的分段设置,非常的灵活。如

 visualMap: [
          {
            type: 'piecewise',
            min: 0,
            max: 100,
            bottom: 60,
            left: "left",
            pieces: [
                {min: 0, max: 59,label: '<60%',color:'#FF4177'},
                {min: 60, max: 70, label: '60%-70%',color:'#FFA45A'},  
                {min: 71, max: 89, label: '71%-89%',color:'#FFDC5A'},  
                {min: 90, max: 100, label: '90%-100%',color:'#00B743'}, 
            ],
            dimension:2
          }


设置的data是数组形式,可以通过value[x]取到每个item的x维度数据。如

 data: [["115.88", "26.863", 99, 99,77,"430000",四川]],
 params[0].value[6] :四川

散点图是独立于几个坐标表的,xy坐标,日历,地图上都可以成为散点图的分布坐标系

地理图有js引入方式和json文件格式引入,目前用的方法是请求json格式的文件,其实json 文件中储存的都是一种叫做geoJSON格式的位置信息,echarts根据这些信息绘制多边形以及其相应标签。

图表重绘后需要注意及时dispose,不然当点击一个散点的时候会多次触发绑定的点击事件。严重时会导致浏览器崩溃。

注意不要在watch的图表data属性中设置操作data属性,因为echarts赋值时会对该data进行操作和改变,该变化会被watch再次捕获,即会进入事件循环。


站长推荐

1.云服务推荐: 国内主流云服务商/虚拟空间,各类云产品的最新活动,优惠券领取。领取地址:阿里云腾讯云硅云

链接: https://www.fly63.com/article/detial/5999

关于ECharts内存泄漏问题

最近使用websocket加ECharts做了一个实时监控的功能,发现了一个比较严重的问题,就是浏览器运行一段时间就会非常卡,之前在ECharts官网运行官方实例“动态数据 + 时间坐标轴”时

关于echarts图表在tab页中width:100%失效的问题

使用echarts时,写在tab页中的图表宽度明明设成了100%,但是在页面上实际却只有100px宽。解决办法:找一个在tab页的切换操作中不会隐藏的父容器,把它的宽度的具体值取出后在初始化图表之前直接赋给图表

微信小程序不支持Echarts中tooltip的解决方法

Echarts官方文档明确指出自己不支持微信小程序中使用Tooltip这个功能。但是只要做过图表设计的人都知道,Tooltip这个功能有多么重要,尤其是对于line图而言。那么如何解决或者说间接实现tooltip呢?

三大图表库:ECharts 、 BizCharts 和 G2,该如何选择?

对比以上3种图表,ECharts和BizCharts相对容易使用,尤其ECharts的配置非常清晰,BizCharts与其也有一定相似之处。BizCharts优势在于组件化的形式使得dom结构相对清晰,按需引用。G2比较适合需要大量图表交互时引用,其丰富的api处理交互逻辑相对更有优势。

echarts是什么_echart.js学习和使用

什么是Echarts?简单来说呢它就是一个商业级数据图表,一个纯JavaScript的图标库。可以兼容绝大部分的浏览器,可以为前端开发提供一个直观、生动、可交互、可高度个性化定制的数据可视化图表。

如何在 Vue 项目中使用 echarts

数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,废话不多说,那我们就看看如何在 Vue 的项目中使用 echarts。

基于echarts 灵活封装react柱形图组件

现在各种框架各种库都很强大,但是也因为功能强大,导致很多配置都过于繁重,真正有用的就那么几个,今天就基于echarts封装一个通用柱形图!想要了解其他的组件可以看下我之前封装的其他组件有好的思路或者其他的也会分享出来的

vue中使用ECharts实现折线图和饼图

在开发后台管理项目时,需要统计后台用户数据,以折现图和饼图的形式显示,这边采用apache-echarts来实现需求。

在vue项目中封装echarts的正确姿势

可能有一些开发者忘记考虑echarts更新数据的特性,以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新,窗口缩放引起echarts图形变形问题

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!