using of g2 in vue

[dum3ng]

composing parts of g2

The elements of a chart in g2 are:

• axis
• geom
• guide
• tooltip
• legend

axis

We can config the title, tick, type .etc of the axis. The title can be set through title config, or by the scale config. Note that the scale config is just like the scale function in native js version of g2.

<template lang="pug">
v-chart(:scale="scale")
  v-axis(:title="title")
  v-axis(dataKey="yField")
</template>
<script>
export default {
  data() {
  return {
    title: {text: 'I am title', textStyle: {color: 'red'}},
    scale: [{dataKey: 'yField', alias: 'title of field y'}]
}
}
}
</script>

guide

case study: By create a html type guide, and place it at position ['100%', '100%'], and set the offsetX and offsetY properly, we can simulate the axis title at the end of x axis.

<template lang="pug">
v-chart
  v-guide(type="html", :position="['100%', '100%']", :offsetX="10", :offsetY="10")
</template>