uni-app 四象限散点图

在uni-app中实现四象限散点图，你可以使用ECharts这个强大的数据可视化库。ECharts提供了丰富的图表类型，包括散点图，并且你可以通过自定义系列和坐标轴来实现四象限的划分。

以下是一个简单的uni-app项目示例，展示如何集成ECharts并实现四象限散点图。

1. 安装ECharts

首先，你需要在uni-app项目中安装ECharts。你可以使用npm或者yarn进行安装：

npm install echarts --save
# 或者
yarn add echarts

2. 创建组件

在components目录下创建一个名为QuadrantScatter.vue的组件，用于绘制四象限散点图。

<template>
  <view class="container">
    <ec-canvas id="mychart-dom-scatter" canvas-id="mychart-scatter" ec="{{ ec }}"></ec-canvas>
  </view>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      ec: {
        onInit: this.initChart
      }
    };
  },
  methods: {
    initChart(canvas, width, height, dpr) {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);

      const option = {
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          symbolSize: 20,
          data: [
            [10, 10], [20, 20], [-10, -10], [-20, 20], [20, -20]
          ],
          type: 'scatter'
        }],
        markLine: {
          lineStyle: {
            type: 'dashed'
          },
          data: [
            { xAxis: 0, yAxis: 0 },
            { xAxis: 100, yAxis: 0 },
            { xAxis: 0, yAxis: 100 },
            { xAxis: 100, yAxis: 100 }
          ]
        }
      };

      chart.setOption(option);
      return chart;
    }
  }
};
</script>

<style>
.container {
  width: 100%;
  height: 500rpx;
}
</style>

3. 使用组件

在你的页面中使用这个组件：

<template>
  <view>
    <QuadrantScatter />
  </view>
</template>

<script>
import QuadrantScatter from '@/components/QuadrantScatter.vue';

export default {
  components: {
    QuadrantScatter
  }
};
</script>

4. 运行项目

确保你已经安装了uni-app的开发环境，然后运行项目：

npm run dev

这个示例展示了如何在uni-app中使用ECharts绘制一个简单的四象限散点图。你可以根据需要调整data中的坐标点，以及markLine的样式和位置，来更好地展示你的数据。