在博主的前述的一篇文章当中，有写到如何在vue项目引入Echarts插件，Echarts插件的应用方法可参考博主之前的文章。在本文中，博主将结合实际开发过程中的操作，介绍一下如何引入echarts-liquidfill插件，并使用它。echarts-liquidfill在github上的链接是/ecomfe/echarts-liquidfill，上面有详述插件的api。
那么如何引入vue项目，博主默认查阅本文的访客已在项目中安装了Echarts：
1）项目中作为项目依赖，安装到项目当中
npm install echarts-liquidfill --save
2）在需要使用水晶球的组件里引入liquidFill.js
import 'echarts-liquidfill/src/liquidFill.js'; //在这里引入
3）在模板中加入挂载水晶球的DOM节点
<div id="echarts" :style="{width: '340px', height: '220px',}"></div>
4）在方法中添加liquidFill调用方法，如
// 绘制指标图echartsMit() {var dom = document.getElementById('echarts');console.log(dom);var myChart = this.echarts.init(dom);myChart.setOption({series: [{type: 'liquidFill',data: [0.6, 0.5, 0.4, 0.3],itemStyle: {shadowBlur: 0},outline: {borderDistance: 0,itemStyle: {borderWidth: 3,borderColor: '#156ACF',shadowBlur: 20,}},label: {normal: {textStyle: {color: 'red',insideColor: 'yellow',fontSize: 40}}},}]});},
5）在项目页面挂载的时候，调用生成水晶球的方法
mounted() {this.echartsMit();},
生成的效果如下图：
具体在项目中，使用何种水晶球样式，在echarts-liquidfill api文档中进行选用即可。
如果觉得《Vue项目中如何使用Echarts 及Echarts中echarts-liquidfill水晶球插件》对你有帮助，请点赞、收藏，并留下你的观点哦！
