echartsgrid属性解析

一、echartsgrid属性及其概念

// 代码示例

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    itemStyle: {
      normal: {
        color: function(params) {
          // 颜色自定义
          var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
          '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
          '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
          ];
          return colorList[params.dataIndex];
        }
      }
    }
  }]

echartsgrid是echarts中的一种概念，它是echarts中一个二维直角坐标系，用户通过设置该属性来控制直角坐标系各个方面的展示。在默认情况下，echarts会自动根据图表的大小、轴标签的长度、轴线等因素来优化二维直角坐标系的大小及其位置。

二、echartsgrid属性的基础设置

基础设置包括echartsgrid的直角坐标系内边界边距、坐标系外边界边距、containLabel、轴线显示等等。

1.边距设置

echarts提供了四种边距的设置方式，分别是：left、right、top、bottom。通过这些属性可以控制直角坐标系左、右、上、下四个方向的边距大小。这里的数值设置可以是像素值也可以是百分比值。

// 代码示例
getOption() {
  return {
    title: {
      text: '某地区蒸发量和降水量'
    },
    tooltip: {},
    legend: {
      data: ['蒸发量', '降水量']
    },
    grid: {
      left: '3%', // 左边距，string类型
      right: '4%', // 右边距，string类型
      bottom: '3%', // 下边距，string类型
      containLabel: true // 包含轴标签文本等图形元素，默认为false
    },
    xAxis: {
      data: []
    },
    yAxis: {},
    series: [{
      name: '蒸发量',
      type: 'bar',
      data: []
    }, {
      name: '降水量',
      type: 'bar',
      data: []
    }]
  }
},

2.containLabel

在默认情况下，echarts会根据图表的大小、轴标签的长度、轴线等因素来优化二维直角坐标系的大小及其位置。但是在echarts中，轴标签的文本内容和轴线并不是二维直角坐标系中唯一的图形元素。如果用户需要让图表中所有内容全部展示在echartsgrid的范围内，那么可以设置属性containLabel为true，表示所有的图形元素都包含在直角坐标系内，即所有的标签、数值显示等都不会超出直角坐标系的范围。

// 代码示例
getOption() {
  return {
    title: {
      text: '某地区蒸发量和降水量'
    },
    tooltip: {},
    legend: {
      data: ['蒸发量', '降水量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true // 包含轴标签文本等图形元素，默认为false
    },
    xAxis: {
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    },
    yAxis: {},
    series: [{
      name: '蒸发量',
      type: 'bar',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    }, {
      name: '降水量',
      type: 'bar',
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    }]
  }
},

3.轴线显示

二维直角坐标系的轴线可以显示也可以隐藏，可以设置echartsgrid的属性如下：

// 代码示例
grid: {
  show: true // 是否显示坐标轴，默认为true
},

三、echartsgrid的高级设置

除了基础设置外，echartsgrid提供了一些高级设置供用户使用。这些高级设置包括：刻度的长度、互相影响的轴、只显示某个轴等。

1.刻度长度设置

在echarts中，坐标轴的刻度线有两段长度，一段为inside，即向内的长度，另一段为outside，即向外的长度。可以通过axisLine属性中同时设置lineStyle属性的属性，以控制刻度线的长度。

// 代码示例
xAxis: {
  axisLine: {
    lineStyle: {
      color: 'gray',
      width: 2,
      type: 'solid'
    }
  },
  axisTick: {
    alignWithLabel: true
  }
},
yAxis: {
  axisLine: {
    lineStyle: {
      color: 'gray',
      width: 2,
      type: 'solid'
    }
  }
}

2.互相影响的轴

在某些情况下，某些轴的取值范围会受到其他轴的取值范围的影响，比如同时展现两个柱状图，一个展示公司产值，一个展示员工人数。如果这两张图形的横坐标轴都是月份，那么两张图形展示的月份应该一致，否则月份不一致会带来很大的误差和困扰。解决这个问题有两种方法：

方法一：使用dataZoom组件。dataZoom组件可以用来区域缩放。

// 代码示例
dataZoom: {
  xAxis: {
    type: 'inside'
  },
  yAxis: {
    type: 'inside'
  }
},

方法二：使用visualMap组件。visualMap组件包含了一个或多个大小不一的组件来视觉表示数据范围，可以通过设定position属性显示在不同位置。

// 代码示例
visualMap: {
  type: 'continuous',
  dimension: 0,
  seriesIndex: 0,
  min: 0,
  max: 1000,
  color: ['#FF4444', '#44FFB2'],
  bottom: 20,
  left: 10
}

3.只显示某个轴

在某些情况下，仅需要显示某个轴，可以通过axisLabel和axisTick的设置来仅显示某个轴。

// 代码示例
xAxis: {
  axisLine: {
    show: false
  },
  axisTick: {
    show: false
  },
  axisLabel: {
    show: true
  }
},

四、总结

在echarts中，echartsgrid是非常重要的一个概念，通过对echartsgrid的设置，可以完全控制图表的展示效果，从直角坐标系的大小及其位置到轴标签的格式和刻度的长度等等内容都可以进行设置和调整。以上就是echartsgrid属性的详细介绍，希望对大家有所帮助。

原创文章，作者：CHBHA，如若转载，请注明出处：https://www.506064.com/n/317104.html