Vue导入Echarts实现散点图 axios解析excel流数据 echarts数据可视化前端展示

**Vue导入Echarts实现散点图**

在本文中，我们将使用Vue.js和ECharts库来创建一个简单的散点图。我们还将使用Axios库来解析Excel流数据。

### 安装依赖首先，我们需要安装必要的依赖：

bashnpm install echarts axios

html<template>
 <div id="chart" style="width:800px;height:600px;"></div>
</template>

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

export default {
 name: 'EChartDemo',
 data() {
 return {
 chartData: []
 }
 },
 mounted() {
 this.initChart();
 },
 methods: {
 initChart() {
 // 初始化echart let myChart = echarts.init(document.getElementById('chart'));
 // 解析Excel流数据 axios.get('/api/excel', { responseType: 'stream' })
 .then(response => {
 const reader = new FileReader();
 reader.onload = () => {
 const data = JSON.parse(reader.result);
 this.chartData = data;
 myChart.setOption({
 xAxis: {
 type: 'category',
 data: data.map(item => item.name)
 },
 yAxis: {
 type: 'value'
 },
 series: [{
 name: '值',
 type: 'scatter',
 data: data.map(item => [item.x, item.y])
 }]
 });
 };
 reader.readAsText(response.data);
 })
 .catch(error => console.error(error));
 }
 }
}
</script>

javascriptaxios.get('/api/excel', { responseType: 'stream' })
 .then(response => {
 const reader = new FileReader();
 reader.onload = () => {
 const data = JSON.parse(reader.result);
 this.chartData = data;
 // ...
 };
 reader.readAsText(response.data);
 })
 .catch(error => console.error(error));

javascriptmyChart.setOption({
 xAxis: {
 type: 'category',
 data: data.map(item => item.name)
 },
 yAxis: {
 type: 'value'
 },
 series: [{
 name: '值',
 type: 'scatter',
 data: data.map(item => [item.x, item.y])
 }]
});