码迷,mamicode.com
首页 > 其他好文 > 详细

浅谈对ECharts的使用

时间:2015-07-06 12:06:49      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:

  上个月的项目,其中有一个模块用的是ECharts来实现的,分别用了折线图,环形图,还有漏斗图,这几个都算比较常见的了,尤其是折线图,环形图,用的最多的就是它们了。之前也没怎么接触过ECharts,实际上用起来,好像很简单,就是看看API,然后写个demo。

  按照惯例,这时候应该对ECharts做个简单介绍:

  ECharts (Enterprise Charts 商业产品图表库),提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现。

  兼容性:支持IE6/7/8/9+,chrome、firefox、safari、opera  (IE8- power by excanvas ) 

  ECharts确实很强大,能实现很多类型的报表,通过看官网就知道,里面的报表很多,各式各样的,基本都能满足需求,样式方面比highcharts还多,确实powerful,不得不点个赞啊。但是确实在使用的过程中也遇到了些问题,比如:

  1. 折线图的数据,在底部的点,鼠标移上去的浮窗有的文字会被挡住的问题;
  2. 一共有6个环形图,每一个环形图的浮窗的显示要求,有颜色的的文字显示,和剩下部分不一样;
  3. 环形图的头部固定显示“今日变化量XXX个”;
  4. 漏斗图中,带横线的数量显示文字挡住的问题;

  解决方案:

  1. 对于鼠标一上去,出现浮窗的部分文字被挡住,其实浮窗的位置定位,是根据鼠标的位置定位的,故如图
    技术分享
  2. 对于环形图的鼠标移上去浮窗显示,调试代码发现,每次触发的是一个tooltip中的formatter方法,当然trigger的参数是“item”,以数据触发,这样的话,formatter里面的参数是每个点的数据,于是,在formatter里面写个switch就解决了。
  3. 对于环形图上面的文字显示,本来是在data里面写itemStyle解决了,但是有个缺点是,当今日变化量比较大时,环形图上的文字显示其实是一直处于变化量中间的文字的,这样的话,高度就不统一了,本来打算用markPoint,后来发现用起来比自己写还麻烦,官方演示文档在这方面很少,于是,自己在echarts的头部手写部分固定的“今日变化量”显示,注意,一般要先隐藏这部分,先显示暂无数据,等数据请求加载过来后,再显示“今日变化量”和echarts。
  4. 对于漏斗图中显示文字挡住的问题,其实就是把整个漏斗图左移一点就够了。

浅谈对ECharts的使用

标签:

原文地址:http://www.cnblogs.com/pijiaxiang/p/4616630.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!