In the most recent project, G2 was used to draw line charts to record the components encapsulated and the problems encountered
- G2Line component code:
<template>
<div class="g2-line" :id="id">
<h4>{{title}}</h4>
</div>
</template>
<script>
import G2 from '@antv/g2'
import { mapGetters } from 'vuex'
export default {
data () {
return {
chart: null
}
},
props: {
chartData: {
type: Array,
default: function () {
return {
data: [{ 'date': 'the 2018-11'.'type': 'Current proportion'.'value': 25.1}, {'date': '2018-12'.'type': 'Current proportion'.'value': 24.7}, {'date': 'the 2019-01'.'type': 'Current proportion'.'value': 23.79}, {'date': 'the 2019-02'.'type': 'Current proportion'.'value': 24.59}, {'date': 'the 2019-03'.'type': 'Current proportion'.'value': 23.89}, {'date': 'the 2019-04'.'type': 'Current proportion'.'value': 23.68}, {'date': 'the 2019-05'.'type': 'Current proportion'.'value': 23.59}, {'date': 'the 2019-06'.'type': 'Current proportion'.'value': 23.8}, {'date': 'the 2019-07'.'type': 'Current proportion'.'value': 21.36}, {'date': 'the 2019-08'.'type': 'Current proportion'.'value': 19.65}, {'date': 'the 2019-09'.'type': 'Current proportion'.'value': 18.89}, {'date': 'the 2019-01'.'type': 'Historical contemporaneous proportion'.'value': 25.37}, {'date': 'the 2019-02'.'type': 'Historical contemporaneous proportion'.'value': 26.68}, {'date': 'the 2019-03'.'type': 'Historical contemporaneous proportion'.'value': 24.71}, {'date': 'the 2019-04'.'type': 'Historical contemporaneous proportion'.'value': 25.83}, {'date': 'the 2019-05'.'type': 'Historical contemporaneous proportion'.'value': 26.07}, {'date': 'the 2019-06'.'type': 'Historical contemporaneous proportion'.'value': 27.21}, {'date': 'the 2019-07'.'type': 'Historical contemporaneous proportion'.'value': 25.32}, {'date': 'the 2019-08'.'type': 'Historical contemporaneous proportion'.'value': 24.98}, {'date': 'the 2019-09'.'type': 'Historical contemporaneous proportion'.'value'}}}, title: {type: String,
default: ' '}, unit: {// unittype: String,
default: ' '
},
id: {
type: String,
required: true// Mounted () if serverData is usedmounted() { this.initChart() }, computed: { ... mapGetters(['windowWidth'}, // watch: {chartData:function(val, oldVal) {// Listen for chartData, and when changes occur, trigger the callback function to draw the chart this.drawChart()}}, methods: {initChart () {
this.chart = new G2.Chart({
container: this.id,
width: this.windowWidth < 1920 ? 530 : 600,
height: 300,
padding: [20, 80, 100, 50]
})
this.drawChart()
},
drawChart () {
this.chart.source(this.chartData)
this.chart.scale('value', {
min: 0
})
this.chart.scale('date', {range: [0, 1]}) this.chart.tooltip({// add unit crosshairs to display: {type: 'line'
},
itemTpl: '{name}: {value}' + this.unit + '</li>'
})
this.chart.line().position('date*value').color('type').shape('smooth')
this.chart.point().position('date*value').size(3).color('type').shape('circle').style({
stroke: '#fff', lineWidth: 1}) this.chart.legend({// set the marker in the chart below:'hyphen'
})
this.chart.render()
}
}
}
</script>
<style lang="scss" scoped>
h4 {
text-align: center;
}
</style>
Copy the codeMarker chart
- The use of G2plot
<! -- G2PlotLine component --> <template> <div :id="id"></div>
</template>
<script>
import { Line } from '@antv/g2plot'
export default {
props: {
chartData: {
type: Array,
default: function () {
return {
data: [{ 'date': 'the 2018-11'.'type': 'Current proportion'.'value': 25.1}, {'date': '2018-12'.'type': 'Current proportion'.'value': 24.7}, {'date': 'the 2019-01'.'type': 'Current proportion'.'value': 23.79}, {'date': 'the 2019-02'.'type': 'Current proportion'.'value': 24.59}, {'date': 'the 2019-03'.'type': 'Current proportion'.'value': 23.89}, {'date': 'the 2019-04'.'type': 'Current proportion'.'value': 23.68}, {'date': 'the 2019-05'.'type': 'Current proportion'.'value': 23.59}, {'date': 'the 2019-06'.'type': 'Current proportion'.'value': 23.8}, {'date': 'the 2019-07'.'type': 'Current proportion'.'value': 21.36}, {'date': 'the 2019-08'.'type': 'Current proportion'.'value': 19.65}, {'date': 'the 2019-09'.'type': 'Current proportion'.'value': 18.89}, {'date': 'the 2019-01'.'type': 'Historical contemporaneous proportion'.'value': 25.37}, {'date': 'the 2019-02'.'type': 'Historical contemporaneous proportion'.'value': 26.68}, {'date': 'the 2019-03'.'type': 'Historical contemporaneous proportion'.'value': 24.71}, {'date': 'the 2019-04'.'type': 'Historical contemporaneous proportion'.'value': 25.83}, {'date': 'the 2019-05'.'type': 'Historical contemporaneous proportion'.'value': 26.07}, {'date': 'the 2019-06'.'type': 'Historical contemporaneous proportion'.'value': 27.21}, {'date': 'the 2019-07'.'type': 'Historical contemporaneous proportion'.'value': 25.32}, {'date': 'the 2019-08'.'type': 'Historical contemporaneous proportion'.'value': 24.98}, {'date': 'the 2019-09'.'type': 'Historical contemporaneous proportion'.'value'}}}, title: {type: String,
default: ' '
},
unit: {
type: String,
default: ' '
},
id: {
type: String,
required: true}},data () {
return{chart: null}} watch: {chartData: {handler (val, oldVal)if (val.length) {
if (this.chart) {
this.chart.updateConfig({ data: val })
} else {
this.initChart()
}
}
},
immediate: true}},mounted () {
},
methods: {
initChart () {
this.chart = new Line(document.getElementById(this.id), {
title: {
visible: true,
text: this.title
},
data: this.chartData,
xField: 'date',
yField: 'value',
seriesField: 'type',
width: 600,
height: 300,
smooth: true,
padding: 'auto',
legend: {
position: 'bottom'
},
point: {
visible: true,
shape: 'circle',
size: 3
},
grid: {
visible: true}, yAxis: {// set y axis and unit min: 0, formatter: (v) => v + this.unit}}) this.chart.render()}} </script>Copy the codeEffect:
