当前位置：首页 > news >正文

用Vue2和Echarts画图的基本流程

news 2025/8/22 10:40:36

接上一篇博客，今天想抽空试试用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 = Papanew 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.datathis.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博客）