文章目录
官方配置项文档
配置
color颜色
color:['pink','blue','white','black','green'] //颜色盘,循环
grid网格配置
直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图(气泡图)
borderColor:'#ccc' //坐标系边框颜色
backgroundColor:'transparent' //网格背景颜色,默认为透明
containLabel:true //是否显示刻度标签
//false 决定的是由坐标轴形成的矩形的尺寸和位置
//true 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置
left:10% //left,right,top,bottom ,grid 组件离容器左右上下的距离
show:true //是否显示直角坐标系边框
legend图例组件
data:[] //图例的数据数组。数组项通常为一个字符串,每一项代表一个系列 //的name,如果 data 没有被指定,会自动从当前系列中获取。
textStyle:{
color:'#fff',
fontStyle,fontWeight,fontFamily,fontSize //设置字体风格,粗细,系列,大小
backgroundColor:'#xxx', //文字块背景色
}
itemGap:5, //图例每项之间的间隔
itemWidth,itemHeight //图例标记的图形宽度,高度
series系列
决定显示哪种类型的图表
line折线图
{
type:line, //折线图
name:'xxx', //系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列
stack:'xxx', //数据堆叠,同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加。
data:[], //数据
smooth:true, //是否平滑的显示
areaStyle:{
color:'', //填充色
},
symbol: 'circle' //标记的图形'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
}
bar柱状图
{
type:bar,
itemStyle:{
borderRadius:15, //圆角半径,单位px,支持传入数组分别指定 4 个圆角半径。borderRadius: [5, 5, 0, 0] //(顺时针左上,右上,右下,左下)}
}
pie饼形图
{
type:'pie',
radius:[0,75%], //饼图的半径(内圈半径,外圈半径)
}
title图标标题
show:true, //是否显示标题组件
link:'', //文本超链接
tooltip提示框
trigger:'axis' , //触发方式
//'item'
//数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。
//'axis'
//坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
//'none'
//什么都不触发。
axisPointer:{ //坐标轴指示器配置项
type:'line', //'line' 直线指示器,'shadow' 阴影指示器,'none' 无指示器,'cross' 十字准星指示器。
axis:'x', //指定坐标轴,(auto)默认取类目轴或者时间轴
}
toolbox工具箱组件
xAxis(X轴)、yAxis(y轴)
axisLabel :{
show:true, //是否显示刻度标签
fontSize:16, //标签字体大小
(更多见官方文档)
}
axisline:{
show:true, //是否显示坐标轴轴线
(更多见官方文档)
}
boundaryGap : true //坐标轴两边留白策略
boundaryGap:true //坐标轴两边留白策略,刻度只是作为分隔线
//类目轴:标签和数据点都会在两个刻度之间的带(band)中间
//非类目轴:boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效
inverse:false //是否是反向坐标轴
position :'bottom' //x 轴的位置。'top','bottom'(默认),
// 第二个x 轴视第一个 x 轴的位置放在另一侧
show : true //是否显示 x 轴。
type : 'category' //坐标轴类型。'value' 数值轴'category'
//类目轴'time' 时间轴'log' 对数轴
name : 'bug缠身' //坐标轴名称。
nameLocation : 'end' //坐标轴名称显示位置。
nameTextStyle //坐标轴名称的文字样式。
//所有属性{ color , fontStyle , fontWeight , fontFamily , fontSize , align , verticalAlign , lineHeight , backgroundColor , borderColor , borderWidth , borderType , borderDashOffset , borderRadius , padding , shadowColor , shadowBlur , shadowOffsetX , shadowOffsetY , width , height , textBorderColor , textBorderWidth , textBorderType , textBorderDashOffset , textShadowColor , textShadowBlur , textShadowOffsetX , textShadowOffsetY , overflow , ellipsis , lineOverflow , rich }
nameGap : 15 //坐标轴名称与轴线之间的距离。
nameRotate : 0 //坐标轴名字旋转,角度值(逆时针)
splitLine:{
show:true, //是否显示分割线
lineStyle:{
color:'#xxx', //分割线颜色
}
}