Angular12-NgxCharts-散点图

散点图

<!-- 散点图 -->
<div echarts [options]="echartsNgxScatter"  style="width: 600px;height: 400px;"></div>

import * as echarts from 'echarts';
  // 散点图
  echartsNgxScatter: any;
  echartsNgxScatterData: any = [
    {
      id: '01',
      name: '一',
      children: [
        {
          id: '01-01',
          name: '一',
          childName: '一①',
          yValue: '781',
          xValue: '5325',
        },
        {
          id: '01-02',
          name: '一',
          childName: '一②',
          yValue: '900',
          xValue: '5378',
        },
      ],
    },
    {
      id: '02',
      name: '二',
      children: [
        {
          id: '02-01',
          name: '二',
          childName: '二①',
          yValue: '200',
          xValue: '4936',
        },
      ],
    },
    {
      id: '03',
      name: '三',
      children: [
        {
          id: '03-01',
          name: '三',
          childName: '三①',
          yValue: '499',
          xValue: '9173',
        },
        {
          id: '03-02',
          name: '三',
          childName: '三②',
          yValue: '367',
          xValue: '4173',
        },
        {
          id: '03-03',
          name: '三',
          childName: '三③',
          yValue: '700',
          xValue: '4273',
        },
      ],
    },
  ];
    ngOnInit(): void {
    this.echartsNgxMethodScatter();
 }
  // 散点图
  echartsNgxMethodScatter() {
    let perDataLineAll: any = [];
    let perDataLine: any = [];
    let perLineName: any = [];
    let maxValue: any = { X: [], Y: [] };
    this.echartsNgxScatterData.forEach((item: any) => {
      perDataLine = item.children.map((res: any) => {
        maxValue.X.push(res.xValue);
        maxValue.Y.push(res.yValue);
        return [res.xValue, res.yValue, res.name, res.id, res.childName];
      });
      perLineName.push(`${item.name}(${item.children.length})`);
      perDataLineAll.push(perDataLine);
    });
    console.log('散点图数据', this.echartsNgxScatterData);

    this.echartsNgxScatter = {
      // 图例
      legend: {
        bottom: 0,
        left: 100,
        data: perLineName,
        itemWidth: 10, //图形大小
        itemHeight: 10, //图形大小
        orient: 'horizontal', //排序方向
        formatter: function (name: any) {
          //每一个legend
          return '{div|' + name + '}';
        },
        textStyle: {
          //图例文字的样式
          fontFamily: 'MicrosoftYaHei',
          padding: [0, 0, 0, 0],
          fontSize: 10,
          color: 'rgba(0,0,0,0.85)',
          backgroundColor: 'transparent', // 文字块背景色，一定要加上，否则对齐不会生效
          rich: {
            div: {
              fontSize: 12,
              width: 100,
              padding: [10, 3, 3, 3],
              backgroundColor: 'rgba(49,85,179,0.3)',
            },
          },
        },
      },
      tooltip: {
        backgroundColor: '#fff', //标题背景色
        borderColor: '#aaa', //边框颜色
        borderWidth: 0, //边框线宽
        // confine: true, //悬浮窗限制在图标内
        // enterable: false, //鼠标是否可以进入悬浮窗内
        padding: [2, 2, 2, 2], //内容距离边框边距
        position: 'top',
        fontSize: 16,
        color: '#0ff',
        formatter: (params: any) => {
          //模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
          return `<div>
        <p>onceName:${params.data[4]}</p>
        <p>yValue:${params.data[1]}</p>
        <p>xValue:${params.data[0]}</p>
        </div>`;
        },
        axisPointer: { type: 'none' }, //悬浮的线消失
      },
      // 边距
      grid: {
        x: 50,
        y: 50,
        x2: 50,
        y2: 60,
      },
      xAxis: {
        //x轴文字
        min: 0,
        max: this.ceilFuns(maxValue.X),
        interval: this.ceilFuns(maxValue.X) / 5,
        name: 'x',
        nameTextStyle: {
          fontSize: 20,
          padding: [35, 0, 0, 10],
        },
        // 控制网线
        splitLine: {
          show: true,
          lineStyle: {
            color: '#ff0',
            type: 'dashed',
          },
        },
        // 文字
        axisLabel: {
          formatter: function (value: any) {
            return value;
          },
          fontFamily: 'AlibabaSans-Regular',
          color: '#000',
          fontSize: 20,
        },
        axisTick: {
          //y轴刻度线
          show: false,
        },
        // Y轴的颜色和字体宽度
        axisLine: {
          show: true,
          lineStyle: {
            fontFamily: 'AlibabaSans-Regular',
            color: '#D7EEFF',
            type: 'solid',
          },
        },
      },
      yAxis: {
        min: 0,
        max: this.ceilFuns(maxValue.Y),
        interval: this.ceilFuns(maxValue.Y) / 5,
        name: 'y',
        nameTextStyle: {
          fontSize: 20,
          padding: [0, 0, 0, 0],
        },
        axisLabel: {
          formatter: function (value: any) {
            return value;
          },
          fontFamily: 'AlibabaSans-Regular',
          color: '#e88',
          fontSize: 20,
        },
        // 控制网线
        splitLine: {
          show: true,
          lineStyle: {
            color: '#f0f',
            type: 'dashed',
          },
        },
        axisTick: {
          //y轴刻度线
          show: false,
        },
        // Y轴的颜色和字体宽度
        axisLine: {
          show: true,
          lineStyle: {
            fontFamily: 'AlibabaSans-Regular',
            color: '#D7EEFF',
            type: 'solid',
          },
        },
        scale: true,
      },
      series: [
        {
          name: perLineName[0],
          data: perDataLineAll[0],
          type: 'scatter',
          symbolSize: 10,

          emphasis: {
            label: {
              show: true,
              formatter: function (param: any) {
                return param.data[2];
              },
              position: 'top',
            },
          },
          itemStyle: {
            //点的样式
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)',
            shadowOffsetY: 5,
            color: '#f00',
          },
        },
        {
          name: perLineName[1],
          data: perDataLineAll[1],
          type: 'scatter',
          symbolSize: 10,

          emphasis: {
            label: {
              show: true,
              formatter: function (param: any) {
                return param.data[2];
              },
              position: 'top',
            },
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(25, 100, 150, 0.5)',
            shadowOffsetY: 5,
            color: '#f0f',
          },
        },
        {
          name: perLineName[2],
          data: perDataLineAll[2],
          type: 'scatter',
          symbolSize: 10,

          emphasis: {
            label: {
              show: true,
              formatter: function (param: any) {
                return param.data[2];
              },
              position: 'top',
            },
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)',
            shadowOffsetY: 5,
            color: '#0ff',
          },
        },
      ],
    };
  }
    // 最大值
  maxNum(data: any) {
    return Math.max.apply(null, [...data.flat(Infinity)]);
  }
  // 平均值
  markNum(data: any) {
    return this.toFixeds(eval(data.join('+')) / data.length, 2);
  }
  // 四舍五入
  toFixeds(value: number, digst: number) {
    let value1: any = value + '';
    if (!digst) digst = 0;
    if (value1.indexOf('.') == -1) value1 += '.';
    value1 += new Array(digst + 1).join('0');
    if (
      new RegExp('^(-|\\+)?(\\d+(\\.\\d{0,' + (digst + 1) + '})?)\\d*$').test(
        value1
      )
    ) {
      let value1: any = '0' + RegExp.$2,
        pm = RegExp.$1,
        a = RegExp.$3.length,
        b = true;
      if (a == digst + 2) {
        let a: any = value1.match(/\d/g);
        if (parseInt(a[a.length - 1]) > 4) {
          for (var i = a.length - 2; i >= 0; i--) {
            a[i] = parseInt(a[i]) + 1;
            if (a[i] == 10) {
              a[i] = 0;
              b = i != 1;
            } else break;
          }
        }
        value1 = a
          .join('')
          .replace(new RegExp('(\\d+)(\\d{' + digst + '})\\d$'), '$1.$2');
      }
      if (b) value1 = value1.substr(1);
      return (pm + value1).replace(/\.$/, '');
    }
    return this + '';
  }
  // 取整
  ceilFuns(num: any) {
    let maxA: any;
    if (Array.isArray(num)) {
      num = num.flat(Infinity);
      num = Math.max.apply(null, num);
    }
    let numLength: any = num.toString().length - 1;
    let maxOnce: any = num.toString().slice(0, 1);
    let maxAi: any = num.toString().slice(1, numLength + 1);
    maxAi == 0 ? (maxA = maxOnce) : (maxA = (maxOnce - -1).toString());
    for (let i = 0; i < numLength; i++) {
      maxA += i * 0;
    }
    return Number(maxA);
  }