接上一篇博客，今天想抽空试试用Vue2画图的基本流程，问了一下百度上的DeepSeek，发现给出的例子也是用到echarts，所以这里简单总结一下。还是参考了这篇文章：

Vue2——1. 安装教程_vue2 cdn-CSDN博客

用Vue CLI这种方式，首先：

# 全局安装Vue CLI
sudo npm install -g @vue/cli

然后创建一个项目：

vue create vue-cli-demo

按照上面这篇文章的介绍：

• 出现选项时，使用方向键选择"Manually select features"
• 按空格键选择以下特性：Babel、Router、Vuex
• 选择Vue版本时，选择"2.x"
• 其他选项可保持默认

注意选择特性的时候，用空格键表示点选。

进入文件夹并直接运行：

# 进入项目目录
cd vue-cli-demo
# 运行开发服务器
npm run serve

就可以看到有Vue的页面显示了。

接下来说说用Echarts，DeepSeek给出的例子里用到了几个库，分别安装一下：

npm install vue-resource --save
npm install echarts --save
npm install papaparse --save

另外，根据上面文章的介绍，当前项目的目录结构为：

vue-cli-demo/
├── node_modules/      # 依赖包目录
├── public/            # 静态文件目录
├── src/               # 源代码目录
│   ├── assets/        # 静态资源
│   ├── components/    # 组件目录
│   ├── router/        # 路由配置
│   ├── store/         # 状态管理
│   ├── views/         # 视图组件
│   ├── App.vue        # 根组件
│   └── main.js        # 入口文件
├── .gitignore         # Git忽略文件
├── babel.config.js    # Babel配置
├── package.json       # 项目配置
└── README.md          # 项目说明

参考DeepSeek给出的例子，更新一下main.js和App.vue：

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'
import echarts from 'echarts'
import Papa from 'papaparse'

Vue.use(VueResource)
Vue.prototype.$echarts = echarts
Vue.prototype.$papa = Papa

new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div id="app">
    <h1>CSV数据可视化</h1>
    <div class="chart-container">
      <div ref="chart" style="width: 800px; height: 500px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import Papa from 'papaparse'

export default {
  name: 'App',
  data() {
    return {
      chartData: []
    }
  },
  mounted() {
    this.fetchCSVData()
  },
  methods: {
    fetchCSVData() {
      this.$http.get('/data/data.csv').then(response => {
        Papa.parse(response.data, {
          header: true,
          complete: (results) => {
            this.chartData = results.data
            this.renderChart()
          }
        })
      }).catch(error => {
        console.error('读取CSV文件失败:', error)
      })
    },
    renderChart() {
      const chart = echarts.init(this.$refs.chart)
      
      // 处理数据为ECharts需要的格式
      const xAxisData = this.chartData.map(item => item.date)
      const seriesData = this.chartData.map(item => parseFloat(item.value))

      const option = {
        title: {
          text: 'CSV数据趋势图'
        },
        tooltip: {},
        legend: {
          data: ['数值']
        },
        xAxis: {
          data: xAxisData
        },
        yAxis: {},
        series: [{
          name: '数值',
          type: 'line',
          data: seriesData
        }]
      }

      chart.setOption(option)
      
      // 响应窗口大小变化
      window.addEventListener('resize', function() {
        chart.resize()
      })
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.chart-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
</style>

将CSV文件放在public/data目录下（按照上面的Vue代码片段，读的是data.csv，并且前两列名是date和value，然后就能看到基本的效果了，如下图所示。今天就简单记录这么多。

（另外稍微补充一点，我这里还是华为云的npm镜像最快：国内npm源镜像, 指定npm镜像_华为npm镜像-CSDN博客）