图表
highchart vs g2plot
在 chart 库的选择上,项目先后使用了 highchart 和 g2plot。在我接手项目之前,用的是 highchart 库,但 highchart 有 3 点是让我挺难受的。
- 无法直接将数据源转为 chart ,必须进行一轮复杂的数据转换去匹配 highchart 的配置方式。
- 由于无法直接将数据源变成 chart,老系统非常粗暴的将整个 highchart 配置都交给后端来编写,前端侧无法控制 chart 呈现,而后端同学几经转手难以理解其中的配置,每每有 chart 改动需求都非常头疼。
- 就我个人而言,highchart 的官方文档写的很差劲,看文档很累。
在我们前后端同学再 highchart 的泥潭中挣扎一段时间后,逐步使用蚂蚁的 g2plot 来替代。收益也很明显。
- g2 和 g2plot 的文档和示例非常友好,很容易入手。
- g2plot 的 chart 呈现是将数据源和 chart 配置分离的,后端同学只需要提供一串数据数组,chart 配置的事情都交给前端即可。
- g2 的功能非常强大,目前项目已经基于 g2 实现了中国地图、折线图、双轴图、饼图、环图、柱状图、条形图以及更加复杂的组合图。
g2plot 在 Vue 中的封装
因为 g2plot 并没有特别针对 Vue 的封装,简单写了个组件用于 Vue 项目中。
<template>
<div ref="chart" />
</template>
<script>
import { Area, Column, Line, Bar, Pie, DualAxes, Gauge } from '@antv/g2plot'
import { getChartColorsByGameId } from '@/utils/theme.js'
export default {
name: 'GmChart',
props: {
type: String,
data: Array,
options: Object
},
mounted() {
this.chartColors = getChartColorsByGameId(this.$store.state.gameId)
this.chartInstanse = this.getChartInstance()
this.chartInstanse.update(this.options)
this.chartInstanse.render()
},
beforeDestroy() {
this.chartInstanse.destroy()
},
methods: {
getChartInstance() {
const option = {
data: this.data,
height: 300,
color: this.chartColors,
...this.options
}
switch (this.type) {
case 'area':
return new Area(this.$refs.chart, option)
case 'line':
return new Line(this.$refs.chart, option)
case 'column':
return new Column(this.$refs.chart, option)
case 'bar':
return new Bar(this.$refs.chart, option)
case 'pie':
return new Pie(this.$refs.chart, option)
case 'dual-axes':
return new DualAxes(this.$refs.chart, option)
case 'gauge':
return new Gauge(this.$refs.chart, option)
default:
return null
}
}
},
watch: {
data(val) {
this.chartInstanse.changeData(val) // 更新 data 数据
},
options(val) {
this.chartInstanse.update(val) // 更新 chart 配置
}
}
}
</script>
中国地图数据占比图
在 g2plot 中并没有快捷的地图选项,这就得用到更强大的 g2 的地图了。做地图要注意几点:
- 中国地图的 geo 数据 g2 并没有提供,我用的是 github 上的 china-geojson 库,里面包含了中国及各省市的经纬度信息。
- 当时后端同学给我的省市名称是简写,如上海、新疆这种,而非全称。这样是无法匹配数据显示到地图上的。后端提供的数据源必须和地图 json 文件中的信息一致。
<template>
<div id="china-province-map-container" />
</template>
<script>
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
// Geo JOSN file path
const GeoPath =
process.env.NODE_ENV === 'development'
? '/china-geo.json'
: '/spa/china-geo.json'
export default {
name: 'chinaProvinceMap',
props: {
chartData: Array,
},
data() {
return {
mapData: null,
chart: null,
}
},
async mounted() {
await this.getChinaMapGeo()
this.createMapChartInstance()
this.renderMap()
},
beforeDestroy() {
if (this.chart) {
this.chart.destroy()
}
},
methods: {
createMapChartInstance() {
this.chart = new Chart({
container: 'china-province-map-container',
// autoFit: true,
width: 500,
height: 400,
})
// set tootip
this.chart.tooltip({
showTitle: false,
showMarkers: false,
shared: true,
customItems(items) {
return items.map((item) => ({
...item,
name: item.data.tag_value,
}))
},
domStyles: {
'g2-tooltip': {
width: '180px',
},
},
})
// set scale sync
this.chart.scale({
longitude: {
sync: true,
},
latitude: {
sync: true,
},
})
// close axis
this.chart.axis(false)
// close legend
this.chart.legend(false)
},
getChinaMapGeo() {
return fetch(GeoPath)
.then((res) => res.json()) // transfer
.then((mapData) => {
this.mapData = mapData
})
},
renderMap(isUpdate) {
this.chart.clear()
const geoDv = new DataSet.View().source(this.mapData, {
type: 'GeoJSON',
})
const geoView = this.chart.createView()
geoView.data(geoDv.rows)
geoView.polygon().position('longitude*latitude').color('#ebedf0').style({
lineWidth: 1,
stroke: '#fafbfc',
})
geoView.tooltip(false)
const userView = this.chart.createView()
userView.data(this.chartData)
userView
.point()
.position('longitude*latitude')
.color('#1890ff')
.shape('circle')
.size('num', [3, 11])
.style({
lineWidth: 1,
stroke: '#1890ff',
})
userView.interaction('element-active')
this.chart.render(isUpdate)
},
},
watch: {
chartData() {
if (this.chart) {
this.renderMap(true)
}
},
},
}
</script>
<style lang="scss" scoped>
</style>
效果如下
map
复杂图表的实现
另外还有一种比较麻烦的图表是那种用户想要的定制化图表,比如下面两个:
组合条形图
组合双轴图
以上 chart 都可以通过 g2plot 的 多图层图表 Mix 来实现的。想要实现多图层图表其实并不复杂,只要将它拆分为最小单位的一个个图表,就像 PhotoShop 的图层一样堆叠实现就可以了。
不过多图层图表是有一些坑的:
- 多图层图表的 legend 图例并无法显示完全,暂时没有找到原因。我是通过异常 g2 的图例自己手写替代来绕过的。
- 多图层的图标 tooltip 提示信息在某些地方会出现不停闪烁的问题,暂时没有解决。
- 图表的标注属性 annotations 会出现在整个图表的最上层,而不是当前图表上层,会出现遮挡其他图层的图表的问题,暂时没有解决。
另外一些需求
- 在折线图上增加关键点的小旗标识(使用 g2 的绘图功能)。
G2.registerShape('point', 'flag-point', {
draw(cfg, container) {
const point = { x: cfg.x, y: cfg.y }
const group = container.addGroup()
if (cfg.data.operation_event && cfg.data.operation_event.length > 0) {
group.addShape('image', {
attrs: {
x: point.x - 4,
y: point.y - 20,
img: FlagImg,
width: 16,
height: 16,
},
})
}
return group
},
})
- 在 tooltip 中增加额外信息(使用 tooltip 的 customContent 方法)。
- 在折线图中将某一段标为虚线(使用 Line 的 annotations 属性)。
网友评论