vue项目中eachars实现水球图（echarts-liquidfill）

最近ui设计了水球图，然后第一眼看着没有做过，所以感觉不好实现，但是做的时候，网上一查发现有相似案例，就找到了 专门的插件，先上最终页面图。

先安装插件（此插件也需要eachars，不过这里不做介绍）

npm install echarts
npm install echarts-liquidfill

官方github：

echarts-liquidfill

看官方介绍需要注意：  

echarts-liquidfill和eachars的不同版本兼容问题!!!!!!!!!!

引入eachars时候，官方给了两种方式

此处注意——————————————————————————> 坑

我第一次引入方式为 

import * as echarts from 'echarts';

页面不报错，但是始终没有数据，所有代码检查几遍，最后尝试引入方式改成下面带有core那种，结果竟然可以了 

import * as echarts from 'echarts/core';

import 'echarts-liquidfill';

HTML代码：

<template>
  <div class="material-count">
    <item-title :titleText="'今日料量统计'" :moreText="'单位(吨)'"></item-title>
    <div class="material-count-main">
      <div class="mmc-chart" ref="chart"></div>
    </div>
  </div>
</template>

js:

export default Vue.extend({
  name: 'MaterialCount',
  data() {
    return {
      myChart: null,
      option: {},
    };
  },
  components: { ItemTitle },
  mounted() {
    this.getEchartData();
  },

  methods: {
    getEchartData() {
      const { chart }: any = this.$refs;
      if (chart) {
        const myChart = echarts.init(chart);
        const option = {
          series: [
            {
              type: 'liquidFill',
              data: [0.43],//水球的数据
              radius: '95%',//水球的实际大小，如果不写会比容器小很多
              name: '剩余',
              backgroundStyle: {
                color: '#32525C',//没有水球的背景颜色
              },
              label: {
                normal: {
                  formatter() {
                    return '剩余86吨';//中间数据
                  },
                  color: '#FFFFFF ',
                  insideColor: '#fff',
                  textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold',
                    fontFamily: 'SourceHanSansCN-Regular',
                  },
                },
              },
              color: [
                {
                  type: 'linear',
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 1,
                      color: ['#326872'], // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: ['#3BE7EC'], // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              ],
              outline: {
                show: true,
                radius: '80%',
                borderDistance: 5,
                itemStyle: {
                  borderColor: '#4381DC',
                  borderWidth: 5,
                },
              },
            },
          ],
        };
        myChart.setOption(option, true);
      }
    },
  },
});