Vue——echarts 图标鼠标悬停及鼠标移出事件

echarts官方文档地址：https://echarts.apache.org/examples/zh/index.html

饼图中心默认展示值，鼠标悬停会出现默认值不隐藏，导致与其新的数值重叠的情况

解决方法：

完整代码如下：

<span style="font-weight:600">操作系统</span>
<div
  class="echart"
  id="system-echart"
  :style="{ float: 'left', width: '100%', height: '230px' }"
></div>

<script>
import * as echarts from "echarts";
import { pieEchart } from "../util/echart";
export default {
  name: "PieEchart",
  data() {
    return {
      systemName: "操作系统",
      systemData: [
        { value: 300, name: "windows" },
        { value: 200, name: "macos" },
        { value: 499, name: "android" },
        { value: 655, name: "ios" }
      ]
    };
  },
  mounted() {
    let system_echart = document.getElementById("system-echart");
    this.systeminitChart(system_echart, this.systemName, this.systemData);
  },
  methods: {
    systeminitChart(id, name, pieData) {
      this.renderInitEchart(id, name, pieData);
    }
    renderInitEchart(id, name, pieData) {
      let getchart = echarts.init(id);
      let option = pieEchart(name, pieData);
      getchart.setOption(option);

      getchart.on("mouseover", function() {
        getchart.setOption({
          series: [
            {
              label: {
                show: false
              }
            }
          ]
        });
      });

      getchart.on("mouseout", function() {
        getchart.setOption({
          series: [
            {
              label: {
                show: true
              }
            }
          ]
        });
      });

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        getchart.resize();
      });
    }
  }
};
</script>

util/echarts.js

function pieEchart(name, data) {
  let option = {
    tooltip: {
      trigger: "item"
    },
    legend: {
      type: "scroll",
      orient: "vertical",
      left: 180,
      top: 30,
      icon: "rect",
      itemHeight: 44,
      itemWidth: 10,
      selectedMode: false,
      textStyle: {
        color: "#fff",
        fontSize: 16,
        rich: {
          name: {
            fontSize: 14,
            color: "#011",
            padding: [4, 0, 0, 0]
          },
          num: {
            fontSize: 22,
            fontWeight: 600,
            padding: [10, 0, 0, 0],
            color: "#000"
          }
        }
      },
      formatter: function(name) {
        let tarValue;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name == name) {
            tarValue = data[i].value;
          }
        }

        return [`{name|${name}}`, `{num|${tarValue}}`].join("\n");
      }
    },
    series: [
      {
        name,
        center: ["15%", "42%"],
        type: "pie",
        radius: ["40%", "60%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "center",
          formatter: "{c}",
          fontSize: "26",
          fontWeight: "600"
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "26",
            fontWeight: "600"
          }
        },
        labelLine: {
          show: false
        },
        data
      }
    ]
  };

  return option;
}

export { pieEchart };