1. 下载echarts和echarts-liquidfill

npm install echarts --save
npm install echarts-liquidfill

2. main.js
import * as echarts from 'echarts'import 'echarts-liquidfill'Vue.prototype.$echarts = echarts
3. html
<div class="chart-box">  <div class="liquidFill" ref="liquidFill"></div></div>
4. css
.chart-box {  width: 45px;  height: 120px;  position: relative;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  background-color: #061633;  .liquidFill {    width: 100%;    height: 100%;  }}
5. js
export default {  mounted () {    this.draw(0.6)  },  methods: {    draw (data) {      const chart = this.$echarts.init(this.$refs.liquidFill)      const dataOption = {        value: data,        itemStyle: {          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{            offset: 0,            color: 'rgba(128, 255, 165)'          }, {            offset: 1,            color: 'rgba(1, 191, 236)'          }])        }      }      const option = {        series: [          {            type: 'liquidFill',            shape: 'rect',            radius: 120,            amplitude: '8%', // 振幅            data: [dataOption, dataOption],            backgroundStyle: {              color: 'rgba(255, 255, 255, 0)'            },            outline: {              show: false            },            label: {              normal: {                show: false,                formatter: ''              }            }          }        ]      }      chart.setOption(option)   }}
6. 最终实现成果