echarts 相关属性介绍

 

title: {//图表标题

    x: 'left', //组件离容器左侧的距离，left的值可以是像20，这样的具体像素值，

　　　　　　　　　　可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。                   

    y: 'top',// grid 组件离容器上侧的距离，可以使像素值，也可以为百分比，可选为：'top' ¦ 'bottom' ¦ 'center'

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

    borderWidth: 0,// 标题的边框线宽，默认为0

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

     borderRadius，//圆角半径，单位px，支持传入数组分别指定4 个圆角半径,  

　　　　　　　　　　　borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）  

　　　　　　　　　　　borderRadius: 5, // 统一设置四个角的圆角大小

 

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

    textStyle: {

        fontSize: 18,//主标题文字的字体大小

        fontWeight: 'bolder',//主标题文字字体的粗细,可以是'normal'，'bold'，'bolder'，'lighter'

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

　　　　　　　　align:"left"//  文字水平对齐方式，默认自动

    },

    subtextStyle: {//副标题相关属性设置

        color: '#ccc',// 副标题文字颜色

　　　　　　　　fontSize:18 , //副标题文字的字体大小


    }

},

 

xAxis:{//直角坐标系 grid 中的 x 轴

　　　　type:"category" ,//坐标轴类型。

　　　　name:"天", //坐标轴名称。k可选：value、category、time、log（对数轴）

　　　　nameLocation: 'end' , //坐标轴名称的文字样式。可选为：start、middle、center、end

     nameTextStyle:{//坐标轴名称的文字样式。

　　　　　　　color："#ccc",  //坐标轴名称的颜色，默认取 axisLine.lineStyle.color。

　　　　　　verticalAlign:"top"，　//文字垂直对齐方式，默认自动。可选为：top、middle、bottom

　　　　

　　　　backgroundColor: {//文字块背景色。可以是直接的颜色值,可以支持使用图片,例如：
   　　　　 image: 'xxx/xxx.png'
   　　　　 // 这里可以是图片的 URL，
   　　　　 // 或者图片的 dataURI，
   　　　　 // 或者 HTMLImageElement 对象，
   　　　　 // 或者 HTMLCanvasElement 对象。
　　}，
　　borderWidth："0",//文字块边框宽度。,默认为哦
　　shadowColor：  'transparent' ，文字块的背景阴影颜色。[ default: 'transparent' ]

　 　axisLine：{//坐标轴轴线相关设置。

　　　　　show:false,　//是否显示坐标轴轴线，默认为为true 

　　　　　color:"#ccc" //x或y轴轴线的颜色

　　　　},

　　splitLine:{//坐标轴网格线

　　　　show:false//分割线是否显示，默认为true

　　　　lineStyle:{

　　　　　　　　color:"#fff" //分隔线颜色，可以设置成单个颜色。

　　　　　　　　width:"1"  //宽度 默认为1

　　　　　　}

 

　　}, 

axisLabel:{//坐标轴文本相关属性设置

　　　　show: true,
　　　　textStyle: {//
　　　　　　color: '#a1afc8'
　　　　}

　　},

　　tooltip:{//提示框组件

　　　　show:true，//是否显示提示框组件，包括提示框浮层和 axisPointer。

　　　　trigger:"item" //触发类型，item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。

　　　　　　　　　　　　axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

　　　　axisPointer：{//坐标轴指示器配置项。

　　　　　　riggerOn:"click" //提示框触发的条件，可选：mousemove、click、mousemove|click、none

　　　　}

　　}，

　　dataZoom：{　　　　　　　　//组件 用于区域缩放

　　　　type: 'inside',

　　　　disabled: false,　　//是否停止组件的功能。

　　},                                

}