echarts图表的内边距_echarts——各个配置项详细说明总结

pie: {

center : ['50%', '50%'], //默认全局居中

radius : [0, '75%'],

clockWise :false, //默认逆时针

startAngle: 90,

minAngle:0, //最小角度改为0

selectedOffset: 10, //选中是扇区偏移量

itemStyle: {

normal: {//color: 各异,

borderColor: '#fff',

borderWidth:1,

label: {

show:true,

position:'outer'

//textStyle: null//默认使用全局文本样式，详见TEXTSTYLE

},

labelLine: {

show:true,

length:20,

lineStyle: {//color: 各异,

width: 1,

type:'solid'}

}

},

emphasis: {//color: 各异,

borderColor: 'rgba(0,0,0,0)',

borderWidth:1,

label: {

show:false

//position: 'outer'//textStyle: null//默认使用全局文本样式，详见TEXTSTYLE

},

labelLine: {

show:false,

length:20,

lineStyle: {//color: 各异,

width: 1,

type:'solid'}

}

}

}

},

map: {

mapType:'china', //各省的mapType暂时都用中文

mapLocation: {

x :'center',

y :'center'

//width//自适应//height//自适应

},

showLegendSymbol :true, //显示图例颜色标识(系列标识的小圆点)，存在legend时生效

itemStyle: {

normal: {//color: 各异,

borderColor: '#fff',

borderWidth:1,

areaStyle: {

color:'#ccc'//rgba(135,206,250,0.8)

},

label: {

show:false,

textStyle: {

color:'rgba(139,69,19,1)'}

}

},

emphasis: {//也是选中样式//color: 各异,

borderColor: 'rgba(0,0,0,0)',

borderWidth:1,

areaStyle: {

color:'rgba(255,215,0,0.8)'},

label: {

show:false,

textStyle: {

color:'rgba(139,69,19,1)'}

}

}

}

},

force : {//数据map到圆的半径的最小值和最大值

minRadius : 10,

maxRadius :20,

density :1.0,

attractiveness :1.0,//初始化的随机大小位置

initSize : 300,//向心力因子，越大向心力越大

centripetal : 1,//冷却因子

coolDown : 0.99,//分类里如果有样式会覆盖节点默认样式

itemStyle: {

normal: {//color: 各异,

label: {

show:false

//textStyle: null//默认使用全局文本样式，详见TEXTSTYLE

},

nodeStyle : {

brushType :'both',

color :'#f08c2e',

strokeColor :'#5182ab'},

linkStyle : {

strokeColor :'#5182ab'}

},

emphasis: {//color: 各异,

label: {

show:false

//textStyle: null//默认使用全局文本样式，详见TEXTSTYLE

},

nodeStyle : {},

linkStyle : {}

}

}

},

chord : {

radius : ['65%', '75%'],

center : ['50%', '50%'],

padding :2,

sort :'none', //can be 'none', 'ascending', 'descending'

sortSub : 'none', //can be 'none', 'ascending', 'descending'

startAngle : 90,

clockWise :false,

showScale :false,

showScaleText :false,

itemStyle : {

normal : {

label : {

show :true

//textStyle: null//默认使用全局文本样式，详见TEXTSTYLE

},

lineStyle : {

width :0,

color :'#000'},

chordStyle : {

lineStyle : {

width :1,

color :'#666'}

}

},

emphasis : {

lineStyle : {

width :0,

color :'#000'},

chordStyle : {

lineStyle : {

width :2,

color :'#333'}

}

}

}

},

island: {

r:15,

calculateStep:0.1 //滚轮可计算步长 0.1 = 10%

},

markPoint : {

symbol:'pin', //标注类型

symbolSize: 10, //标注大小，半宽(半径)参数，当图形为方向或菱形则总宽度为symbolSize * 2//symbolRotate : null,//标注旋转控制

itemStyle: {

normal: {//color: 各异，//borderColor: 各异,//标注边线颜色，优先于color

borderWidth: 2, //标注边线线宽，单位px，默认为1

label: {

show:true,

position:'inside' //可选为'left'|'right'|'top'|'bottom'//textStyle: null//默认使用全局文本样式，详见TEXTSTYLE

}

},

emphasis: {//color: 各异

label: {

show:true

//position: 'inside'//'left'|'right'|'top'|'bottom'//textStyle: null//默认使用全局文本样式，详见TEXTSTYLE

}

}

}

},

markLine : {//标线起始和结束的symbol介绍类型，如果都一样，可以直接传string

symbol: ['circle', 'arrow'],//标线起始和结束的symbol大小，半宽(半径)参数，当图形为方向或菱形则总宽度为symbolSize * 2

symbolSize: [2, 4],//标线起始和结束的symbol旋转控制//symbolRotate : null,

itemStyle: {

normal: {//color: 各异,//标线主色，线色，symbol主色//borderColor: 随color,//标线symbol边框颜色，优先于color

borderWidth: 2, //标线symbol边框线宽，单位px，默认为2

label: {

show:false,//可选为 'start'|'end'|'left'|'right'|'top'|'bottom'

position: 'inside',

textStyle: {//默认使用全局文本样式，详见TEXTSTYLE

color: '#333'}

},

lineStyle: {//color: 随borderColor,//主色，线色，优先级高于borderColor和color//width: 随borderWidth,//优先于borderWidth

type: 'solid',

shadowColor :'rgba(0,0,0,0)', //默认透明

shadowBlur: 5,

shadowOffsetX:3,

shadowOffsetY:3}

},

emphasis: {//color: 各异

label: {

show:false

//position: 'inside'//'left'|'right'|'top'|'bottom'//textStyle: null//默认使用全局文本样式，详见TEXTSTYLE

},

lineStyle : {}

}

}

},

textStyle: {

decoration:'none',

fontFamily:'Arial, Verdana, sans-serif',

fontFamily2:'微软雅黑', //IE8- 字体模糊并且不支持不同字体混排，额外指定一份

fontSize: 12,

fontStyle:'normal',

fontWeight:'normal'},