【BizCharts】可视化图表使用（2）——面积图/Area

效果图

• 官方事例
  
• 我的实现
  
• tooltip
  

描述

• 坐标轴文字颜色
• 坐标轴线宽度、颜色
• 面积区域颜色
• 图例样式
• 去除网格线

数据处理

• 源数据和目标数据

// 数据源
const data = [{
  month: 'Jan',
  Tokyo: 7,
  London: 3.9,
  Beijing: 8.8,
},
{
  month: 'Feb',
  Tokyo: 13,
  London: 4.2,
  Beijing: 2.5,
},
{
  month: 'Mar',
  Tokyo: 16.5,
  London: 5.7,
  Beijing: 12.5,
},
{
  month: 'Apr',
  Tokyo: 14.5,
  London: 8.5,
  Beijing: 25,
},
{
  month: 'May',
  Tokyo: 10,
  London: 11.9,
  Beijing: 11,
},
{
  month: 'Jun',
  Tokyo: 7.5,
  London: 15.2,
  Beijing: 5,
}];

// 目标数据
data = [{
	month: "Jan",
	city: "Tokyo",
	value: 7
},
{
	month: "Jan",
	city: "London",
	value: 3.9
},
{
	month: "Feb",
	city: "Tokyo",
	value: 13
},
{
	month: "Feb",
	city: "London",
	value: 4.2
},...]; // 此处省略一些

• 使用Bizchart的dataset来进行转换，如果已经是目标格式可以不用转换

const dv = new ds.View();
const transformData = dv.source(data)
  .transform({
    type: 'fold',
    fields: ['Tokyo', 'London'],
    key: 'city',
    value: 'value',
  })

• 设置每个city对应的颜色和文字，用于图线的颜色，图例/tooltip的颜色、文字。

const fieldMap = {
  London: {
    theme: '#3a8fff',
    legendText: '伦敦温度',
  },
  Tokyo: {
    theme: '#6fdfe1',
    legendText: '东京温度',
  },
  Beijing: {
    theme: '#ff6200',
    legendText: '北京温度',
  }
};

实现

• 横坐标纵坐标颜色、字体、角度，配置Axis属性label

 <Axis label={{
   rotate: 120, // 如果坐标轴的文字想要旋转可以添加，图中未添加
   style: {
     fill: '#6fdfe1',
     fontSize: 10,
   }
 }} />

• 坐标轴线宽度、颜色，配置Axis属性line

<Axis line={{
  style: {
    lineWidth: 2,
    stroke: '#6fdfe1',
    fill: '#6fdfe1',
  }
}}/>

• 线与面积区域颜色

  <LineAdvance
    area
    position="month*value"
    color={['city', (city) => fieldMap[city].theme]}
    style={{
      lineWidth: '1',
    }}
  />

• toolTip样式

 <Tooltip
  shared
  showCrosshairs
  domStyles={{
    'g2-tooltip': {
      backgroundColor: 'rgba(0, 0, 0, 0.78)',
      color: '#fff',
      fontSize: 10,
    },
    'g2-tooltip-title': {
      textAlign: 'left',
    },
    'g2-tooltip-list': {
      textAlign: 'left',
    },
    'g2-tooltip-list-item': {
      lineHeight: 0.6,
    },
  }}
/>

• tooltip内容

<LineAdvance
 tooltip={[`city*value*month`, (city, value, title) => ({
   title,
   name: fieldMap[city].legendText,
   value,
 })]}
/>

• 图例

<Legend
  position="top-right"
  itemSpacing={8} // 每一项的距离
  itemName={{
    style: {
      textAlign: 'start', // 文本对齐方向，可取值为： start middle end
      fill: '#fff', // 文本的颜色
      fontSize: 10, // 文本大小
    },
    formatter: (city) => fieldMap[city].legendText,
  }}
  marker={(city) => ({ // 图例前面的原点样式
    symbol: 'circle', // 形状，官网有列举其他形状
    spacing: 3, // 与文字的距离
    style: {
      lineWidth: 0,
      r: 2.4, // 半径
      fill: fieldMap[city].theme, // 颜色
    },
  })}
/>