ECharts 使用小结

[iiuhuy]

#ECharts 使用小结

01 标题垂直显示问题

需要做成的效果如下：

不是很复杂的问题，记录一下。

yAxis: [
  {
    type: 'value',
    min: 0,
    max: 48,
    interval: 12,
    name: '规\n模\n\n（亿）',
    scale: true,
    nameLocation: 'left',
    nameTextStyle: {
      fontSize: 14,
      padding: [0, 160, 0, 0],
    },
    axisLabel: {
      formatter: function (value, index) {
        return value.toFixed(2) + ' 亿'
      },
    },
  },
  {},
],

02 legend 与 xAxis 重叠错乱

通过配置 grid 留出空间：

grid: { x: '12%', y: '10%', x2: '4%', y2: '28%' },

03 图表背景显示分隔区域

splitArea: {
  show: true,
  areaStyle: {
    color: ['#fff', 'rgb(245, 245, 245)'],
  },
},

直接注释掉：

04 Echats 绘制双 Y 轴且两边刻度保持一致

yAxis: {
  $id: Y_AXIS_IDS.staffHold,
  name: '员\n工\n持\n有\n占\n比\n（%）',
  nameLocation: 'right',
  max: rightMax,
  min: rightMin,
  splitNumber: 5,
  interval: (rightMax - rightMin) / 5,
  nameTextStyle: {
    fontSize: 12,
    color: '#999999',
    fontFamily: 'Microsoft YaHei',
    fontStyle: 'normal',
    padding: onlyHasStaffHold ? [0, 160, 0, 0] : [0, 0, 0, 140],
  },
},