直角坐标系的常用配置

直角坐标系的常用配置

直角坐标系图表：柱状图 折线图 散点图

配置1：网格 grid

显示grid

   grid:{
       show:true,
       borderWidth:10,
       borderColor:'red',
       left:20,
       top:20,
       width:300,
       height:150
   },

配置2：坐标轴 axis

• 坐标轴类型type

valule：数值轴，自动会从目标数据中读取数据

category：类目轴，该类型必须通过data设置类目数据

• 显示位置 position

xAxis：可取值为top或者bottom

yAxis：可取值为left或者right

           xAxis:{
               type:'category',//类目轴
               data:['小明','小红','小王'],
               position:'top'
           },
           yAxis:{
               type:'value',//数值轴
               position:'right'
           },

配置3：区域缩放

1、dataZoom

用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有

dataZoom是一个数组，意味着可以配置多个区域缩放器

类型type

指明产生作用的轴

指明初始状态的缩放情况

 dataZoom:[{
       type:'slider' , //slider滑块 inside鼠标滚轮
        xAxisIndex:0  //指第0个x轴

   },
   
   {
    type:'slider' , //slider滑块 inside鼠标滚轮
        yAxisIndex:0  ,//指第0个x轴
     start:0,
     end:50
   }
   
   ],

x和y轴就会出现一个可以控制缩放的滑块

配置4：标题title

    title:{
    text:'成绩展示',
    link:'https://www.baidu.com',
     textStyle:{
     color:'red'
    },
    borderWidth:5,
    borderColor:'blue',//默认为灰色
    borderRadius:5,//圆角
    left:50,
    top:10,
},

文字信息的显示：

tooltip:{
trigger:'axis',//item,axis,
triggerOn:'click',//触发方式是点击
},