vue echarts 点击按钮切换视图（饼图）

<template>
  <div style="width:50%;height:100%;float:left;">
    <div class="top_title">
      <div class="line"></div>
      <span class="title">农田土壤养分含量</span>
    </div>
    <div style="width:100%;height:70%;">
      <ul class="titbox">
        <li ref="allin" class="active" @click="sxd()" style="cursor:pointer;">速效氮</li>
        <li ref="jk" @click="yxl()" style="cursor:pointer;">有效磷</li>
        <li ref="production" @click="sxj()" style="cursor:pointer;">速效钾</li>
      </ul>
      <div class="radar-pie" id="rooms" style="width：100%;height:90%"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myChartd: null,
      m2R2Data: [
        {
          value: 335,
          name: "0-77.08",
          itemStyle: { color: "#8d7fec" }
        },
        {
          value: 310,
          name: "77.08-79.38",
          itemStyle: { color: "#5085f2" }
        },
        {
          value: 123,
          name: "79.38-80.66",
          itemStyle: { color: "orange" }
        },
        {
          value: 424,
          name: "80.66-81.56",
          itemStyle: { color: "#4EFEB3" }
        },
        {
          value: 444,
          name: "81.56-82.64",
          itemStyle: { color: "#e75fc3" }
        }
      ]
    };
  },
  mounted() {
    this.myChartd = this.$echarts.init(document.getElementById("rooms"));
    this.drawLine();
  },
  methods: {
    sxd() {
      this.$refs.allin.style.color = "#009ef4";
      this.$refs.jk.style.color = "#fff";
      this.$refs.production.style.color = "#fff";
      this.m2R2Data = [
        {
          value: 335,
          name: "0-77.08",
          itemStyle: { color: "#8d7fec" }
        },
        {
          value: 310,
          name: "77.08-79.38",
          itemStyle: { color: "#5085f2" }
        },
        {
          value: 123,
          name: "79.38-80.66",
          itemStyle: { color: "orange" }
        },
        {
          value: 424,
          name: "80.66-81.56",
          itemStyle: { color: "#4EFEB3" }
        },
        {
          value: 444,
          name: "81.56-82.64",
          itemStyle: { color: "#e75fc3" }
        }
      ];
    },
    yxl() {
      this.$refs.allin.style.color = "#fff";
      this.$refs.jk.style.color = "#009ef4";
      this.$refs.production.style.color = "#fff";
      this.m2R2Data = [
        {
          value: 133,
          name: "0-77.08",
          itemStyle: { color: "#8d7fec" }
        },
        {
          value: 256,
          name: "77.08-79.38",
          itemStyle: { color: "#5085f2" }
        },
        {
          value: 444,
          name: "79.38-80.66",
          itemStyle: { color: "orange" }
        },
        {
          value: 21,
          name: "80.66-81.56",
          itemStyle: { color: "#4EFEB3" }
        },
        {
          value: 86,
          name: "81.56-82.64",
          itemStyle: { color: "#e75fc3" }
        }
      ];
    },
    sxj() {
      this.$refs.allin.style.color = "#fff";
      this.$refs.jk.style.color = "#fff";
      this.$refs.production.style.color = "#009ef4";
      this.m2R2Data = [
        {
          value: 86,
          name: "0-77.08",
          itemStyle: { color: "#8d7fec" }
        },
        {
          value: 72,
          name: "77.08-79.38",
          itemStyle: { color: "#5085f2" }
        },
        {
          value: 164,
          name: "79.38-80.66",
          itemStyle: { color: "orange" }
        },
        {
          value: 78,
          name: "80.66-81.56",
          itemStyle: { color: "#4EFEB3" }
        },
        {
          value: 286,
          name: "81.56-82.64",
          itemStyle: { color: "#e75fc3" }
        }
      ];
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let _this = this
      _this.myChartd.setOption({
        grid: {
          top: "20%",
          left: "1%",
          right: "1%",
          bottom: "2%",
          containLabel: true
        },
        tooltip: {
          trigger: "item"
        },
        title: {
          text: "单位{毫克/公斤}",
          textAlign: "left",
          left: "53%",
          top: "5%",
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "50%",
          align: "left",
          top: "20%",
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            name: "",
            type: "pie",
            center: ["25%", "50%"],
            radius: ["55%", "80%"],
            clockwise: false, //饼图的扇区是否是顺时针排布
            label: {
              show: false
            },
            avoidLabelOverlap: false,
            labelLine: {
              show: false
            },
            data: this.m2R2Data
          }
        ]
      });
      window.onresize = _this.myChartd.resize;
    }
  },
  watch: {
    m2R2Data: function() {
      this.drawLine();
    }
  }
};
</script>

<style lang="less" scoped>
.radar-pie {
  height: 100%;
  width: 100%;
}
.top_title {
  height: 13%;
  border-top: 2px solid rgba(52, 183, 112, 0.5);
  padding: 10px;
  .line {
    width: 0.4375rem;
    height: 1.0625rem;
    background: #34b572;
    float: left;
    margin-top: 0.125rem;
  }
  .title {
    color: #fff;
    float: left;
    margin-left: 0.625rem;
    font-size: 0.9375rem;
  }
}
.titbox {
  width: 100%;
  height: 10%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  li {
    float: left;
    width: 20%;
  }
}
.active {
  color: #009ef4;
}
</style>