echarts图表x,y轴的设置

xAxis属性代表echarts图表的x轴设置代码如下:

xAxis : [
    {
      type : 'category',   
     // type:坐标轴类型。
     // [ default: 'category' ]
     /*可选:1.'value' 数值轴,适用于连续数据;     
       2.'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据;
       3.'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度;
       4.'log' 对数轴。适用于对数数据。
*/ data : ['上海','北京'], //x轴下面的数据 axisTick: { show: false, //是否显示网状线 默认为true alignWithLabel: true }, //用于设置x下面的字体 axisLabel:{ show:true, //这里的show用于设置是否显示x轴下的字体 默认为true       
       interval:0, //可以设置成 0 强制显示所有标签。如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。         
       textStyle:{ //textStyle里面写x轴下的字体的样式
         color:'#333',
fontSize:13 } }, axisLine:{ show:true, //这里的show用于设置是否显示x轴那一条线 默认为true lineStyle:{ //lineStyle里面写x轴那一条线的样式 color:'#6FC6F3', width:2, //轴线的粗细 我写的是2 最小为0,值为0的时候线隐藏 } } }, ]

yAxis属性代表echarts图表的y轴,样式设置方式与x轴的方式是一样,就是设置的属性会有所差异:

yAxis:[{
    min:0, //y轴的最小值
    max:100, //y轴最大值
    interval:20, //值之间的间隔
    //上面的三个值可以根据自己需求随意设置 不设置时会根据图中的值自动生成相应的值

   type:'value',
  /* type坐标轴类型:[ default: 'value' ]    
  可选:1.'value' 数值轴,适用于连续数据。    
     2.'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
     3.'time' 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。
     4.'log' 对数轴。适用于对数数据。
*/ splitLine:{show:false}, //去除网状线 默认为true //用于设置y轴的字体 axisLabel:{ show:true, //这里的show用于设置是否显示y轴下的字体 默认为true textStyle:{ //textStyle里面写y轴下的字体的样式 color:'#333', fontSize:13 } }, //用于设置y轴的那一条线 axisLine:{ show:true, //这里的show用于设置是否显示y轴那一条线 默认为true lineStyle:{ //lineStyle里面写y轴那一条线的样式 color:'#6FC6F3', width:2, //轴线的粗细 我写的是2 最小为0,值为0的时候线隐藏 } } }]

 实操时,遇到的问题:

 "dataDefinition": {
        "axisColumn": "AXIS",
        "abbrevAXIS": "abbrevAXIS",
        "tooltipRoll": false,
        "series": [
          {
            "name": "疑点数",
            "valueColumn": "VALUE1",
            "unit": "个",
            "color": "blue",
            "type": 1  //type为0,表示柱状图;type为1,表示折线图
          }
        ]
      },
      "newOption": {
        "yAxis": [
          { //柱状图的y轴属性设置
            "show": false,
            "name": "个",
            "splitLine": {
              "show": true
            }
          },
          { //折线图的y轴属性设置
            "name": "个",
            "show": true,
            "splitLine": {
              "show": true
            },
            "position": "left"  //默认:折线图的y坐标轴默认为right,柱状图的y坐标轴默认为left。
         //此时,需求为折线图,问题:左边的坐标轴数据不显示。解决方案:将position值设置为left
          }
        ],
        "xAxis": [
          {
            "axisLabel": {
              "interval": 0,
              "margin": 6,
              "color": "#939AA6"
            }
          }
        ],
        "legend": {
          "show": true,
          "top": "bottom",
          "left": "center",
          "textStyle": {
            "color": "#fff"
          },
          "data": [
            {
              "name": "疑点数",
              "icon": "line"
            }
          ]
        }
      }        

 如下图:

 

posted on 2021-07-19 17:07  浅浅笑,轻轻谈  阅读(6807)  评论(0)    收藏  举报