Vue echarts实现散点图

Vue ECharts 实现散点图

安装 ECharts

在 Vue 项目中安装 ECharts 依赖：

npm install echarts --save

引入 ECharts

在组件中引入 ECharts 核心模块和需要的图表类型：

import * as echarts from 'echarts';

创建图表容器

在模板中添加一个容器元素，用于渲染图表：

<template>
  <div id="scatter-chart" style="width: 600px; height: 400px;"></div>
</template>

初始化图表

在 mounted 钩子中初始化图表并配置散点图选项：

mounted() {
  this.initScatterChart();
},
methods: {
  initScatterChart() {
    const chartDom = document.getElementById('scatter-chart');
    const myChart = echarts.init(chartDom);

    const option = {
      title: {
        text: '散点图示例'
      },
      tooltip: {},
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        type: 'scatter',
        data: [
          [10, 20],
          [15, 30],
          [20, 25],
          [25, 40],
          [30, 35]
        ]
      }]
    };

    myChart.setOption(option);
  }
}

响应式调整

监听窗口大小变化，动态调整图表大小：

window.addEventListener('resize', () => {
  if (this.myChart) {
    this.myChart.resize();
  }
});

自定义样式

通过配置项自定义散点图的样式，例如颜色、大小等：

series: [{
  type: 'scatter',
  symbolSize: 20,
  itemStyle: {
    color: '#c23531'
  },
  data: [
    [10, 20],
    [15, 30],
    [20, 25],
    [25, 40],
    [30, 35]
  ]
}]

动态数据更新

通过方法更新图表数据，实现动态渲染：

updateChartData(newData) {
  this.myChart.setOption({
    series: [{
      data: newData
    }]
  });
}

销毁图表

在组件销毁前移除图表实例，避免内存泄漏：

beforeDestroy() {
  if (this.myChart) {
    this.myChart.dispose();
  }
}