Echarts使用

配置项

一、title属性

标题组件，包含主标题和副标题。
在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。

属性	子属性	类型	说明	值
show	-	boolean	是否显示标题组件	true
true	-	string	主标题文本，支持使用 \n 换行。	-
link	-	string	主标题文本超链接。	-
target	-	string	指定窗口打开主标题超链接。	self：当前窗口打开 blank：新窗口打开
textStyle	color	color	主标题文字的颜色。	#333
textStyl	fontWeight	string、number	主标题文字字体的粗细。	normal、bold、bolder、 lighter 100 200 300 400
textStyl	fontSize	number	主标题文字的字体大小。	18
-	-	-	-	-
subtext	-	string	副标题文本，支持使用 \n 换行。	--
sublink	-	string	副标题文本超链接。
subtarget	-	string	指定窗口打开副标题超链接.	self：当前窗口打开 blank：新窗口打开
subtextStyle	color	color	副标题文字的颜色。	#aaa
subtextStyle	fontWeight	string、number	副标题文字字体的粗细。	同主文本
subtextStyle	fontSize	number	副标题文字的字体大小。	12
-	-	-	-	-
left	-	string、number	title 组件离容器左侧的距离。	20% left、cent、right
top	-	string、number	title 组件离容器上侧的距离。	20% left、cent、right
backgroundColor	-	color	标题背景色。	透明
borderColor	-	color	标题的边框颜色。	#ccc
borderWidth	-	number	标题的边框线宽。	0
borderRadius	-	number、Array	圆角半径，单位px，支持传入数组分别指定 4 个圆角半径	5 [5,5,0,0]

二、legend属性

图例组件。
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。
当图例数量过多时，可以使用滚动图例（垂直）或滚动图例（水平），参见：legend.type
滚动图例链接：https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1

legend

属性	子属性	类型	说明	默认值
type	-	string	图例的类型	plain:普通图例。 scroll:滚动图例。当图例数量较多时可以使用
show	-	boolean	图例的显隐	true
left	-	string、number	图例组件离容器左侧的距离。	20% left、cent、right
top	-	string、number	图例组件离容器上侧的距离。	20% left、cent、right
width	-	string、number	图例组件的宽度。默认自适应。	百分比，绝对值
height	-	string、number	图例组件的高度。默认自适应。	百分比，绝对值
align	-	string	图例标记和文本的对齐。默认自动	auto、left、right
padding	-	number、Array	图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。	-
itemGap	-	number	图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。	-
itemWidth	-	number	图例标记的图形宽度。	-
itemHeight	-	number	图例标记的图形高度。	-
inactiveColor	-	color	图例关闭时的颜色。默认#ccc	-
textStyle	color	color	文字的颜色。默认#ccc	-
textStyle	fontWeight	string、number	文字字体的粗细。	normal、 bold、 bolder、 lighter 100 200 300 400
-	-	-	-	-
icon	-	string	图例项的 icon。	ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin','arrow', 'none'可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
data	name	string	图例项的名称	-
data	icon	string	图例项的 icon。	同icon
data	textStyle	Object	图例项的文本样式。	-
-	-	-	-	-
backgroundColor	-	color	图例背景色，默认透明。	-
borderColor	-	color	图例的边框颜色。	-

三、grid属性

直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。

例如下面这个 Anscombe Quartet 的示例：
grid

属性	子属性	类型	说明	值
show	-	boolen	是否显示直角坐标系网格	true、false
left	-	string、number	grid 组件离容器左侧的距离。	-
top	-	string、number	grid 组件离容器上侧的距离。	-
right	-	string、number	grid 组件离容器右侧的距离。	-
bottom	-	string、number	grid 组件离容器下侧的距离。	-
width	-	string、numbe	grid 组件的宽度。默认自适应。	-
height	-	string、numbe	grid 组件的高度。默认自适应。	-
backgroundColor	-	color	网格背景色，默认透明。此配置项生效的前提是，设置了 show : true。	-
borderColor	-	color	网格的边框颜色。	-
borderWidth	-	number	网格的边框线宽。	-
tooltip	-	Object	提示框组件	-
tooltip	show	boolean	是否显示提示框组件，包括提示框浮层和 axisPointer。	-

四、XAxis属性

直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。

属性	子属性	类型	说明	值
show	-	boolean	是否显示 x 轴。	-
position	-	string	x 轴的位置。	top、bottom
name	-	string	坐标轴名称。	-
nameLocation	-	string	坐标轴名称显示位置。	start、middle 或者、center、end
nameTextStyle	-	obiect	坐标轴名称的文字样式。	-
nameTextStyle	color	color	坐标轴名称的颜色	-
nameTextStyle	fontWeight	string、number	坐标轴名称文字字体的粗细。	-
nameTextStyle	fontSize	number	坐标轴名称文字的字体大小。	-
nameTextStyle	padding	number、Array	文字块的内边距。	-
-	-	-	-	-
inverse	-	bollean	是否是反向坐标轴。	-
axisLine	-	obiect	坐标轴轴线相关设置。	-
axisLine	show	boolean	是否显示坐标轴轴线。	-
axisLine	symbol	string、array	轴线两边箭头	可写['none', 'arrow']
-	-	-	-	-
axisLabel	color	color	刻度标签文字的颜色	-
splitLine	show	boolean	是否显示分隔线。默认数值轴显示，类目轴不显示。	-

四、yAxis属性

直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。

属性	子属性	类型	说明	值
show	-	boolean	是否显示 y 轴。	-
position	-	string	y 轴的位置。	left、right
name	-	string	坐标轴名称。	-
nameLocation	-	string	坐标轴名称显示位置。	start、middle 或者、center、end
nameTextStyle	-	obiect	坐标轴名称的文字样式。	-
nameTextStyle	color	color	坐标轴名称的颜色	-
nameTextStyle	fontWeight	string、number	坐标轴名称文字字体的粗细。	-
nameTextStyle	fontSize	number	坐标轴名称文字的字体大小。	-
nameTextStyle	padding	number、Array	文字块的内边距。	-
-	-	-	-	-
inverse	-	bollean	是否是反向坐标轴。	-
axisLine	-	obiect	坐标轴轴线相关设置。	-
axisLine	show	boolean	是否显示坐标轴轴线。	-
axisLine	symbol	string、array	轴线两边箭头	可写['none', 'arrow']
-	-	-	-	-
axisLabel	color	color	刻度标签文字的颜色	-
splitLine	show	boolean	是否显示分隔线。默认数值轴显示，类目轴不显示。	-