vue2实现数据聚合【scatter-clustering】组件封装

实现如下效果：

效果展示：code.juejin.cn/pen/7228568…

如果不会请移步到官网的栗子，请点击查看

直接给大家上代码：

• 整体代码片段

<template>
    <div ref="echarts" style="width: 100%; height:300px;"></div>
</template>
<script>
/* eslint-disable */
import { setClusterOption } from "@/util/clusterConfig";
import ecStat from 'echarts-stat';

export default {
    name: 'ClusterDom',
    props: ["simulationList", "pieCount"],
    data() {
        return {
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.loadBars();
        });
    },
    methods: {
        loadBars() {
            this.$nextTick(function () {
                let myChart = this.$echarts.init(this.$refs.echarts) // 绘制图表
                this.$echarts.registerTransform(ecStat.transform.clustering);

                // 指定图表的配置项和数据
                let text = "", axisData = [];

                if(this.simulationList.length){
                    this.simulationList.forEach((item, index) => {
                        axisData[index] = item.map(Number);
                    });
                }

                text = `聚类分布模拟呈现`;
                let option = setClusterOption(text, axisData, this.pieCount);

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener('resize', function () {
                    setTimeout(function () {
                        myChart.resize();
                    }, 200)
                });
            });
        }
    }
}
</script>

• clusterConfig.js

import color from '@/util/colorConfig.js';

// 散点图
export const setClusterOption = (text, data, pieCount) => {
  const CLUSTER_COUNT = pieCount;
  const DIENSIION_CLUSTER_INDEX = 2;
  let colorArr = color.slice(0, pieCount);

  let option = {
    title: {
      text,
      textStyle: {
        color: "#666",
        fontSize: 16,
        fontWeight: "normal",
        top: "0"
      }
    },
    dataset: [
      {
        source: data
      },
      {
        transform: {
          type: 'ecStat:clustering',
          config: {
            clusterCount: CLUSTER_COUNT,
            outputType: 'single',
            outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
          }
        }
      }
    ],
    tooltip: {
      position: 'top'
    },
    visualMap: {
      show: false,
      type: 'piecewise',
      top: 'middle',
      min: 0,
      max: CLUSTER_COUNT,
      left: 10,
      splitNumber: CLUSTER_COUNT,
      dimension: DIENSIION_CLUSTER_INDEX
    },
    grid: {
      top: "15%",
      left: "0",
      // right: "0",
      bottom: "0",
      containLabel: true
    },
    xAxis: {},
    yAxis: {},
    series: {
      type: 'scatter',
      encode: { tooltip: [0, 1] },
      symbolSize: 10,
      itemStyle: {
        borderColor: '#555'
      },
      data: data.map(item => {
        return {
          value: item,
          itemStyle: {
            normal: {
              color: colorArr[item.pop()],
            },
          }
        }
      }),
      datasetIndex: 1
    }
  };
  return option;
}

• colorConfig.js

let colorArr = [
    '#4EADFF',
    '#55D9FA',
    '#9CA5E9',
    '#2E98F3',
    '#5FCAD2',
    '#69C97F',
    '#F2CA30',
    '#FFA97A',
    '#DAC4AA',
    '#CF98E9',
    '#F6B4DE',
    '#F37379',
    '#98ACC3',
    '#75E4C1',
    '#BEDC63',
    '#98CFD0',
    '#9B92F1',
    '#26A479',
    '#6068B3',
    '#AE9E42',
    '#D17952'
];

export default colorArr;