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

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

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

npm install echarts npm install echarts-liquidfill

官方github：

看官方介绍需要注意：

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);
      }
    },
  },
});