vue Examples环形图表的目前使用过的属性_环型图去掉中间的显示

目前的效果：
1. 初始化环形图中间显示总计

2. 鼠标移动到图标上中间会显示你移动到指定地方的值
1

3. 鼠标移开环形图中间显示总计

<template>
  <div>
    <div
      id="myChart1"
      @mouseenter="enterPie"
      @mouseleave="leavePie"
      :style="{ width: '100%', height: '100%', margin: '0 0 0 -20px' }"
    ></div>
  </div>
</template>

<script>
export default {
   
  //值都是从父组件传过来的  我就不模拟了  按照官网的方式就可以
  props: ["list", "text", "centerVal", "centerNumber", "color"],
  data() {
   
    return {
   
      value: null,
    };
  },
  mounted() {
   
    console.log(this.list);
    this.drawLine();
  },
  methods: {
   
    drawLine() {
   
      let _this = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart1 = this.$echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      let option = {
   
        title: {
    // 标题的操作
          text: _this.text, //主文本标题
          left: "center", // title 组件离容器左侧的距离。
          itemGap: 2, // 主副标题之间的间距
          textStyle: {
   
            color: "#FFFFFF", //主文本标题颜色
            fontSize: "17", //字体大小
          },
        },
        tooltip: {
   
          trigger: "item",
        },
        color: _this.color,
        legend: {
    // 图例的操作
          top: "center", // 图例组件离容器左侧的距离
          left: "left",
          icon: "circle", // 图例项的 icon
          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59