echarts图表配置参数

1.坐标轴两边留白

 xAxis: {
  boundaryGap: false, //坐标轴两边留白
 }

boundaryGap为false图表内容紧临坐标轴，为true时坐标轴与图表之前有空白

2.x轴刻度标签显示不完全

·设置标签与坐标轴的显示间隔与旋转角度

axisLabel: {
  interval:0,
  rotate:40
}

·设置标签换行

让标签按分隔符显示

axisLabel: {
  formatter: function(value) {
    return value.split('').join('\n') //将标签竖排显示，将字符串中每个字符都用回车分隔开
  }
}

3.y轴刻度标识显示不全

y轴刻度显示不全，调整图表大小和外边盒子大小都不起作用
在此要通过属性实现，有两个方法

·grid绘图区调整

grid为直角坐标系内绘图网格，可以在网格上绘制图表
可通过设置grid组件的 top、bottom、left、right 等属性来设置grid组件距离窗口上下左右的距离
通过 width height 等设置组件宽高

grid: {}
  left: 50
}

也可通过x y属性来设置留白位置

grid: {
  x: 60, //左留白
  y: 80, // 上留白
  x2: 12, // 右留白
  y2: 15  // 下留白
}

·刻度标签与轴线之前的距离

axisLabel.margin 刻度标签与轴线之前的距离

yAixs: {
  axisLabel: {
    margin: 50
  }
}

axisLabel属性为x y轴坐标轴刻度标签的相关设置(xAxis.axisLabel / yAxis.axisLabel)

*axisLabel常用属性

. axisLabel.show 是否显示刻度标签

. axisLabel.interval 坐标轴刻度标签的显示间隔

. axisLabel.inside 刻度标签是否朝内，默认朝外

. axisLabel.rotate 刻度标签旋转的角度，在标签显示不下的时候可对标签进行旋转防止重叠

. axisLabel.formatter 刻度标签的内容格式器

. axisLabel.color(fontize/fontStyle/align/lineHeight/backgroundColor) 刻度标签常用css样式设置

4.图表区域线条颜色等

·areaStyle 区域填充颜色

·lineStyle 线条颜色

·itemStyle 折线点颜色

series: [{
  // 折线区域颜色
  areaStyle: { color: '#0c229f45'},
  // 折线线条颜色
  lineStyle: { color: '#0c229f45'},
  // 折线点颜色（散点图颜色描边等样式）
  itemStyle: { color: '#0c229f45'}
}]

5.图表上文本标签设置 label.normal

series: [{
  label: {
    normal: {
      show: true, // 是否显示
      position: top, //值还可以是(/left/right/inside/insideTop，[50%, 50%]相对图形左上角的位置)
      distance: 30，// 当positon值为'top'等有效
      rotate: 30, // 旋转角度
      offset: true, //文字偏移量
      formatter:  function(val) {
        var strs = val.name.split('') //字符串数组
        var str = ''
        for(var i = 0, s; s = strs[i++];) { //遍历字符串数组
          str += s
          if(!(i % 4)) str += '\n' //按需要求余
          }
        return `${str}: ${val.value}%`
      },//文本格式设置
      color: red // (fontSize, fontStyle, fontWeight等css常用属性)
    }
  }
}]

6.图表上图表的高亮样式label.emphasis

series: [
  label: {
    normal: {},
    emphasis: {
      show: true, //是否有高亮效果
      textStyle: {
        fontWeight: 'bold'
      }
    }
  }
]

7.标签的视觉引导线样式

series: [
  labelLine: {
    normal: {
      show: true, // 是否显示
      length: 30, // 第一段线长度
      length2: 40, // 第二段线长度
      smooth: false, // 是否平滑视觉引导线，也可以是表示平滑程度的数值 
      lineStyle: {
        color: 'red', // 线的颜色
        width: 3, // 线的宽度
        type: 'solid' // 线的类型
      },
      emphasis: {
        show: true,
        lineStyle: {
        }
      } // 高亮状态下引导线的样式
    }
  }
]

8.横向柱形图显示不同类别所占整体百分比

横向柱形图实现思路为将每个类别名称设置为y轴，然后将x轴隐藏

显示所占百分比思路为设置两个数据区域，然后让两个数据区域重叠，其中一个将数据都设置成100,另一个就设置自己所占百分比就行了

xAxis: {
  show: false, //将x轴隐藏
  type: 'value',
  boundaryGap: [0, 0], //坐标轴两边留白策略,即图形在坐标轴内距离坐标轴线的边距,在未设置min和max值时,[0,0]表示两边不留白,图表紧挨坐标轴线,[0.3, 0.8]即表示图表距离轴线有留白
  //min: 1000000 当设置min值是坐标轴起点的数值,如果Min值小于数据中的最小值,则图形会到坐标轴左侧显示,设置的boundrayGap: [x, y]中的x值无效,坐标轴刻度按max值和数据值来设定
  //max: 2000000 当设置max值是坐标轴终点的数值,设置的boundrayGap: [x, y]中的y值无效
}

yAxis: {
  axisLine: {
    show: false
  }, // y轴坐标轴线隐藏,注意不是y轴隐藏,我们还要显示文字的
  axisTick: [{
    show: false
  }] // y轴坐标轴刻度隐藏
}

// 设置两个数据区域
series: [
  {
    type: 'bar',
    data: [2.3, 64.2, 73.2, 63.4, 63.4]，
    tooltip: { show: false},
    barMinHeight: 30, //最小柱高
    barWidth: 10, // 柱宽度
    barMaxWidth: // 最大柱宽度
    z: 10, // 控制图表前后顺序
    itemStyle: { // 柱子样式
      normal: {
        color: '#ff6600', // 柱状图颜色
        label: {
          show: true, // 显示文本
          position: 'top', // 数据值位置
          formatter: '{c}%',
          textStyle: {
            color: '#000'
          }
        }
      }
    }
  },
  {
    type: 'bar',
    data: [100, 100, 100, 100, 100],
    tooltip: { show: false},
    barMinHeight: 30,
    barWidth: 10,
    barMaxWidth: 100,
    barGap: '-100%', // 两个柱子之间的距离，如果要重叠设置为-100%
    itemStyle: {
      normal: {
        color: '#ccc', // 柱子颜色，作为底层背景
        label: {
          show: false,
          position: 'top',
          testStyle: {
            color: '#000'
          }
        }
      }
    }
  }
]

关于boundrayGap的含义

名称              默认值      适用类型        描述
{Array}          [0, 0]      数值型          坐标轴两端空白策略，数组内数值代表百分比，
boundaryGap                  时间型          [原始数据最小值与最终最小值之间的差额，原始数据最大值与最终最大值之间的差额]

所以，这个值，应该是针对你的数据范围来说的。
比如，你数据是范围是0-120（最小值0，最大值120）
那么，[0.5, 1]就表示，在最小值下方扩展50%的空间，在最大值上方扩展100%空间
也就是范围是[0 - 50% * (120 - 0), 120 + 100% * (120 - 0)]
即y轴最小坐标为-60，最大坐标为240（大概是这个值，我测试的值是（-50， 250）,在此应该是根据echarts根据数值自动分隔坐标轴刻度决定的）。