eChart- liquidfill（水位图）

在这里插入图片描述

&lt;template&gt;
  &lt;div :class="className" :style="{ height: height, width: width }" /&gt;
&lt;/template&gt;

&lt;script&gt;
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import 'echarts-liquidfill'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() =&gt; {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions({ expectedData, actualData } = {}) {
      let option = {
        series: [
          {
            type: "liquidFill",
            data: [0.7], // 可以多个波浪，数大在前，数小在后，避免遮挡（不透明情况下)。

            // data中的元素也可以使用一个对象，单独设置某项样式 {
            //   value: 0.3,
            //   direction: 'left',  // 将单个波浪的移动方向设置为默认的反方向
            //   itemStyle: {
            //       color: 'red',
            //       opacity: 0.6
            //   },
            //   emphasis: {
            //       itemStyle: {
            //           opacity: 0.9
            //       }
            //   }
            // }

            color: ["#294D99", "#156ACF", "#1598ED", "#45BDFF"],
            center: ["50%", "50%"], // 球心到左/上边界的距离 百分数 或者 px（其他单位也按px计算）
            radius: "80%", // 调节球的大小，百分数或者px
            amplitude: "7%", // 波浪幅度，振幅大小， 0为平面
            waveLength: "80%",
            phase: "auto",
            period: "auto",
            direction: "right",
            shape: "circle", // 形状设置 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            // 1.              // 形状设置 '圆形', '正方形', '带圆角的正方形', '正三角形', '菱形', '定位形状/钉', '箭头'
            // 2. container 时填充整个框框
            // 3. an SVG path starting with 'path://'.

            waveAnimation: true, // 开启或关闭波浪动画
            animationEasing: "linear",
            animationEasingUpdate: "linear",
            animationDuration: 1000, // 第一次波浪升起来时的动画时长； 设为0后直接切换
            animationDurationUpdate: 2000, // data数据变动时波浪升起或下降的动画时长，数据变动后需调用mychart.setOption(option)

            outline: {
              // 水球外侧默认有一个边框
              show: true, // 默认显示，false不显示
              borderDistance: 8,
              itemStyle: {
                color: "none",
                borderColor: "#294D99",
                borderWidth: 8,
                shadowBlur: 20,
                shadowColor: "rgba(0, 0, 0, 0.25)",
              },
            },

            backgroundStyle: {
              color: "#E3F7FF", // 水球背景色
              borderWidth: 3, // 水球内部圆形的边框宽度， 默认是没有的
              borderColor: "pink", // 设置了边框颜色才能看见边框；
            },

            itemStyle: {
              opacity: 0.95, // 波浪颜色透明度
              shadowBlur: 50,  // 波浪边缘的阴影
              shadowColor: "rgba(0, 0, 0, 0.4)",
            },
            label: {
              formatter: function (a, b, c) {
                // 可以自定义中心的文字 n换行
                return '{a}n{b}nValue: {c}'
                // formatter: '{a}n{b}nValue: {c}',
                // a 代表 series.name , b 代表 series.data中第一个元素定义的name, c 代表 series.data中第一个元素定义的value;
                // b/c  data: [{name: 'First Data', value: 0.6}, 0.5, 0.4, 0.3],
              },
              show: true,
              color: "#fff",
              insideColor: "#fff",
              fontSize: 50,
              fontWeight: "bold",

              align: "center",
              baseline: "middle",
              position: "inside",
            },

            emphasis: {
              // 鼠标悬停效果设置位置
              itemStyle: {
                opacity: 0.8, // 波浪填充色的hover style 的透明度， 鼠标放在波浪上的透明度
                color: "#585a99",
              },
            },
          },
        ],
        tooltip: {
          show: false  // 鼠标放上显示数据
        }
      };

      this.chart.setOption(option1)
    }
  }
}
</script>