TEAMModelOS/TEAMModelOS/ClientApp/components/student-analysis/total/BaseScatter.vue

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

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

    },
    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() {
        // 基于准备好的dom，初始化echarts实例
        let myScatter = this.$echarts.init(document.getElementById("myScatter"),'chalk');

        // 指定图表的配置项和数据
        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 `信息<br/>
                        姓名：${item.data[2]}
                        <br/>通过率：${item.data[1]}%
                        <br/>稳定度：${item.data[0]}
                       `;
              }
          },
          legend: {
            data: ["学生"]
          },
          toolbox: {
            show: true,
            right:'70px',
            feature: {
              mark: { show: true },
              dataZoom: { show: true },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          //grid: {
          //  show: true,
          //  backgroundColor:"rgba(90,90,90,.2)" 
          //},
          xAxis: [
            {
              type: "value",
              splitNumber: 2,
              name: "稳定度",
              nameTextStyle: {
                color:"#e4eadb"
              },
              scale: true,
              //max: 1,
              //min:0,
              splitLine:{
                show: true,
                lineStyle: {
                  color:'#595959'
                }
　　           }
            }
          ],
          yAxis: [
            {
              type: "value",
              name: "通过率",
              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: "学生",
              type: "scatter",
              data: this.dataArr,
              itemStyle: {
                color:"#79c8e8"
              },
              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.$emit('handleItemClick', item);
        })
      }
    }
  };
</script>

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

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