g2自定义chart的label+将获取到的数据转换成chart表需要的数据

chart的label分为两种，一种是坐标轴的label，一种是chart图（条形图，折线图等）上展示的label。

需求

• 横轴代表各个城市, 当前城市横轴label默认高亮显示
• 给柱形图上的label设置样式
• 柱形图上的label展示在横轴的上方，加一个属性position:'bottom'

import { G2 } from "g2"

const data=[
{city:'北京',val:2111,type:'供应面积'},
{city:'上海',val:1311,type:'供应面积'},
{city:'南京',val:1241,type:'供应面积'},
{city:'北京',val:1901,type:'成交面积'},
{city:'上海',val:1101,type:'成交面积'},
{city:'南京',val:610,type:'成交面积'},
]

const chart=G2.Chart({
        container: 'cityGDP',
        padding: ['40', '40', '80', '40'],
        width: xx,
        height: xx
      })
      
chart.source(data)

chart.interval().position('city*val').adjust([{
        type: 'dodge',
        marginRatio: 1 / 32
      }])//柱形图平行排列，而不是堆叠排列
      
chart.render()

坐标轴上的label

let cityName='南京'
//配置横轴---当前城市横轴label默认高亮显示
 chart.axis('city', {
        line: {//横轴线的样式
          stroke: '#e4e6ea',
          lineWidth: 3
        },
        tickLine: null,  //横轴上,下方的刻度线
        autoRotate: true,
        label: {
          textStyle: {
            fill: '#9bb7ef',
            fontSize: 12
          },
          formatter(val) {
            return (val) + '%';
          }
        },
        //或者自定义label结构
        label: {
          useHtml: true,
          htmlTemplate(text, item, index) {
            if (text == cityName) {

              return `<div class="g2-label" style="border:2px solid #FF5500; color:#FF5500; width:100px;min-height:30px;line-height:24px; text-align:center; border-radius:5px;font-size:20px ">` + text + `</div>`
            } else {
              return `<div class="g2-label" style="width:100px; color:#0B0C24; text-align:center;over-flow:hidden; font-size:20px">` + text + `</div>`
            }
          },
          offset: 46,//label距离横轴的偏移量
        }
      })
      

chart上的label

chart.interval().position('city*val').color('type',['#ff5500', '#ffc64c']).label('city*val', function () {      
          return {
             useHtml: true,
              htmlTemplate: function htmlTemplate(text, item) {
                var d = item.point;
                return (
                  `<span class="g2-label" style="color:${item.color};font-size:20px" >` +
                  formatNum(d.val) +
                  "</span > "
                )
            },
            // offset: 10,//偏移量
            position:'bottom'//label的展示位置
          }
      })
      

转换成chart需要的数据格式

多数情况下后端返回的数据格式不是chart表所需要的，这个时候需要进行转换一下，尤其是需要注意数值的格式是number类型，后端往往会返回成字符窜的格式。

//后端直接返回的数据
let data =[
{gdp: "0.00", year: "2017", yearOnYearGrowth: "0"},
{gdp: "4554.00", year: "2018", yearOnYearGrowth: "10"},
{gdp: "29511.00", year: "2019", yearOnYearGrowth: "548.0"}
]
//转换后的数据
let arr1=[
{year: "2017", type: "GDP", val: 0},
{year: "2018", type: "GDP", val: 4554},
{year: "2019", type: "GDP", val: 29511}
]
let arr2=[
{year: "2017", type: "增速", val: 0},
{year: "2018", type: "增速", val: 10},
{year: "2019", type: "增速", val: 548}
]

//一般会单独的封装成一个方法
changeChartData = () => {
    //将获取到的数据转换成chart表需要的数据
    let arr1 = []
    let arr2 = []

    data.forEach((item, index) => {
      if (Object.prototype.hasOwnProperty.call(item, 'gdp')) {
        let obj = {
          year: item.year,
          type: 'GDP(亿元)',
          val: !item.gdp && parseFloat(item.gdp) !== 0 ? null : parseFloat(item.gdp)
        }
        arr1.push(obj)
      }
      if (Object.prototype.hasOwnProperty.call(item, 'yearOnYearGrowth')) {
        let obj = {
          year: item.year,
          type: '增速(%)',
          val: !item.yearOnYearGrowth && parseFloat(item.yearOnYearGrowth) !== 0 ? null : parseFloat(item.yearOnYearGrowth)
        }
        arr2.push(obj)
      }
    })