echarts图表的使用经验

   如何隐藏坐标轴

   Echarts中options对象有xAxis、yAxis参数,可以控制是否显示坐标轴、坐标轴刻度标签、坐标轴轴线、坐标轴刻度、分割线等

   柱形图如何设置柱子渐变和圆角

   主要通过itemStyle属性,color来设置渐变,barBorderRadius属性设置圆角,遵循css左上、右上、右下、左下顺序。同时下方代码加了柱子数值label配置。barWidth是柱子宽度。

   柱形图添加折线

   我们可以再在series里面添加line,同时可以设置折线颜色(lineStyle),折线线条区域颜色(areaStyle)等,都是可以通过new echarts.graphic.LinearGradient()来设置渐变。

   数据格式

   这个也是非常简单,只需要在需要格式化的地方,加上formatter方法,即可对数据进行格式化。

   多数据图表可缩放

   在options下可以添加dataZoom,来控制默认展示位置等。

   视图里面加阴影提示:tooltip,提示框组件

   show,默认true,是否显示提示框组件

   trigger,触发类型,item、axis、none,当为none的时候代表什么都不触发,就不会显示提示框

   axisPointer,坐标轴指示器配置项,实际上坐标轴指示器的全部功能,都可以通过轴上的 axisPointer 配置项完成。

   axisPointer的type类型:
   1、'line' 直线指示器
   2、'shadow' 阴影指示器
   3、'none' 无指示器
   4、'cross' 十字准星指示器。其实是种简写,表示启用两个正交的轴的 axisPointer。

   label属性加formatter函数,可以格式化提示框显示内容

Echarts使用:

使用Echarts来显示图表,相比Hcharts来说,这两者并没有多大的区别,在原理上都是通过ajax函数回调来解析json格式的数据,将解析出来的数据用图表来进行显示,而两者的区别用一个比喻来说就像是office和wps的区别,而最大的区别主要是来自技术支持的,highcharts是基于svg技术的,而echarts基于canvas,两者技术基础完全不一样,各有特点。而后者是可以在浏览器实现3D图形的,这种效果highcharts是完全不可能做得到的。

使用echarts主要是包含三部分:json数据封装、ajax请求和回调处理和引用echarts的js。

json数据封装:

主要是数据库操作,这里主要是完成对于DataSet格式的查询出来的数据进行转化成json格式的数据,将查询出来的数据放到list<object>中,最主要的是将这个list<object>进行JavaScriptSerializer的序列化,序列化的目的就是将list<objecty>对象转化成json格式数据,这是完成echarts图表显示的数据格式调整和数据准备。

ajax请求和回调处理

因为这里涉及到异步请求,需要使用到ajax请求,在使用时主要使用的是请求回调,这里也使用了一般处理程序,也就是创建类来处理,通过这个cmd可以获取到具体是执行的是哪个前端来发送请求。dataType主要是表示的数据的类型,这里主要是json格式数据;Success表示的是后台返回数据后并且ajax执行成功后的回调。

注意的是,主要是echarts.js和echarts-map.js的版本问题,主要这两者要与esl.js的版本统一,esl.js是echarts2的版本,在开始时,直接从Echarts观望中下载最新的Echarts3后,导致图表不显示。

测试时,总是能获取到数据,但是不能显示图表

当图表不显示时,一般是要测试数据是否是正确的,或者是测试数据是否是有的,主要测试的是ajax的使用是否是正确的,在开始时,ajax提交到一般处理程序中,能够获取到相应的json格式的数据,但是一直走的是error函数回调


标签:

除特别注明外,本站所有文章均为蓝衣社——企商科技原创,转载请注明出处来自http://blog.btwob.net/post/44.html

发表评论:

昵称(必填)

邮箱(选填)

网址(选填)

正文(必填)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

投稿专用

Copyright 蓝衣社 Rights Reserved.

原创内容,版权保护,转载请联系原创作者!违者必究!