1. 关于图例的文案修改成中文
在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>复制代码