zoukankan      html  css  js  c++  java
  • echarts图表x,y轴的设置

    https://www.cnblogs.com/cjh-strive/p/11065005.html

    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',
    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',
    2, //轴线的粗细 我写的是2 最小为0,值为0的时候线隐藏
    }
    }
    }]

  • 相关阅读:
    python模块之sys与os
    Python模块之time、datetime
    一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
    js闭包
    js删除局部变量
    数据库 事务
    jQuery全屏滚动插件fullPage.js
    jdk环境变量
    MyEclipse优化设置(最详细版本)
    oracle查询性能优化
  • 原文地址:https://www.cnblogs.com/xzybk/p/12565120.html
Copyright © 2011-2022 走看看