echarts里面的参数解释_echarts 中 参数的详讲

xAxis 属性

xAxis : [

{

type : 'category',//坐标轴类型

// show:'',//是否显示 x 轴

//id:'',组件 ID。默认不指定。

//gridIndex :'',x 轴所在的 grid 的索引，默认位于第一个 grid

ogridIndex :'',//ffset:'',//X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用

position:'bottom',//x 轴的位置

data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

name:'中国',//坐标轴名称

nameLocation:'middle',//坐标轴名称显示位置

nameTextStyle:{

//坐标轴名称的文字样式

color:'yellow',//坐标轴名称的颜色

fontStyle:'oblique',//坐标轴名称文字字体的风格

fontWeight:'bold',//坐标轴名称文字字体的粗细

fontFamily:'Arial',//坐标轴名称文字的字体系列

fontSize:'16',//坐标轴名称文字的字体大小

align:'center',//文字水平对齐方式

textVerticalAlign:'bottom',//文字垂直对齐方式

lineHeight:'20',//行高

backgroundColor:'#9999',//文字块背景色

borderColor:'blue',//文字块边框颜色

borderWidth:'20',//文字块边框宽度

barBorderRadius:'',//文字块的圆角

shadowColor:'green',//文字块的背景阴影颜色

shadowBlur:'19',//文字块的背景阴影长度

shadowOffsetX:'5',//文字块的背景阴影 X 偏移

shadowOffsetY:'15',//文字块的背景阴影 Y 偏移

width:'50',//文字块的宽度

height:'70',//文字块的高度

textareaBorderColor:'white',//文字本身的描边颜色

textShadowColor:'#7777',//文字本身的阴影颜色

textShadowBlur:'#1111',//文字本身的阴影长度

textShadowOffsetX:'20',//文字本身的阴影 X 偏移

textShadowOffsetY:'25',//文字本身的阴影 Y 偏移

label:{

/* rich:{//自定义富文本样式

a: {

color: 'red',

lineHeight: 10

}

}*/

}

},

nameGap :'20',//坐标轴名称与轴线之间的距离

nameRotate:'20',//坐标轴名字旋转，角度值

inverse :'false',//是否是反向坐标轴

boundaryGap: ['20%', '20%'],//坐标轴两边留白策略

min :'12',//坐标轴刻度最小值

max :'12',//坐标轴刻度最大值

scale :'false',//只在数值轴中(type: 'value')有效

splitNumber:'3',//坐标轴的分割段数

minInterval :'12',//自动计算的坐标轴最小间隔大小

maxInterval:'12',//自动计算的坐标轴最大间隔大小

interval :'',//强制设置坐标轴分割间隔

logBase :'',//对数轴的底数

silent :'',//坐标轴的标签是否响应和触发鼠标事件，默认不响应

axisLine :{

//坐标轴轴线相关设置

show:' ',//是否显示坐标轴轴线

onZero:' ',//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度

onZeroAxisIndex:'12',//当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上

symbol:'arrow',//轴线两边的箭头

symbolSize:[19, 15] ,//轴线两边的箭头的大小，第一个数字表示宽度(垂直坐标轴方向)，第二个数字表示高度(平行坐标轴方向)

symbolOffset:[12,23],//轴线两边的箭头的偏移

lineStyle:{

color:"#555",//坐标轴线线的颜色

width:'2',//坐标轴线线宽

type:'dashed',//坐标轴线线的类型

shadowBlur:'12',//图形阴影的模糊大小

shadowColor:'red',//阴影颜色

shadowOffsetX:'12',//阴影水平方向上的偏移距离

shadowOffsetY:'6',//阴影垂直方向上的偏移距离

opacity:'6'//图形透明度

}

},

axisTick :{

//坐标轴刻度相关设置

show:'teue',//是否显示坐标轴刻度

alignWithLabel:'ture',//保证刻度线和标签对齐

interval:'',//坐标轴刻度的显示间隔

//inside:'false',//坐标轴刻度是否朝内，默认朝外

length:'7',//坐标轴刻度的长度

lineStyle:{

color:'red',// 刻度线的颜色

width:'2',//坐标轴刻度线宽

type:'solid',//坐标轴刻度线的类型

shadowBlur:'2',//图形阴影的模糊大小

shadowColor:'blue',//阴影颜色

shadowOffsetX:'1',//阴影水平方向上的偏移距离

shadowOffsetY:'1',//阴影垂直方向上的偏移距离

opacity:'2',//图形透明度

}

} ,

axisLabel :{

//坐标轴刻度标签的相关设置

show:'true ',//是否显示刻度标签

interval:'auto',//坐标轴刻度标签的显示间隔，在类目轴中有效

// inside:'false ',//刻度标签是否朝内，默认朝外

rotate:'23',//刻度标签旋转的角度

margin:'19',//刻度标签与轴线之间的距离

///formatter刻度标签的内容格式器

showMinLabel:'null',//是否显示最小 tick 的 label

showMaxLabel:'null',//是否显示最大 tick 的 label

color:'red',//刻度标签文字的颜色

fontStyle:'italic',//文字字体的风格

fontWeight:'bold',//文字字体的粗细

fontFamily:'Microsoft YaHei',//文字的字体系列

fontSize:'14',//文字的字体大小

align:'center',//文字水平对齐方式

verticalAlign:'center',//文字垂直对齐方式

lineHeight:'23',//行高

backgroundColor:'#9999',//文字块背景色

borderColor:'#fff',//文字块边框颜色

borderWidth:'12',//文字块边框宽度

borderRadius:'21',//文字块的圆角

padding:[3, 4, 5, 6],//文字块的内边距

shadowColor:'blue',//文字块的背景阴影颜色

shadowBlur:'5',//文字块的背景阴影长度

shadowOffsetX:'3',//文字块的背景阴影 X 偏移

shadowOffsetY:'3',//文字块的背景阴影 Y 偏移

width:'12',//文字块的宽度

height:'12',//文字块的高度。一般不用指定，不指定则自动是文字的高度

},

}

],

