<template>
  <div id="myScatter"></div>
</template>

<script>
  import scatterList from '@/static/scatter.json'
  export default {
    name: "hello",
    data() {
      return {
        originArr:[],
        dataArr: [],
        activeItemIndex:0
      };
    },
    created() {
      this.originArr = scatterList;
      this.originArr.forEach(item => {
        let arr = [];
        arr.push(item.x);
        arr.push(item.y);
        arr.push(item.name);
        arr.push(item.id);
        this.dataArr.push(arr);
      })

      //let list = scatterList.sort(function (a, b) { return  Number(b.score) - Number(a.score) });
      scatterList.forEach((item,index) => {
        //item.rank = list.indexOf(item) + 1;
        //item.areaName = this.areaName(item.x, item.y);
      })

      //console.log(JSON.stringify(scatterList));

    },
    mounted() {
      this.drawLine(this.dataArr);
    },
    methods: {

      randomNum(minNum,maxNum){ 
          switch(arguments.length){ 
              case 1: 
                  return parseInt(Math.random()*minNum+1,10); 
              break; 
              case 2: 
                  return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
              break; 
                  default: 
                      return 0; 
                  break; 
          } 
      },
      areaName(x, y) {
        if (x <= 0.5 && y <= 50) {
          return 'C';
        } else if (x <= 1 && x > 0.5 && y <= 50) {
          return 'C-'
        } else if (x <= 0.5 && y > 50 && y <= 75) {
          return 'B'
        } else if (x <= 1 && x > 0.5 && y > 50 && y <= 75) {
          return 'B-'
        } else if (x <= 0.5 && y > 75 && y <= 100) {
          return 'A'
        } else if(x <= 1 && x > 0.5 && y > 75 && y <= 100){
          return 'A-'
        }
      },
      random() {
        var r = Math.floor(Math.random() * 100 );
        return r;
      },
      randomDataArray() {
        var d = [];
        var len = 60;
        while (len--) {
          d.push([Number((Math.random() * 0.99).toFixed(3)), this.random(), "张三"]);
        }
        console.log(d);
        return d;
      },
      drawLine(data) {
        // 基于准备好的dom，初始化echarts实例
        let myScatter = this.$echarts.init(document.getElementById("myScatter"), 'chalk');
        let _this = this;

        // 指定图表的配置项和数据
        var option = {
          tooltip: {
            trigger: "item",
            showDelay: 0,
            axisPointer: {
              show: true,
              lineStyle: {
                type: "dashed",
                width: 1
              }
            },
            textStyle: {
              height:'160px'
            },
            formatter: function (params) {
              const item = params;
              return `${_this.$t('totalAnalysis.base_name')}：${item.data[2]}
                        <br/>${_this.$t('totalAnalysis.sca_chart_text1')}：${item.data[1]}%
                        <br/>${_this.$t('totalAnalysis.sca_chart_text2')}：${item.data[0]}
                       `;
              }
          },
          legend: {
            data: [_this.$t('totalAnalysis.sca_text4')]
          },
          toolbox: {
            show: true,
            right:'70px',
            feature: {
              dataZoom: { show: true },
              restore: { show: false }
            }
          },
          //grid: {
          //  show: true,
          //  backgroundColor:"rgba(90,90,90,.2)" 
          //},
          xAxis: [
            {
              type: "value",
              splitNumber: 2,
              name: _this.$t('totalAnalysis.sca_chart_text2'),
              nameTextStyle: {
                color:"#e4eadb"
              },
              scale: true,
              //max: 1,
              //min:0,
              splitLine:{
                show: true,
                lineStyle: {
                  color:'#595959'
                }
　　           }
            }
          ],
          yAxis: [
            {
              type: "value",
              name: _this.$t('totalAnalysis.sca_chart_text1'),
              nameTextStyle: {
                color:"#e4eadb"
              },
              max: 100,
              min: 0,
              splitLine:{
                show: false,
                lineStyle: {
                  color:'#595959'
                }
              },
              interval:25,
              axisLabel: {  
                show: true,  
                formatter: function (value) {
                  let val = [];
                  if (value != 25) {
                    val.push(value + '%')
                  }
                  return val;
                }  
                },  
              spiltArea: {
                show:true
              }
            }
          ],
          series: [
            {
              name: _this.$t('totalAnalysis.sca_text4'),
              type: "scatter",
              symbolSize:15,
              data: data,
              itemStyle: {
                color: "#79c8e8",
              },
              //itemStyle: {
              //  color: function(params) {
              //      var key = params.dataIndex;
              //      if (key == _this.activeItemIndex) {
              //          return '#ff99cc';
              //      } else {
              //          return '#79c8e8' 
              //      }
              //  },
              //  width: 20,
              //},
              emphasis: {
                 itemStyle: {
                    color: "#ff99cc"
                  },
              },
              markLine: {
                silent: true,
                animation:false,
                data: [
                  { yAxis: 75 }, { yAxis: 50 }, { yAxis: 100 }
                ],
                label: {
                  color:"#e4eadb",
                  formatter: '{c}%'
                },
                lineStyle: {
                  color: "#595959",
                  type:"solid"
                }
              },
              markArea: {
                silent:true,
                data: [
                    [{
                        xAxis: '0.5',
                        yAxis: '100',
                        itemStyle:{
                            color:'rgba(90,90,90,.2)'
                        
                        },
                        label: {
                            show: true,
                            position: ['90%', '10%'],
                            color: '#66ff33',
                            fontSize: 20,
                            formatter: "A"
                        }
                    
                    }, {
                        xAxis: '0',
                        yAxis: '75',
                        itemStyle:{
                            color:''
                        
                        }
                   
                    }],
                    [{
                          xAxis: '1',
                          yAxis: '100',
                          itemStyle:{
                              color:'rgba(128,128,128,0)'
                        
                          },
                          label: {
                              show: true,
                              position: ['5%', '10%'],
                              color: '#66ff33',
                              fontSize: 20,
                              formatter: "A-"
                          }
                    
                      }, {
                          xAxis: '0.5',
                          yAxis: '75',
                    }],
                    [{
                          xAxis: '0.5',
                          yAxis: '75',
                          itemStyle:{
                              color:'rgba(128,128,128,0)'
                        
                          },
                          label: {
                              show: true,
                              position: ['90%', '10%'],
                              color: '#66ff33',
                              fontSize: 20,
                              formatter: "B"
                          }
                    
                      }, {
                          xAxis: '0',
                          yAxis: '50',
                    }],
                    [{
                          xAxis: '1',
                          yAxis: '75',
                          itemStyle:{
                              color:'rgba(90,90,90,.2)'
                        
                          },
                          label: {
                              show: true,
                              position: ['5%', '10%'],
                              color: '#66ff33',
                              fontSize: 20,
                              formatter: "B-"
                          }
                    
                      }, {
                          xAxis: '0.5',
                          yAxis: '50',
                    }],
                    [{
                          xAxis: '0.5',
                          yAxis: '50',
                          itemStyle:{
                              color:'rgba(90,90,90,.2)'
                        
                          },
                          label: {
                              show: true,
                              position: ['90%', '10%'],
                              color: '#66ff33',
                              fontSize: 20,
                              formatter: "C"
                          }
                    
                      }, {
                          xAxis: '0',
                          yAxis: '0',
                    }],
                    [{
                          xAxis: '1',
                          yAxis: '50',
                          itemStyle:{
                              color:'rgba(128,128,128,0)'
                        
                          },
                          label: {
                              show: true,
                              position: ['5%', '10%'],
                              color: '#66ff33',
                              fontSize: 20,
                              formatter: "C-"
                          }
                    
                      }, {
                          xAxis: '0.5',
                          yAxis: '0',
                    }]
                ],
            }
            }
          ]
        };


        // 绘制图表
        myScatter.setOption(option);
        window.addEventListener("resize", function () {
          myScatter.resize();
        });

        let that = this;
        myScatter.on('click', function (item) {
          that.activeItemIndex = item.dataIndex;
          //that.$emit('handleItemClick', item);
        })

        //缩放后显示还原按钮
        myScatter.on('datazoom', function (params){
          //console.log(params);
          var startValue = myScatter.getModel().option.dataZoom[0].startValue;
          var endValue = myScatter.getModel().option.dataZoom[0].endValue;
          var startPercent = myScatter.getModel().option.dataZoom[0].start;
          var endPercent = myScatter.getModel().option.dataZoom[0].end;
          option.toolbox.feature.restore.show = endValue != 1;
          myScatter.setOption(option);
        })

        //还原后隐藏还原按钮
        myScatter.on('restore', function (params){
          option.toolbox.feature.restore.show = false;
          myScatter.setOption(option);
      })

      }
    },

    computed: {
      //获取最新柱状图数据
      getScatterData() {
        let list = this.$store.state.totalAnalysis.scatter;
        let a = list.map(item => item.y);
        return list;
      }
    },
    watch: {
      getScatterData(val) {
        let newArr = [];
        val.forEach(item => {
          let arr = [];
          arr.push(item.x);
          arr.push(item.y);
          arr.push(item.name);
          arr.push(item.id);
          newArr.push(arr);
        })
        this.scatterList = val;
        this.drawLine(newArr);
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  #myScatter {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    display: block;
  }
</style>
