下钻交互
示例data值。
场景：省市乡下钻、平台店铺sku下钻等，这里以柱状图双击交互为例。
let chart = null
function renderChart(data) {
// 缓存chart 直接改变数据及配置项
if (chart) {
chart.axis('val', {
title: {
text: '店铺销量'
}
})
chart.axis('name', {
title: {
text: '店铺名称'
}
})
chart.changeData(data)
return
}
chart = new G2.Chart({
container: 'container',
autoFit: true,
height: 500
});
chart.data(data);
chart.scale('val', {
alias: '销量'
})
chart.axis('val', {
title: {
text: '平台销量'
}
})
chart.axis('name', {
title: {
text: '平台名称'
}
})
chart.interval().position('name*val');
// 双击下钻
chart.on('element:dblclick', res => {
const { data } = res.data
renderChart(shopData[data.id])
})
chart.render();
}
renderChart(platformData)
也可以使用click动态生成类似右键菜单的下钻按钮，点击后下钻，只是交互方式的不同。
自定义Tooltip展示信息
一般情况下，Tooltip的提示信息是由title和key-value组合而成。
title为当前横坐标；
key为纵坐标的字段名；
value为字段名对应的值；
- 自定义别名：
// axis(field, options) 形式
chart.axis('val', {
title: {
text: '平台销量'
}
})
- 使用
itemTpl自定义模板，定制性高。
首先定义itemTpl模板，表示要使用自定义，这个模板中的类是固定的。
name和value就是我们自定义展示的信息
chart.tooltip({
showCrosshairs: true,
shared: true,
title: '销量',
itemTpl: `
<div style="margin-bottom: 10px;list-style:none;">
<span style="background-color:{color};" class="g2-tooltip-marker"></span>
{name}: {value}
</div>
`
})
在tooltip中定义回调函数。
chart.line().position(`name*val`)
.tooltip('name*val*id', (name, val, id) => {
// 字段名写全，且接受的顺序不能变。
// 这里可以写逻辑，返回当前想要展示的name和val。
return {
name: name,
value: val
}
})
折线图如何出现面积渐变
有时候UI会画一些比较花里胡哨的图表，咱又不能说不会，那么图表如何支持渐变呢？
color是支持传入渐变格式的，如l(90) 0:#27C68E 1:#FFFFFF
chart.area().position(`name*val`).color('l(90) 0:#27C68E 1:#FFFFFF').tooltip(false)
如果是对比图，那么color就需要传入分类的字段名，那颜色color怎么办呢？
不慌，color是支持传入回调方法的
// 使用type（a，b）来画出两条折线图，并返回对应的渐变格式。
chart.area().position(`statisticsDate*value`).color('type', (val) => {
return val === 'a' ? 'l(90) 0:#3B6CFF 1:#FFFFFF' : 'l(90) 0:#27C68E 1:#FFFFFF'
}).tooltip(false)
出现两个图表的解决方法
-
图表实例较少，可以在每次渲染图表之前，使用
distroy()销毁当前组件 -
图表实例较多，比如在表格中渲染图表，下图这种。
可以使用
document查找dom的方法，获取canvas或者svg节点，直接remove掉。也可以更加简单粗暴的直接将表格重新渲染。vue中就是v-if了，简单粗暴。
图表乱序问题（类型错误）
一般情况下，图表都涉及到数字大小关系，必须要用Number类型。
以柱状图、折线图等的纵轴坐标排序为例（默认由小到大）。
因此要求传入的字段值必须为Number类型。
如果后端返回的是String类型，会导致纵坐标乱序。
就想到这些了，想起来在补充吧！！！