legend属性：

//控制 legend 的位置和样式

legend:[{

bottom: 1,

left: "40%",

textStyle:{color: 'red'},

data:['2011年'],

},

{

bottom: 1,

left: "60%",

textStyle:{color: 'blue'},

data:['2012年'],

}, {

bottom: 1,

left: "80%",

textStyle:{color: 'blue'},

data:['2013年'],

},

],

grid属性：

//直角坐标系内绘图网格样式和位置

grid: {

left: '3%',

right: '4%',

bottom: '7%',

show :'true',

backgroundColor :'#9999',

containLabel: true

},

title属性：

//标题组件，包含主标题和副标题

title: {

text: '世界人口总量',

subtext :'bili ',

left :'center',

textStyle:{

color:'red'

},

subtextStyle :{

color:'blue'

}

},

tooltip属性

//提示框组件。

tooltip: {

trigger: 'item',

axisPointer: {

type: 'line',

lineStyle:{

width:'' ,

type:'dashed'

}

},

textStyle:{

color:'red'

}

},

toolbox属性

//工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

toolbox: {

feature: {

dataView: {show: true, readOnly: false},

magicType: {show: true, type: ['line', 'bar']},

restore: {show: true},

saveAsImage: {show: true}

}

},

series属性

series: [

{

//折线

name: '2011年',

type: 'line',

symbol :'triangle',

symbolRotate:'12',

symbolSize :'6',

showSymbol :'false',

itemStyle :{

//折线拐点标志的样式

borderColor:'blue',

borderWidth:'3'

},

lineStyle :{

//线条样式。

width:'5',

type :'dashed'

},

areaStyle :{

//区域填充样式

color:'yellow',

},

emphasis :{

//图形的高亮样式。

itemStyle:{

color:'white'

}

},

smooth :'true',

data: [13203, 53489, 21034, 104970, 131744, 830230]

},{

name: '2013年',

type: 'bar',

data: [65203, 23489, 29034, 10970, 131744, 330230]

},

{

name: '2012年',

type: 'bar',

data: [19325, 238838, 31000, 121594, 134141, 081807]

}

]