使用G2的BizChar 踩过的坑

1. 关于图例的文案修改成中文

官方图bizcharts.net/products/bi…

在cols添加如下代码：

user: { formatter: d => ({ a: '修改a', b: '修改b' }[d]) }复制代码

添加后效果图：

2.关于自定义htmlContent

官网bug 

官网代码

<Tooltip  useHtml htmlContent={(title, items) => {
      return `<div class="g2-tooltip">
                <div class="g2-tooltip-title">${title} </div>
                <ul><li>${JSON.stringify(items)}</li></ul>
                </div>`}}
  />复制代码

修改后自定义Tooltip效果图

⚠️必须手动写css,否则自定义的会样式会bug

//js中class
<Tooltip       
htmlContent={function (title, items) {
            const { list = [] } = items[0]             
 return `<div class='custom-tooltip'>你需要的内容<div>`
}
/>//css样式
.custom-tooltip {    
    position: absolute;   
    left: 20px;
    background: rgba(24, 24, 24, 0.9);
    color: #fff;
    width: 440px;
    height: auto;
    border-radius: 3px;
    font-size: 13px;
    right: 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 10px #aeaeae;
    z-index: 999;
}
复制代码

3. 关于地图的使用

地图效果：

需要引入高德api

  <!-- 引入高德地图JSAPI -->  <script src="//webapi.amap.com/maps?v=1.3&key=89a0871d1c4bf418cd9ab88c01e3bd5d"></script>  <!-- 引入UI组件库（1.0版本） -->  <script src="//webapi.amap.com/ui/1.0/main.js"></script>复制代码

地图代码

import React, { Component } from 'react'const { AMap, AMapUI } = window;import {  Chart, Geom, Tooltip, Legend, Guide} from "bizcharts";import numeral from 'numeral'import DataSet from "@antv/data-set";const constructGeoJSON = (features) => {  if (!features) return false;  if (Array.isArray(features)) {    return {      type: 'FeatureCollection',      features: [...features],    };  }  return features;};/** 传入adcode获取geojson，部分数据需要处理一下*/const getGeojsonByCode = (adcode = 100000, withSub = true) => {  const { AMapUI } = window;  if (!AMapUI) {    return Promise.reject();  }  // 文档：https://lbs.amap.com/api/javascript-api/reference-amap-ui/geo/district-explorer  return new Promise((resolve, reject) => {    AMapUI.load("ui/geo/DistrictExplorer", DistrictExplorer => {      const districtExplorer = new DistrictExplorer();      districtExplorer.loadAreaNode(adcode, (error, areaNode) => {        if (error) {          reject();        }        let res = null;        if (withSub) {          res = areaNode.getSubFeatures();        } else {          res = areaNode.getParentFeature();        }        resolve(constructGeoJSON(res));      });    });  });};// 绘制思路// 前提：页面加载高德地图及其UI的SDK，参考html页面// 1、通过高德的数据接口获取geojson数据// 2、通过Dataset进行数据处理// 3、绘制class MapChart extends Component {  state = {    chinaGeo: null,  }  componentDidMount() {    getGeojsonByCode(100000, true).then(res => {      this.setState({        chinaGeo: res,      });    });  }  processGeoData = (geoData, dataValue) => {    const { features } = geoData    features.map((one) => {      const name = one.properties.name      dataValue.map((item) => {        if (name.includes(item.name)) {          one.value = item.value        }      })    })    const geoDv = new DataSet.View().source(geoData, {      type: 'GeoJSON',    });    return geoDv;  }  render() {    const  area =[      {        "key":"10105",        "name":"广东",        "value":0.1138      },      {        "key":"10125",        "name":"四川",        "value":0.0899      },      {        "key":"10102",        "name":"安徽",        "value":0.0695      },      {        "key":"10130",        "name":"浙江",        "value":0.0525      },      {        "key":"10112",        "name":"湖北",        "value":0.0505      },      {        "key":"10124",        "name":"上海",        "value":0.0495      },      {        "key":"10103",        "name":"福建",        "value":0.0484      },      {        "key":"10131",        "name":"重庆",        "value":0.0419      },      {        "key":"10115",        "name":"江苏",        "value":0.0402      },      {        "key":"10123",        "name":"陕西",        "value":0.0388      },      {        "key":"10121",        "name":"山东",        "value":0.0387      },      {        "key":"10109",        "name":"河北",        "value":0.0359      },      {        "key":"10116",        "name":"江西",        "value":0.0315      },      {        "key":"10113",        "name":"湖南",        "value":0.0304      },      {        "key":"10129",        "name":"云南",        "value":0.0294      },      {        "key":"10101",        "name":"北京",        "value":0.0246      },      {        "key":"10104",        "name":"甘肃",        "value":0.0232      },      {        "key":"10114",        "name":"吉林",        "value":0.0229      },      {        "key":"10107",        "name":"贵州",        "value":0.0223      },      {        "key":"10106",        "name":"广西",        "value":0.0220      },      {        "key":"10110",        "name":"河南",        "value":0.0190      },      {        "key":"10117",        "name":"辽宁",        "value":0.0152      },      {        "key":"10118",        "name":"内蒙古",        "value":0.0142      },      {        "key":"10128",        "name":"新疆",        "value":0.0142      },      {        "key":"10111",        "name":"黑龙江",        "value":0.0140      },      {        "key":"10126",        "name":"天津",        "value":0.0122      },      {        "key":"10122",        "name":"山西",        "value":0.0103      },      {        "key":"10108",        "name":"海南",        "value":0.0098      },      {        "key":"10119",        "name":"宁夏",        "value":0.0080      },      {        "key":"10120",        "name":"青海",        "value":0.0052      },      {        "key":"10127",        "name":"西藏",        "value":0.0020      }    ]    const { chinaGeo } = this.state;    if (!chinaGeo) {      return '数据加载中...'    }    const data = this.processGeoData(chinaGeo, area);    const scale = {      latitude: {        sync: true,        nice: false,      },      longitude: {        sync: true,        nice: false,      },      value: {        formatter: val => {          return numeral(val || 0).format('0.0%')        }      },    };    const { Image } = Guide;    return (      <div style={{ position: "relative" }}>        <Chart height={500} width={645} scale={scale} data={data} padding={[0, 0, 0, 90]}>          <Geom type="polygon" position="longitude*latitude"            style={{ lineWidth: 1, stroke: "white" }}            // color={['value', ['#31c5f8', '#61d3f8', '#89dcfd', '#b0e8f8', '#d8f3ff']]}            color={['value', ['#d9f4ff', '#33c5f6']]}            tooltip={['name*value', (name, value) => {              return {                name: name,                value: numeral(value || 0).format('0.0%')              }            }]}          >            <Tooltip showTitle={false} />            <Legend position='bottom-left'              offsetY={-130}              offsetX={-60}              slidable={false}              width={320}            />          </Geom>        </Chart>        <div style={{ position: "absolute", bottom: 100, right: 0 }}>          <img height='58' width='42'            src={require('../img/map-line.png')} />        </div>      </div>    );  }}export default MapChart复制代码

4.给图表后面加文字

效果图

   <Geom type="interval" position="name*value" >            //此处为每个柱图后字段            
            <Label content={["name*value", (name, value) => {              return numeral(value || 0).format('0.0%');            }]} />   </Geom>复制代码

转载于:https://juejin.im/post/5ced02ce518825334a390f50