众所周知：现在最火热的图表库就是G2以及echarts,而bizcharts是基于G2的一个react封装之后的库，使用起来比原生要方便些，但是文档分类比较简略，所以希望在官方文档的基础上把常用的整理出来。。。
一、charts组件--图表的最外层容器
Q1:谁决定了图表的大小？
- height ( 为组件设置高度,但是这个高度不等于最外层的div的高度,padding:auto时有如下公式: 最外层div的高度~=height+5 )
- padding ( 为图表设置外边距，建议设置为auto,这样才会撑满整个盒子 )
- forceFit ( 自适应宽度，高度不确定 )
参考配置示例 : codepen.io/Juias/pen/Z…
Q2: 数据源的格式？
- data属性( key:value键值对，影响着横轴纵轴的显示，如果数据源与想要显示的格式不同建议在坐标轴对应的回调中修改 )
- scale : 这是官方文档中的参数介绍，用的比较多的是这几个，其中要让图靠边就需要设置 range:[0,1]
type: 'identity' | 'linear' | 'cat' | 'time' | 'timeCat' | 'log' | 'pow', // 指定数据类型
alias: string, // 数据字段的别名，会影响到轴的标题内容
formatter: () => {}, // 格式化文本内容，会影响到轴的label格式
range: array, // 输出数据的范围，默认[0, 1]，格式为 [min, max]，min 和 max 均为 0 至 1 范围的数据。二、Axis坐标轴组件
- name对应数据中的key值
- line:设置坐标轴线样式,具体样式设置参考官方文档：
//可配置样式
{
stroke: 'dddddd', //描边，一般用这个就可以了
fill: '#ffffff',
lineDash: [2, 2, 3],
lineWidth: 3 //线宽
}- label:设置坐标轴文字样式
textStyle: {
textAlign: 'center', // 文本对齐方向，可取值为： start center end
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
} | (text) => {
// text: 坐标轴对应字段的数值
}
}三、Gemo--几何标记和图表类型
- type：决定图表类型,更多详情见官网demo：bizcharts.net/products/bi…
- color: 几何标记的颜色设置 ( String | Array 语法：['field', callback)] )
<Geom color={['price', '#ff0000-#00ff00']}/> //简单写法
color="l (90) 0:rgba(26,92,209,0.8) 1:rgba(56,149,234,0)" //复杂写法
// l表示线性渐变,(0)是从左至右,(90)是从上至下,后面的0和1表示渐变的位置 - tooltip: 主要设置tooltip数据显示格式，而ToolTip组件主要设置样式以及HTML
//如果不需要tooltip,直接设置为false
//如果需要的话就要设置相应的key值<Geom tooltip={
['sales*city',
(sales, city)=>
{return { name:'xxx', value:city + ':' + sales}}
]
}- active：鼠标 hover 时的效果 Boolean | Array
<Geomactive={[true, {highlight: false,// true 是否开启 highlight 效果，开启时没有激活的变灰
style: { fill: 'red'} // 选中后 shape 的样式
}]}/>四：Tooltip--提示信息组件
Q1：提示信息组件默认有小圆点，如果只有一个字段不想要怎么办？
- itemTpl--直接修改html结构,
itemTpl = "<li data-index={index}>"
+ '<span style="background-color:{color};width:8px;height:8px;border-radius:50%;'
+ 'display:inline-block;margin-right:8px;"></span>'
+ "{name}: {value}" + "</li>";Q2:想要修改title以及容器样式？
- g2-tooltip--设置容器样式
- g2-tooltip-title--设置标题样式
- .....
- containerTpl--设置容器模板( 设置同上 )
五：dataset设置切换动画
- 初始化以及载入数据:
class C extends Component{
// 注意这个初始化只执行一次，所以不能全部写到render里面
dv = new DataSet().createView();
render(){
this.dv.source(data);
}
}六：案例分析
从官方示例折线图开始:
1.重复的tooltip产生
这是因为tooltip是根据gemo的country字段产生的,现在有两个gemo标签所以生成了两对tooltip，此时定位到Gemo组建上，只需要取消一个tooltip就可以了,
tooltip={false}2.轴线和图表距离太近了，轴线文字颜色要调整，或者轴线文字太长了，可能需要hover显示全称
首先定位到Axis组件上，对号入座:
以上这些问题都用label属性去解决
// Y轴的设置
const YLabelConfig = {
offset:20, //与轴线的距离
textStyle: {
fill: '#ccc', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}
// X轴设置
const XLabelConfig={
offset:20, //与轴线的距离
textStyle: {
fill: '#ccc', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
},
/**
* 使用 html 渲染文本
* @param {string} text 文本值
* @param {object} item 该文本值对应的原始数据记录
* @param {number} index 索引值
* @return {string} 返回 html 字符串
*/
htmlTemplate(text, item, index){
return `<span title="${text}" style="color:#ccc;
font-weight:bold;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:no-wrap;">${text}</span>`
}
}
3.tooltip前面有空白，这里定位ToolTip组件
// 这里去掉了{name}前面的span标签
const itemTpl= '<li data-index={index}>' + '{name}: {value}' + '</li>'
// 这里需要注意：只能使用字符串，而且格式比较固定，name,value也都是固定的，
如果要改内容的话需要在Gemo标签上增加函数:
tooltip={['sales*city', (sales, city)=>{
return {
name:'xxx',
value:city + ':' + sales
}
}]}线上演示地址：codepen.io/Juias/pen/R…
