eCharts中的formatter的自定义方式

86 阅读1分钟

formatter中的aName、upName、等等前缀

formatter: function (item) {
  let res = ''
  let isSign = Math.sign(item.data.percent)
  if (item.data.nodeName === '现卖' || item.data.nodeName === '外卖') {
    res = `{aName| ${item.data.nodeName} :}{aValue|${item.data.val}${item.data.unit}}\n{salePercent|同比 :}`
  } else {
    res = `{bName| ${item.data.nodeName} :}{aValue|${item.data.val}${item.data.unit}}\n{percentName|同比 :}`
  }
  if (isSign === 1) {
    res += `{upName|${item.data.percent}%  ↑}`
  } else {
    res += `{downName|${item.data.percent}%  ↓}`
  }
  return res
}

是为了在rich里使用时可以直接用名字自定义

rich: {
  aName: {
    color: '#fff',
    fontSize: 16,
    align: 'left',
    padding: [0, 0, 0, -100]
  },
  aValue: {
    color: '#0BD3FE',
    fontSize: 18,
    align: 'center',
  },
  bName: {
    color: '#fff',
    fontSize: 16,
    align: 'left',
  },
  percentName: {
    color: '#fff',
    fontSize: 16,
    align: 'left',
    padding: [0, 0, 0, 5]
  },
  salePercent: {
    color: '#fff',
    fontSize: 16,
    align: 'left',
    padding: [0, 0, 0, -95]
  },
  upName: {
    color: '#0BD3FE',
    fontSize: 16,
    align: 'left',
  },
  downName: {
    color: '#DF0E03',
    fontSize: 16,
    align: 'left',
  },
}