本文概览:介绍了折线图(阴影、网格、缩放等功能)、饼图、关系图的使用。

一、折线图

1.1 使用

参考http://echarts.baidu.com/examples/editor.html?c=line-marker 。新增了阴影、缩放、x轴网格、线条颜色的功能。

1

包含两部分:

(1)html

(2)javascript

1.2 常见功能

1、缩放功能

在option中添加

效果如下图

2

2、网格线

默认Y轴是有线的,但是X轴没有,通过如下属性来设置X周的网格线

举例如下:

Snip20180920_75

3、阴影

itemStyle: {normal: {areaStyle: {opacity:0.01}}},

其中,

  • opacity表示透明度。0-1取值。
  • 默认是线条颜色,但是可以使用shadowColor: ‘rgba(0, 0, 0, 0.5)’指定背景颜色,如下

itemStyle: {normal: {areaStyle: {shadowColor: ‘rgba(0, 0, 0, 0.5)’,opacity:0.08}}},

举例如下:

3

 

4、设置线条颜色

在series中进行如设置

5、去掉折线中小圆圈⭕️

4

通过设置symbolSize:0,举例如下:

6、设置legend的颜色

7、最大点markPonit的颜色。通过itemSytle#color设置

8、平均线markLine的颜色。通过itemSytle#color设置

9、自定义marLine。通过markLine.data指定。

当我们在计算平均值时,需要剔除为0的值,或者我们自定义平均值算法时,此时可以自己设置平均线

二、饼图

2.1 使用

参考:http://echarts.baidu.com/examples/editor.html?c=pie-simple  。效果如下

Snip20180920_74

包含两部分

(1)html

(2)javascript

2.2 常用功能

1、分页 标签栏

效果如下下图

Snip20180928_45

通过“scroll”设置type,如下

2、重叠

避免如下图中文字重叠,进行设置

Snip20180928_47

可以设置“avoidLabelOverlap: true,”,在series设置如下:

3、设置最小扇区

在某些情况下,有些区域特别小,无法再图中体现出来,此时我们需要通过minAngle属性设置扇形区域展现的最小值

4、存放饼图的div的高度自适应

当数据过多时,饼图中标签没有办法在div中显示全,如下

Snip20180928_48

此时需要动态的扩展div的高度,来让饼图中所有信息全部显示出来,这里在原来的script中进行修改,插入如下代码,没有数据div高度为30px,数据量不超过60个,则为460px,否则按照规则进行增长div高度。

5、不显示饼图中为0的信息

如下图,只有一个有值,其他没有值

F10A68BB8D130FAC6B8983EDD

为了把上图中为0的数据过滤掉,在<script>中修改如下

三、关系图

1、节点形状symbol和symbolSize

http://echarts.baidu.com/option.html#series-graph.data

包含五种形状如下:

56808274

如下是正方形

还可以通过x和y指定大小,此时就是矩形了

2、布局layout

参考:http://echarts.baidu.com/option.html#series-graph.layout

layout可以选择none、circular和force

  • ‘none’ 不采用任何布局,使用节点中提供的 x, y 作为节点的位置。
  • ‘circular’ 采用环形布局。
  • ‘force’ 采用力引导布局。

3、标记节点颜色

四、添加事件

参考:http://echarts.baidu.com/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA

1、事件说明

echarts的时间,都可以通过如下代码来添加

目前支持事件的有’series’(直方图)、’markLine’(平均线)、’markPoint’(最大最小值等)、’timeLine’ 等。因为所有这些类型都走一个公用的代码,所以需要区分,即在一个这些图中有最大值、最小值和平均线,都会走同一个事件逻辑,可以通过如下区分:

 

2、直方图

在直方图的柱子上点击,就会跳转页面。如下区域

Snip20181018_177

3、折线图的最大值或者最小值上添加点击事件,可以通过超链接调到其他页面,如下图区域

Snip20181018_176

对于markPoint类型的事件,无法获取到X坐标,只能获取Y值和“最大值/最小值”的标识两个信息,为了获取X坐标信息,如下代码

 

五、Tree

5.1 使用

http://echarts.baidu.com/examples/editor.html?c=tree-legend

展示效果如下:

11

此时需要后端代码中定义一个Tree,就可以了如下

只需要返回该tree的json字符串就可以了

5.2 常用功能

1、 默认展开所有节点,通过series[i]-tree.initialTreeDepth属性设置默认展开级别

参考文献

1、官网 http://echarts.baidu.com/examples/

 

分类&标签