echarts各个配置项详细说明文档格式.doc
- 文档编号:8254479
- 上传时间:2023-05-10
- 格式:DOC
- 页数:13
- 大小:493.46KB
echarts各个配置项详细说明文档格式.doc
《echarts各个配置项详细说明文档格式.doc》由会员分享,可在线阅读,更多相关《echarts各个配置项详细说明文档格式.doc(13页珍藏版)》请在冰点文库上搜索。
#00fa9a'
#ffd700'
#6699FF'
#ff6666'
#3cb371'
#b8860b'
#30e0e0'
],
//图表标题
title:
{
x:
left'
//水平安放位置,默认为左对齐,可选为:
//'
center'
¦
right'
//¦
{number}(x坐标,单位px)
y:
top'
//垂直安放位置,默认为全图顶端,可选为:
bottom'
{number}(y坐标,单位px)
//textAlign:
null//水平对齐方式,默认根据x设置自动调整
backgroundColor:
borderColor:
#ccc'
//标题边框颜色
borderWidth:
0,//标题边框线宽,单位px,默认为0(无边框)
padding:
5,//标题内边距,单位px,默认各方向内边距为5,
//接受数组分别设定上右下左边距,同css
itemGap:
10,//主副标题纵向间隔,单位px,默认为10,
textStyle:
fontSize:
18,
fontWeight:
bolder'
color:
#333'
//主标题文字颜色
},
subtextStyle:
#aaa'
//副标题文字颜色
}
},
//图例
legend:
orient:
horizontal'
//布局方式,默认为水平布局,可选为:
vertical'
//水平安放位置,默认为全图居中,可选为:
//图例边框颜色
0,//图例边框线宽,单位px,默认为0(无边框)
5,//图例内边距,单位px,默认各方向内边距为5,
10,//各个item之间的间隔,单位px,默认为10,
//横向布局时为水平间隔,纵向布局时为纵向间隔
itemWidth:
20,//图例图形宽度
itemHeight:
14,//图例图形高度
//图例文字颜色
//值域
dataRange:
//布局方式,默认为垂直布局,可选为:
//水平安放位置,默认为全图左对齐,可选为:
//垂直安放位置,默认为全图底部,可选为:
//值域边框颜色
0,//值域边框线宽,单位px,默认为0(无边框)
5,//值域内边距,单位px,默认各方向内边距为5,
20,//值域图形宽度,线性渐变水平布局宽度为该值*10
14,//值域图形高度,线性渐变垂直布局高度为该值*10
splitNumber:
5,//分割段数,默认为5,为0时为线性渐变
color:
['
#f0ffff'
],//颜色
//text:
高'
低'
],//文本,默认为数值文本
//值域文字颜色
toolbox:
//水平安放位置,默认为全图右对齐,可选为:
color:
#22bb22'
#4b0082'
#d2691e'
//工具箱背景颜色
//工具箱边框颜色
0,//工具箱边框线宽,单位px,默认为0(无边框)
5,//工具箱内边距,单位px,默认各方向内边距为5,
itemSize:
16,//工具箱图形宽度
featureImageIcon:
{},//自定义图片icon
featureTitle:
mark:
辅助线开关'
markUndo:
删除辅助线'
markClear:
清空辅助线'
dataZoom:
区域缩放'
dataZoomReset:
区域缩放后退'
dataView:
数据视图'
lineChart:
折线图切换'
barChart:
柱形图切换'
restore:
还原'
saveAsImage:
保存为图片'
//提示框
tooltip:
trigger:
item'
//触发类型,默认数据触发,见下图,可选为:
'
axis'
showDelay:
20,//显示延迟,添加显示延迟可以避免频繁切换,单位ms
hideDelay:
100,//隐藏延迟,单位ms
transitionDuration:
0.4,//动画变换时间,单位s
rgba(0,0,0,0.7)'
//提示背景颜色,默认为透明度为0.7的黑色
//提示边框颜色
borderRadius:
4,//提示边框圆角,单位px,默认为4
0,//提示边框线宽,单位px,默认为0(无边框)
5,//提示内边距,单位px,默认各方向内边距为5,
axisPointer:
{//坐标轴指示器,坐标轴触发有效
type:
line'
//默认为直线,可选为:
|'
shadow'
lineStyle:
{//直线指示器样式设置
color:
#48b'
width:
2,
type:
solid'
},
shadowStyle:
{//阴影指示器样式设置
auto'
//阴影大小
rgba(150,150,150,0.3)'
//阴影颜色
}
#fff'
//区域缩放控制器
dataZoom:
//x:
{number},//水平安放位置,默认为根据grid参数适配,可选为:
//{number}(x坐标,单位px)
//y:
{number},//垂直安放位置,默认为根据grid参数适配,可选为:
//{number}(y坐标,单位px)
//width:
{number},//指定宽度,横向布局时默认为根据grid参数适配
//height:
{number},//指定高度,纵向布局时默认为根据grid参数适配
//背景颜色
dataBackgroundColor:
#eee'
//数据背景颜色
fillerColor:
rgba(144,197,237,0.2)'
//填充颜色
handleColor:
rgba(70,130,180,0.8)'
//手柄颜色
//网格
grid:
80,
60,
x2:
y2:
{totalWidth}-x-x2,
{totalHeight}-y-y2,
1,
//类目轴
categoryAxis:
position:
//位置
nameLocation:
end'
//坐标轴名字位置,支持'
start'
boundaryGap:
true,//类目起始和结束两端空白策略
axisLine:
{//坐标轴线
show:
true,//默认显示,属性show控制显示与否
lineStyle:
{//属性lineStyle控制线条样式
axisTick:
{//坐标轴小标记
true,//属性show控制显示与否,默认不显示
interval:
//onGap:
null,
inside:
false,//控制小标记是否在grid里
length:
5,//属性length控制线长
1
axisLabel:
{//坐标轴文本标签,详见axis.axisLabel
true,
rotate:
0,
margin:
8,
//formatter:
textStyle:
{//其余属性默认使用全局文本样式,详见TEXTSTYLE
splitLine:
{//分隔线
{//属性lineStyle(详见lineStyle)控制线条样式
splitArea:
{//分隔区域
false,//默认不显示,属性show控制显示与否
areaStyle:
{//属性areaStyle(详见areaStyle)控制区域样式
rgba(250,250,250,0.3)'
rgba(200,200,200,0.3)'
]
//数值型坐标轴默认参数
valueAxis:
//位置
nameTextStyle:
{},//坐标轴文字样式,默认取全局样式
[0,0],//数值起始和结束两端空白策略
5,//分割段数,默认为5
false,//属性show控制显示与否,默认不显示
false,//控制小标记是否在gri
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- echarts 各个 配置 详细 说明