<template>
      <div :id="idName" style="width:100%;height:100%"></div>
</template>

<script>
export default {
  props: {
  numberNum: {
      type: Number,
      required: true,
      default: true
    },
  idName:{
      type: String,
      required: true,
    }
  },
  name: "equipmentManageEcharts",
  data() {
    return {};
  },
  watch:{
    numberNum:{
      handler:function(newV){
         this.getLoadEcharts()
      }
    }
  },
  mounted() {
    this.getLoadEcharts()
    console.log(this.numberNum);
  },
  methods: {
    getLoadEcharts() {
      var myChart = this.$echarts.init(
        document.getElementById(this.idName)
      );
      let color = new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{//color为渐变色
        offset: 0,
        color: 'rgb(79,72,255)',
      },
        {
          offset: 1,
          color: 'rgb(211,147,255)',
        },
      ])
      var option = {
        title: [{
          text: this.numberNum+'\n库存数量',
          left: 'center',
          top: 'center',
          textStyle: {
            fontSize: 14,
            color: 'rgb(0,228,231)',
            foontWeight: '400',
            // background: 'rgba(9,119,150,0.3)',
          },
        }
        ],
         grid:{
             top:0,
             bottom:0,
             left:0,
             right:0
         },
        tooltip: {
          show:false,
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },

        // backgroundColor: '#000',
        color:['rgb(0,228,231)'],
        series: [
          {
            name: '',
            type: 'pie',
            hoverAnimation: false,
            legendHoverLink: false,
            radius: ['50%', '54%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgb(24,55,123,0.7)',
            // },
            itemStyle: {
              borderRadius: 6,
              borderColor: 'rgb(0,228,231)',
              // borderWidth: 15,
              normal : {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },

            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                position: 'center',
                textStyle : {
                  fontSize : '15',
                  fontWeight : 'bold'
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 50, },
            ],

          },
          {
            name: '库存数量',
            type: 'pie',
            hoverAnimation: false,
            legendHoverLink: false,
            radius: ['46%', '58%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgb(24,55,123,0.7)',
            // },
            itemStyle: {
              borderRadius: 6,
              borderColor: 'rgb(0,228,231)',
              // borderWidth: 15,
              normal : {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },

            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                position: 'center',
                textStyle : {
                  fontSize : '15',
                  fontWeight : 'bold'
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 100-this.numberNum,
                itemStyle: {
                  normal:{
                     color: "rgba(255,255,255,0)"
                  }
                },
              },
              { value: this.numberNum, 
               itemStyle: {
                  normal:{
                     color: color
                  }
                }
              },
            ],

          },
          {
            type: 'gauge',
              // radius: ["95%", "95%"],
            center: ['50%', '50%'],
            radius: 60,
            startAngle: 0,
            endAngle: 10000,
            axisLine: {
              show: false,
              lineStyle: {
                width: 2,
                opacity: 0
              }
            },
            title: { show: false },
            detail: { show: false },
            splitLine: { show: false },
            axisTick: {
              length: 10,
              splitNumber: 6,
              lineStyle: {
                color: 'rgb(0,237,238)',
                width: 2
              }
            },
            axisLabel: { show: false },
            pointer: { show: false },
            itemStyle: {},
            data: [
              {
                value: 20,
                name: 'test gauge'
              }
            ]
          }
        ]
      };


//       myChart.on('mouseover', (v) => {
//         if (v.dataIndex != 0) {
//           // 高亮显示悬停的那块
//           myChart.dispatchAction({
//             type: 'hideTip',
//             seriesIndex: 0,
//             dataIndex: 0
//           });
//           // 当检测到鼠标悬停事件，取消所有选中高亮
//           myChart.dispatchAction({
//             type: 'downplay',
//             seriesIndex: 0,
//             dataIndex: 0
//           });
//         }
//       });
//
// // 检测鼠标移出后显示之前默认高亮的那块
//       myChart.on('mouseout', (v) => {
//         myChart.dispatchAction({
//           type: 'showTip',
//           seriesIndex: 0,
//           dataIndex: 0
//         });
//         myChart.dispatchAction({
//           type: 'highlight',
//           seriesIndex: 0,
//           dataIndex: 0
//         });
//       });

      myChart.setOption(option);
      // 默认展示第一条数据的提示框
      // myChart.dispatchAction({
      //   type: 'showTip',
      //   seriesIndex: 0,
      //   dataIndex: 0
      // });
// 默认高亮展示第一条数据
      // myChart.dispatchAction({
      //   type: 'highlight',
      //   seriesIndex: 0,
      //   dataIndex: 1
      // });
    }
  }
}
</script>

<style scoped>
.equipmentManage {
  width: 100%;
  height: 150px;
}

#equipmentManageEcharts {
  width: 100%;
  height: 150px;
}
</style>

