在博主的前述的一篇文章当中,有写到如何在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水晶球插件》对你有帮助,请点赞、收藏,并留下你的观点哦!