每个系列通过type决定自己的图表类型。其中主要会用到的type的类型有:line(折线图)、bar(柱状图/条形图)、pie(饼状图)、scatter(散点(气泡)图)、effectScatter(带有涟漪特效动画的散点(气泡)图)、radar(雷达图)、tree(树图)、sunburst(旭日图)、heatmap(热力图)、map(地图)、lines(线图)、gauge(仪表盘)等。

下面对line类型图表进行讲解,其他类型图表根据各自类型有各自相对的配置项。

type:'line',折线图是利用折线将各个数据点标志连接起来的图表。多用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。设置areaStyle后,可以绘制面积图。配合分段型visualMap组件可以将折线/面积图通过不同颜色分区间。

series.name:string类型,系列名称,用于tooltip的显示、legend的图例筛选,在setOption更新数据和配置项时,用于指定对应的系列。

series.symbol:string,Function[default:'emptyCircle'],标记图形。ECharts提供的标记类型包括‘circle’‘rect’‘roundRect’‘triangle’‘diamond’‘pin’‘arrow’‘none’。可通过“image://url”设置为图片,其中,URL为图片的链接,或者dataURI。可以通过“path://”将图标设置为任意矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可将其设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见SVG PathData。可以从Adobe Illustrator等工具编辑导出。

series.symbolSize:number,Array,Function[default:4],标记的大小,可以设置成诸如10这样单一的数字,也可以用数组分开,表示宽和高。例如,[20,10]表示标记宽为20、高为10。假设需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:(value:Array|number,params:Object)=>number|Array。其中,第一个参数value为data中的数据值;第二个参数params是其他的数据项参数。

series.itemStyle:Object类型,折线拐点标志的样式。开发过程中经常会使用到的详细配置项有color、borderColor、borderWidth等。

series:lineStyle:Object类型,线条样式。需要提醒的是,修改lineStyle中的颜色不会影响图例颜色,假设需要图例颜色和折线图颜色一致,需修改itemStyle.color,线条颜色默认也会取该颜色。开发过程中经常会使用到的详细配置项有color、width等。(www.daowen.com)

series.areaStyle:Object类型,区域填充样式。开发过程中经常会使用到的详细配置项有color、opacity等。

series.emphasis:Object类型,图形的高亮样式,其子类对象有label、itemStyle,分别为标签配置和样式配置。

series.data:Object类型,系列中的数据内容数组。数组项通常为具体的数据项。假设系列没有指定data,并且option有dataset,那么默认使用第一个dataset。假设指定了data,则不会再使用dataset。当其数据不存在时(不存在不代表值为0),可以用-、null、undefined、NaN表示。

series.markPoint:Object类型,图表标注。开发过程中经常会使用到的详细配置项有symbol、symbolSize、symbolRotate、label、itemStyle、emphasis、data等。

series.markLine:*,图表标线。开发过程中经常会使用到的详细配置项有symbol、symbolSize、label、lineStyle、emphasis、data等。

series.tooltip:*,本系列特定的tooltip设定。开发过程中经常会使用到的详细配置项有position、formatter、backgroundColor、borderColor、borderWidth、textStyle等。