官网地址：https://g2plot.antv.vision/zh/docs/manual/introduction
第一步: vue安装对应插件（网上很多，可以百度一下）
npm install @antv/g2plot --save
第二步：引入
import { Liquid } from '@antv/g2plot'
创建对应的div
<div id="linechart" />
data定义一个 linePlot
加载
mounted() {
var v = this
this.$nextTick(() => {
v.drawChart()
})
},
在methods里面加载方法:
drawChart() {
this.linePlot = new Liquid('linechart', {
percent: 0.88,
width: 120,
height: 120,
outline: {
border: 2,
distance: 2
},
wave: {
length: 128
},
statistic: {
content: {
style: ({ percent }) => ({
fontSize: 20,
lineHeight: 1,
fill: percent > 0.65 ? 'white' : 'rgba(44,53,66,0.85)'
})
}
}
})
this.linePlot.render()
}
数据更新时，调用此方案
changeEchart() {
if (this.linePlot) {
this.linePlot.chart.changeData(0.66)
} else {
this.drawChart()
}
},
第一次整理 有问题请见谅
