初始化一个echarts,传入dom对象产生echarts的instance,不能在单个容器上初始化多个echarts实例。注意:实例容器一般是一个具有宽高的div元素,如果echarts获取不到宽高可能导致初始化失败。
var echartsInstance = echarts.init(document.getElementById('domId'))
echartsInstance.resize() //改变图表尺寸,在容器大小发生改变时需要手动调用。
echartsInstance.setOption({
xAxis:{
type:'category' 类目轴,适用于离散的类目数据。类目数据可自动从series.data或dataset.source中获取,或者通过xAxis.data设置类目数据。
'value' 数值轴,适用于连续数据。
'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,会根据跨度的范围来决定使用月、星期、日还是小时范围的刻度。
'log' 对数轴,适用于对数数据。
name:
nameLocation:'start','middle','center','end'
nameGap:10 //坐标轴名称与轴线之间的距离
nameRotate:90 //坐标轴名字旋转,角度值
boundaryGap:类目轴:'true','false', //默认为true,此时刻度只是作为分隔线,标签和数据点都在两个刻度之间的带(band)中间
axisTick:{
alignWithLabel:true //类目轴中当boundaryGap为true时有效,使刻度线和标签对齐
},
nameTextStyle:{
align:'left','center','right', //文字水平对齐方式
verticalAlign:'top','middle','bottom', //文字垂直对齐方式
lineHeight:50, //行高
padding:
width:
overflow:'none', //文字超出宽度是否截断或换行,配置width时有效
'truncate', //截断,并在末尾显示ellipsis配置的文本,默认为...
'break', //换行
'breakAll' //换行,与break不同,在英语中,会强制单词内换行
height:
lineOverflow:'truncate'
}
min:20,'dataMin',function(param)//刻度最小值,'dataMin'取数据在该轴上的最小值作为最小刻度
max: //刻度最大值,其值同min
scale:true //只在数值轴中有效,是否脱离0值比例,true不会强制包含零刻度,设置min和max后无效
splitNumber:5 //坐标轴的分割段数,在类目轴中无效
logBase:10 //只在对数轴(type:'log')中有效
axisLine:{
show:'true','false' //是否显示坐标轴轴线
symbol:'none',['none', 'arrow'] //轴线两边的箭头
symbolSize:[10, 15] //轴线两边的箭头大小
},
data:类目数据,在类目轴中有效。
如果没有设置type,但是设置了axis.data,则认为type是'category'。
如果没有设置axis.data,则axis.data的内容从series.data中获取。注意:axis.data指明的是'category'轴的取值范围。如果不指定而从series.data中获取,那么只能取到series.data中出现的值。假如series.data为空,就什么也获取不到。
axisPointer:{
triggerTooltip:true,//是否触发tooltip
}
}
})
echarts实例.setOption对X坐标轴的设置
于 2021-07-20 17:52:04 首次发布