echarts图表x，y轴的设置

        每到用echarts这门技术去画图的时候，我们大多人都是直接从echarts的官网的案例找相应的案例直接把代码复制到开发软件上基本随便一改就能使用，但是这种情况基本都是在练习的时候和项目开发没有必须要求的才能这样使用，但是在那种要求比较严格的项目开发，需要做echats图而且必须和UI设计图的颜色，字体大小等等一些样式必须一样，那种情况下基本官网上的案例基本上已经不能满足你了，这个时候如果是个对echarts这个插件特别熟悉的用的比较多，那么一些样式和一些属性肯定很熟悉了，根本不需要在echarts在线文档在找相应的属性在去设置，但是也有一种人存在就是比如我这样的，因为用echarts这插件用的时间不是很长，用的不是很熟练，但是在项目开发中要求比较严格，好多从官网上拿的案例跟UI设置图有不小的差距，而且不是很美观，这时候我就需要在echarts在线文档找属性，在网上搜，但是在个过程中大多人都是比较痛苦的因为你不知道具体是什么属性，而且对echarts这插件还处在比较懵懂的阶段搜关键词都不知道具体怎么去搜，或者知道怎么去搜，但是搜到后会出现好多不同网页，而那些网页内容有不少是不一样，里面有好多不同的属性，而那些属性你根本不知道那些是想要的，你就会一个一个拿去试，但是这个时候又会出现一个问题，有些属性给你了但是你不会用啊，不知道怎么去设置才能给你写代码兼容，导致就算找的想要的属性也不会用，而我当初就是一个用echarts比较小白的新人，所以为了避免以后再用echarts画图的时候找不到想要属性和设置方法我就把我做项目的时候一些echarts图的设置写了下来，如果对你有帮助，我深感荣幸，如果没有帮助，那么打扰了出门左拐。

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轴的方式是一样，就是设置的属性会有所差异

 1 yAxis:[{
 2     min:0, //y轴的最小值
 3     max:100, //y轴最大值 
 4     interval:20, //值之间的间隔
 5     //上面的三个值可以根据自己需求随意设置 不设置时会根据图中的值自动生成相应的值
 6    
 7    type:'value',
 8   /* type坐标轴类型:[ default: 'value' ]
　　　　可选：1.'value' 数值轴，适用于连续数据。
　　　　2.'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
       3.'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
       4.'log' 对数轴。适用于对数数据。*/
 9     splitLine:{show:false}, //去除网状线 默认为true
10     //用于设置y轴的字体
11     axisLabel:{
12             show:true,  //这里的show用于设置是否显示y轴下的字体 默认为true
13             textStyle:{   //textStyle里面写y轴下的字体的样式
14                color:'#333',
15                fontSize:13
16             }
17        },
18      //用于设置y轴的那一条线
19     axisLine:{
20            show:true,  //这里的show用于设置是否显示y轴那一条线 默认为true
21            lineStyle:{ //lineStyle里面写y轴那一条线的样式
22              color:'#6FC6F3',
23              width:2,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
24            }
25        }
26 }]

 

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