echarts各个配置项详细说明.doc

上传人:b****3 文档编号:2275190 上传时间:2022-10-28 格式:DOC 页数:13 大小:493.46KB
下载 相关 举报
echarts各个配置项详细说明.doc_第1页
第1页 / 共13页
echarts各个配置项详细说明.doc_第2页
第2页 / 共13页
echarts各个配置项详细说明.doc_第3页
第3页 / 共13页
echarts各个配置项详细说明.doc_第4页
第4页 / 共13页
echarts各个配置项详细说明.doc_第5页
第5页 / 共13页
点击查看更多>>
下载资源
资源描述

echarts各个配置项详细说明.doc

《echarts各个配置项详细说明.doc》由会员分享,可在线阅读,更多相关《echarts各个配置项详细说明.doc(13页珍藏版)》请在冰豆网上搜索。

echarts各个配置项详细说明.doc

echarts各个配置项详细说明总结

最近有个朋友在做关于各种图表的项目,用到了echarts,关于各个配置项刚开始用好多都不懂,有些地方需要改不知道改哪个参数,就在网上查了各种,找到了一个不错的总结,分享给大家。

(echarts官网也有配置项说明文档。

theme={

//全图默认背景

//backgroundColor:

'rgba(0,0,0,0)',

//默认色板

color:

['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',

'#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',

'#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',

'#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],

//图表标题

title:

{

x:

'left',//水平安放位置,默认为左对齐,可选为:

//'center'¦'left'¦'right'

//¦{number}(x坐标,单位px)

y:

'top',//垂直安放位置,默认为全图顶端,可选为:

//'top'¦'bottom'¦'center'

//¦{number}(y坐标,单位px)

//textAlign:

null//水平对齐方式,默认根据x设置自动调整

backgroundColor:

'rgba(0,0,0,0)',

borderColor:

'#ccc',//标题边框颜色

borderWidth:

0,//标题边框线宽,单位px,默认为0(无边框)

padding:

5,//标题内边距,单位px,默认各方向内边距为5,

//接受数组分别设定上右下左边距,同css

itemGap:

10,//主副标题纵向间隔,单位px,默认为10,

textStyle:

{

fontSize:

18,

fontWeight:

'bolder',

color:

'#333'//主标题文字颜色

},

subtextStyle:

{

color:

'#aaa'//副标题文字颜色

}

},

//图例

legend:

{

orient:

'horizontal',//布局方式,默认为水平布局,可选为:

//'horizontal'¦'vertical'

x:

'center',//水平安放位置,默认为全图居中,可选为:

//'center'¦'left'¦'right'

//¦{number}(x坐标,单位px)

y:

'top',//垂直安放位置,默认为全图顶端,可选为:

//'top'¦'bottom'¦'center'

//¦{number}(y坐标,单位px)

backgroundColor:

'rgba(0,0,0,0)',

borderColor:

'#ccc',//图例边框颜色

borderWidth:

0,//图例边框线宽,单位px,默认为0(无边框)

padding:

5,//图例内边距,单位px,默认各方向内边距为5,

//接受数组分别设定上右下左边距,同css

itemGap:

10,//各个item之间的间隔,单位px,默认为10,

//横向布局时为水平间隔,纵向布局时为纵向间隔

itemWidth:

20,//图例图形宽度

itemHeight:

14,//图例图形高度

textStyle:

{

color:

'#333'//图例文字颜色

}

},

//值域

dataRange:

{

orient:

'vertical',//布局方式,默认为垂直布局,可选为:

//'horizontal'¦'vertical'

x:

'left',//水平安放位置,默认为全图左对齐,可选为:

//'center'¦'left'¦'right'

//¦{number}(x坐标,单位px)

y:

'bottom',//垂直安放位置,默认为全图底部,可选为:

//'top'¦'bottom'¦'center'

//¦{number}(y坐标,单位px)

backgroundColor:

'rgba(0,0,0,0)',

borderColor:

'#ccc',//值域边框颜色

borderWidth:

0,//值域边框线宽,单位px,默认为0(无边框)

padding:

5,//值域内边距,单位px,默认各方向内边距为5,

//接受数组分别设定上右下左边距,同css

itemGap:

10,//各个item之间的间隔,单位px,默认为10,

//横向布局时为水平间隔,纵向布局时为纵向间隔

itemWidth:

20,//值域图形宽度,线性渐变水平布局宽度为该值*10

itemHeight:

14,//值域图形高度,线性渐变垂直布局高度为该值*10

splitNumber:

5,//分割段数,默认为5,为0时为线性渐变

color:

['#1e90ff','#f0ffff'],//颜色

//text:

['高','低'],//文本,默认为数值文本

textStyle:

{

color:

'#333'//值域文字颜色

}

},

toolbox:

{

orient:

'horizontal',//布局方式,默认为水平布局,可选为:

//'horizontal'¦'vertical'

x:

'right',//水平安放位置,默认为全图右对齐,可选为:

//'center'¦'left'¦'right'

//¦{number}(x坐标,单位px)

y:

'top',//垂直安放位置,默认为全图顶端,可选为:

//'top'¦'bottom'¦'center'

//¦{number}(y坐标,单位px)

color:

['#1e90ff','#22bb22','#4b0082','#d2691e'],

backgroundColor:

'rgba(0,0,0,0)',//工具箱背景颜色

borderColor:

'#ccc',//工具箱边框颜色

borderWidth:

0,//工具箱边框线宽,单位px,默认为0(无边框)

padding:

5,//工具箱内边距,单位px,默认各方向内边距为5,

//接受数组分别设定上右下左边距,同css

itemGap:

10,//各个item之间的间隔,单位px,默认为10,

//横向布局时为水平间隔,纵向布局时为纵向间隔

itemSize:

16,//工具箱图形宽度

featureImageIcon:

{},//自定义图片icon

featureTitle:

{

mark:

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 教学研究 > 教学案例设计

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1