最经项目中有用到g2来绘制折线图,记录一下自己封装的组件和遇到的问题
- G2Line组件代码:
<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': '2018-11', 'type': '当前占比', 'value': 25.1 },
{ 'date': '2018-12', 'type': '当前占比', 'value': 24.7 },
{ 'date': '2019-01', 'type': '当前占比', 'value': 23.79 },
{ 'date': '2019-02', 'type': '当前占比', 'value': 24.59 },
{ 'date': '2019-03', 'type': '当前占比', 'value': 23.89 },
{ 'date': '2019-04', 'type': '当前占比', 'value': 23.68 },
{ 'date': '2019-05', 'type': '当前占比', 'value': 23.59 },
{ 'date': '2019-06', 'type': '当前占比', 'value': 23.8 },
{ 'date': '2019-07', 'type': '当前占比', 'value': 21.36 },
{ 'date': '2019-08', 'type': '当前占比', 'value': 19.65 },
{ 'date': '2019-09', 'type': '当前占比', 'value': 18.89 },
{ 'date': '2019-01', 'type': '历史同期占比', 'value': 25.37 },
{ 'date': '2019-02', 'type': '历史同期占比', 'value': 26.68 },
{ 'date': '2019-03', 'type': '历史同期占比', 'value': 24.71 },
{ 'date': '2019-04', 'type': '历史同期占比', 'value': 25.83 },
{ 'date': '2019-05', 'type': '历史同期占比', 'value': 26.07 },
{ 'date': '2019-06', 'type': '历史同期占比', 'value': 27.21 },
{ 'date': '2019-07', 'type': '历史同期占比', 'value': 25.32 },
{ 'date': '2019-08', 'type': '历史同期占比', 'value': 24.98 },
{ 'date': '2019-09', 'type': '历史同期占比', 'value': 25.64 }]
}
}
},
title: {
type: String,
default: ''
},
unit: { // 单位
type: String,
default: ''
},
id: {
type: String,
required: true
}
},
// 如果使用serverData传过来的静态数据 请使用mounted()方法 并注释掉watch
mounted () {
this.initChart()
},
computed: {
...mapGetters(['windowWidth'])
},
// 监听API接口传过来的数据
watch: {
chartData: function (val, oldVal) { // 监听chartData,当发生变化时,触发这个回调函数绘制图表
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({ // 给显示添加单位
crosshairs: {
type: 'line'
},
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}' + 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({ // 设置个性图例 marker图表在下图中有介绍
marker: 'hyphen'
})
this.chart.render()
}
}
}
</script>
<style lang="scss" scoped>
h4 {
text-align: center;
}
</style>
- G2plot的使用
<!-- G2PlotLine组件 -->
<template>
<div :id="id"></div>
</template>
<script>
import { Line } from '@antv/g2plot'
export default {
props: {
chartData: {
type: Array,
default: function () {
return {
data: [{ 'date': '2018-11', 'type': '当前占比', 'value': 25.1 },
{ 'date': '2018-12', 'type': '当前占比', 'value': 24.7 },
{ 'date': '2019-01', 'type': '当前占比', 'value': 23.79 },
{ 'date': '2019-02', 'type': '当前占比', 'value': 24.59 },
{ 'date': '2019-03', 'type': '当前占比', 'value': 23.89 },
{ 'date': '2019-04', 'type': '当前占比', 'value': 23.68 },
{ 'date': '2019-05', 'type': '当前占比', 'value': 23.59 },
{ 'date': '2019-06', 'type': '当前占比', 'value': 23.8 },
{ 'date': '2019-07', 'type': '当前占比', 'value': 21.36 },
{ 'date': '2019-08', 'type': '当前占比', 'value': 19.65 },
{ 'date': '2019-09', 'type': '当前占比', 'value': 18.89 },
{ 'date': '2019-01', 'type': '历史同期占比', 'value': 25.37 },
{ 'date': '2019-02', 'type': '历史同期占比', 'value': 26.68 },
{ 'date': '2019-03', 'type': '历史同期占比', 'value': 24.71 },
{ 'date': '2019-04', 'type': '历史同期占比', 'value': 25.83 },
{ 'date': '2019-05', 'type': '历史同期占比', 'value': 26.07 },
{ 'date': '2019-06', 'type': '历史同期占比', 'value': 27.21 },
{ 'date': '2019-07', 'type': '历史同期占比', 'value': 25.32 },
{ 'date': '2019-08', 'type': '历史同期占比', 'value': 24.98 },
{ 'date': '2019-09', 'type': '历史同期占比', 'value': 25.64 }]
}
}
},
title: {
type: String,
default: ''
},
unit: {
type: String,
default: ''
},
id: {
type: String,
required: true
}
},
data () {
return {
chart: null
}
},
// 监听API接口传过来的数据
watch: {
chartData: {
handler (val, oldVal) { // 监听chartData,当发生变化时,触发这个回调函数绘制图表
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: { // 设置y坐标轴 和 单位
min: 0,
formatter: (v) => v + this.unit
}
})
this.chart.render()
}
}
}
</script>
效果图: