Vue项目中如何使用Echarts 及Echarts中echarts-liquidfill水晶球插件

在博主的前述的一篇文章当中，有写到如何在vue项目引入Echarts插件，Echarts插件的应用方法可参考博主之前的文章。在本文中，博主将结合实际开发过程中的操作，介绍一下如何引入echarts-liquidfill插件，并使用它。echarts-liquidfill在github上的链接是https://github.com/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文档中进行选用即可。