uniapp使用echarts散点图教程

UniApp是一个基于Vue.js的跨平台框架，用于构建原生应用。在UniApp中利用ECharts库绘制散点图，首先需要安装ECharts插件。以下是简单的步骤：

1. **安装依赖**:
在uni-app项目中，可以在`pages.json`文件的页面配置里引入ECharts插件：

   "dependencies": {
     " uni-charts": "^4.0.0-rc1"
   }

2. **导入并初始化ECharts**:
在需要使用ECharts的地方，如.vue文件中，导入并创建一个echarts实例：

   <template>
     <view ref="chartView" style="height: 400px; width: 800px;"></view>
   </template>

   <script>
   import { ECharts } from 'uni-charts';

   export default {
     data() {
       return {
         myChart: null,
       };
     },
     created() {
       this.myChart = ECharts.init(this.$refs.chartView);
     },
   }
   </script>

3. **创建散点图数据**:
准备好你要展示的数据，例如：

   const scatterData = [
     { x: 'A', y: 5 },
     { x: 'B', y: 20 },
     { x: 'C', y: 36 },
     // ... 更多数据项
   ];

4. **配置散点图**:
使用`setOption`方法设置图表选项，包括系列、坐标轴等：

   created() {
     this.myChart.setOption({
       series: [{
         type: 'scatter',
         name: '散点图',
         data: scatterData,
         symbolSize: function (val) {
           return val * 5;
         },
       }],
       xAxis: {
         data: ['A', 'B', 'C'] // 坐标轴标签
       },
       yAxis: {
         type: 'value'
       }
     });
   }

5. **显示图表**:
调用`resize`方法确保图表适应屏幕大小，并渲染：

   ready() {
     this.myChart.resize();
   },
   onShow() {
     this.myChart.resize();
   },
   onHide() {
     this.myChart.dispose(); // 当不需要时可以释放资源
   }