Vue echarts实现散点图
安装依赖
确保项目中已安装Vue和ECharts。通过npm或yarn安装ECharts：
npm install echarts --save引入ECharts
在Vue组件中引入ECharts核心模块和需要的图表类型（如散点图）：
import * as echarts from 'echarts';准备DOM容器
在Vue组件的模板中添加一个DOM元素作为图表容器：
<template>
<div ref="chart" style="width: 600px; height: 400px;"></div>
</template>初始化图表
在Vue组件的mounted钩子中初始化图表并绑定数据：
export default {
mounted() {
const chartDom = this.$refs.chart;
const myChart = echarts.init(chartDom);
const option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
series: [{
type: 'scatter',
data: [
[10, 20],
[15, 30],
[20, 25],
[25, 40]
]
}]
};
myChart.setOption(option);
}
};自定义样式与交互
通过ECharts配置项调整散点图的样式和交互行为。例如添加标签、调整点的大小和颜色：
series: [{
type: 'scatter',
symbolSize: 20,
itemStyle: {
color: '#c23531'
},
label: {
show: true,
formatter: '{b}'
},
data: [
{ value: [10, 20], name: 'Point A' },
{ value: [15, 30], name: 'Point B' }
]
}]响应式调整
监听窗口大小变化并调用ECharts的resize方法：
window.addEventListener('resize', () => {
myChart.resize();
});销毁实例
在组件销毁时移除监听并销毁图表实例以避免内存泄漏：
beforeDestroy() {
window.removeEventListener('resize', this.resizeHandler);
this.myChart.dispose();
}动态数据更新
通过Vue的响应式机制或方法更新图表数据：
methods: {
updateChart(newData) {
this.myChart.setOption({
series: [{
data: newData
}]
});
}
}
