echart之水球图，立体阴影，左右按钮切换水球显示数据并重新加载

效果图：

所需背景图：

<div class="divInformation">
    <div class="divHeader">升学率统计</div>
    <div class="cutLine"></div>
    <div class="divComponent">
      <div class="companyNumber">
        <i class="el-icon-arrow-left" @click="changeLeft"></i>
        <i class="el-icon-arrow-right" @click="changeRight"></i>
        <div class="numberComponent" :style="testStyle">
          <div
            class="companyItem"
            v-for="(item, index) in information.company"
            :key="index"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div id="liquidChart"></div>
    </div>
  </div>

export default {
  name: "   ",
  computed: {},
  data() {
    return {
      currentIndex: 0,
      testStyle: "",
      information: {
        company: [
          { name: "高中1" },
          { name: "高中2" },
          { name: "高中3" },
          { name: "高中4" },
        ],
      },
      optionData: [0.62, 0.68, 0.76, 0.73],
      option: {
        // 图表主标题
        title: {
          text: " ", // 主标题文本，支持使用 \n 换行
          top: 5, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          left: "center", // 值: 'left', 'center', 'right' 同上
          textStyle: {
            // 文本样式
            fontSize: 17,
            fontWeight: 400,
            color: "black",
          },
        },
        // 提示框组件
        tooltip: {
          trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            color: "#fff", // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 水球图: {a}（系列名称），{b}（数据名称），{c}（数值）
          // 使用函数模板   传入的数据值 -> value: number|Array,
          formatter: function (value) {
            return value.seriesName + ": " + value.data * 100 + "%";
          },
        },
        series: [
          {
            type: "liquidFill",
            name: "升学率", // 系列名称，用于tooltip的显示，legend 的图例筛选
            radius: "65%", // 水球图的半径
            center: ["50%", "57%"], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: "circle",
            phase: 0, // 波的相位弧度 不设置  默认自动
            direction: "right", // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
            outline: {
              show: true, //是否显示轮廓，布尔值
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                // opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 3, // 边框的宽度
                shadowBlur: 30, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: " ", // 边框的阴影颜色,
                borderColor: {
                  // 边框颜色
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0, // 边框 0% 处的颜色
                      color: "rgba(69,73,240,0)",
                    },
                    {
                      offset: 1, // 边框 100% 处的颜色
                      color: "#4077eb",
                    },
                  ],
                },
              },
            },
            // 图形样式
            itemStyle: {
              color: "#4077eb", // 水球显示的背景颜色
              opacity: 0.7, // 波浪的透明度
              shadowBlur: 10, // 波浪的阴影范围
              shadowColor: "#4077eb",
            },
            backgroundStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(69,73,240,0.2)", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(69,73,240,0.2)", // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(69,73,240,0.8)", // 100% 处的颜色
                  },
                ],
              }, // 水球未到的背景颜色
              opacity: 0.5,
            },
            // 图形的高亮样式
            emphasis: {
              itemStyle: {
                opacity: 0.8, // 鼠标经过波浪颜色的透明度
              },
            },
            // 图形上的文本标签，在水波和背景前的文字颜色是不同的，可以通过 insideColor 设置水波处的文字颜色，color 设置背景处的文字颜色
            label: {
              normal: {
                textStyle: {
                  color: "rgba(69,73,240, .6)",
                  fontSize: 30,
                },
              },
            },
            data: [0.62], // 系列中的数据内容数组
          },
        ],
      },
    };
  },
  mounted() {
    this.liquidChart = this.$echarts.init( document.getElementById("liquidChart") );
    this.liquidChart.setOption(this.option);
  },
  created() {},
  methods: {
    changeLeft() {
      if (this.currentIndex >= 1) {
        this.currentIndex--;
        this.testStyle = this.getTestStyle();
      }
      this.option.series[0].data = [this.optionData[this.currentIndex]]
      this.liquidChart.clear();
      this.liquidChart.setOption(this.option)
      console.log(this.currentIndex);
    },
    changeRight() {
      if (this.currentIndex < this.information.company.length - 1) {
        this.currentIndex++;
      } else if (this.currentIndex === this.information.company.length - 1) {
        this.currentIndex = 0;
      }
      this.testStyle = this.getTestStyle();
      this.option.series[0].data = [this.optionData[this.currentIndex]]
      this.liquidChart.clear();
      this.liquidChart.setOption(this.option)
    },
    getTestStyle() {
      return `transform: translateX(${-25 * this.currentIndex}%);`;
    },
  },
};

.divInformation {
  border-radius: 16px;
  height: 32%;
  width: 100%;
  color: #ffffff;
  background-color: rgba(15, 59, 78, 0.8);
}
.divHeader {
  font-size: 18px;
  padding: 10px 15px;
  text-align: center;
  font-weight: bold;
}
.cutLine {
  width: 100%;
  height: 5px;
  background-image: linear-gradient(to right, #3633d8, #44bbf7);
}
.divComponent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 99%;
  height: calc(100% - 47px);
  padding: 10px 15px;
  align-items: center;
  text-align: center;
}
.companyNumber {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: relative;
  width: 100%;
  height: 20%;
}
.el-icon-arrow-left {
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 70%;
  transform: translateY(-50%);
  z-index: 999;
}
.el-icon-arrow-right {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 70%;
  transform: translateY(-50%);
  z-index: 999;
}
.numberComponent {
  display: flex;
  justify-content: space-between;
  height: 20%;
  width: 400%;
  position: relative;
  transition: all 0.9s;
  font-size: 15px;
}
.companyItem {
  display: inline-block;
  width: 48%;
  height: 100%;
  margin: 0 1%;
  font-size: 18px;
}

#liquidChart {
  background: url(./animal.gif) no-repeat center bottom;
  position: relative;
  width: 100%;
  height: 80%;
}