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. 最终实现成果