vue中水球图组件

1.Liquidfill.vue

<template>
  <div class="yh-liquidfill"></div>
</template>
<script>
function _update(chart, v) {
  var p = Math.max(0, Math.min(v, 1));
  var second = p > 0.1 ? p : p - 0.05;
  chart.setOption({
    series: [
      {
        name: "liquidFill",
        data: [p, second]
      }
    ]
  });
}

export default {
  name: "YhLiquidfille",
  data() {
    return {
      value: 0
    };
  },
  props: ["init", "color", "size"],
  watch: {
    value(v) {
      _update(this.$chart, v);
    }
  },
  methods: {},
  mounted() {
    var chart = echarts.init(this.$el);
    var wcolor = ["#663300", "#ffcc99"];
    var bdcolor = "#663300";
    var lcolor = "#663300";
    var bgcolor = "#e3e7ff";
    var c = this.color;
    if (c) {
      wcolor = c.wave || wcolor;
      bdcolor = c.border || bdcolor;
      lcolor = c.label || lcolor;
      bgcolor = c.background || bgcolor;
    }
    var option = {
      series: [
        {
          type: "liquidFill",
          name: "liquidFill",
          color: wcolor,
          outline: {
            show: true,
            borderDistance: 8,
            itemStyle: {
              color: "none",
              borderColor: bdcolor,
              borderWidth: 8,
              shadowBlur: 20,
              shadowColor: "rgba(0, 0, 0, 0.25)"
            }
          },
          backgroundStyle: {
            color: bgcolor
          },
          label: {
            color: lcolor
          },
          data: []
        }
      ]
    };
    chart.setOption(option);
    var v = this.init;
    if (this.init) {
      this.value = v;
    }
    this.$chart = chart;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2.LiquidfillDemo.vue

<template>
  <div class="yh-page">
    <h1>水球图演示</h1>
    <div class="desc">Demo源代码：
      <code>/examples/components/modules/LiquidfillDemo.vue</code>
    </div>
    <div style="margin-top:20px;width:400px;">
      <el-form label-width="80px">
        <el-form-item label="百分比">
          <el-input v-model="value" type="number" value="0.6" min="0" max="1" @change="onChange"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <yh-liquidfill :init="0.6" ref="lf" :color="color"></yh-liquidfill>
  </div>
</template>
<script>
import liquidfill from "../../components/comcompont/echarts/Liquidfill";
export default {
  name: "LiquidfillDemo",
  data() {
    return {
      value: 0.6,
      color: {
        wave: ["#036", "#069"],
        border: "#036",
        label: "#06c",
        background: "#cff"
      }
    };
  },
  methods: {
    onChange() {
      this.$refs.lf.value = this.value;
    }
  },
  components: {
    "yh-liquidfill": liquidfill
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scope>
</style>