xiaoshi_system/src/views/analyse/custom/components/Charts/Scatter/index.vue

<template>
  <div :id="id" :style="{ width: width, height: height }"></div>
</template>

<script>
import { chartOptionMixins } from "@/views/analyse/custom/mixins";
import { random } from "@/utils";

export default {
  mixins: [chartOptionMixins],
  name: "CScatter",
  data() {
    return {
      id: 'scatter',
      size: 0,
    }
  },
  mounted() {
  },
  methods: {
    getOption() {
      if (this.form.schema.x.ptype === 2) {
        this.dateTimeSort()
      }
      let data = [], x = ['', ...this.selected.x, ''], y = ['', ...this.selected.y, '']
      for (let i = 0; i < x.length; i++) {
        for (let j = 0; j < y.length; j++) {
          if (x[i] && y[j]) {
            data.push([i, j, this.getDataCount(x[i], y[j])])
          }
        }
      }
      const symbolSize = this.getSymbolSize(data)
      return {
        grid: {
          top: this.form.setting.gridTop + '%',
          left: this.form.setting.gridLeft + '%',
          right: this.form.setting.gridRight + '%',
          bottom: this.form.setting.gridBottom + '%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            name: this.form.setting.title1,
            nameTextStyle: this.getNameTextStyle('x'),
            nameLocation: this.form.setting.nameLocation,
            scale: true,
            data: x,
            axisLabel: this.getAxisLabel('category', 'x'),
            splitLine: {
              show: this.form.setting.splitLine
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            boundaryGap: false,
            name: this.form.setting.title2,
            nameTextStyle: this.getNameTextStyle('y'),
            nameLocation: this.form.setting.nameLocation2,
            scale: true,
            data: y,
            axisLabel: this.getAxisLabel('category', 'y'),
            splitLine: {
              show: this.form.setting.splitLine2
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'scatter',
            emphasis: {
              focus: 'series'
            },
            symbolSize: (val) => {
              return symbolSize[val[2]]
            },
            itemStyle: {
              color: (val) => {
                const data = val.value[2]
                const color = this.form.setting.config.table.find(item => data >= item.min && data <= item.max)
                if (color) {
                  return color.color
                }
                return '#5470c6'
              }
            },
            label: this.getDataLabel(),
            data: data,
          },
        ]
      }
    },
    getSymbolSize(dataList) {
      const data = dataList.map(item => item[2]).sort((a, b) => {
        return b - a
      })
      const maxVal = data[0]
      let symbolSize = {}
      data.map(item => {
        symbolSize[item] = Math.round(item / maxVal * 100)
      })
      return symbolSize
    }
  }
}
</script>