vue+echarts生成图表步骤
(一) 安装配置 Node.js
1、下载安装 Node.js
下载地址：https://nodejs.org/zh-cn/ 。
文件名：node-v16.13.1-x64.msi。
2、检测 PATH 环境变量
点击 开始 => 运行 => "cmd" 。
运行 "path" ，确认输出结果中包含：C:\Program Files\nodejs\。
3、检查 Node.js 版本
运行 "node --version" ，确认输出结果：v16.13.0 。
(二) 安装配置 Visual Studio Code
1、下载 Visual Studio Code
下载地址：https://code.visualstudio.com/ 。
文件名：VSCodeUserSetup-x64-1.63.0 。
2、安装 Visual Studio Code
在安装过程中，勾选 "添加到PATH" 。
3、配置语言
打开插件面板，搜索 Chinese ，安装 Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 。
4、安装插件
依次安装插件：HTML CSS Support 、ESLint 、Vetur 、vue-helper 。
二、新建项目
(一) 启动命令行工具
1、右键 开始 ，点击 windows powershell (管理员) ，打开命令行。
2、执行 D: 命令，切换至D盘。
(二) 创建项目
依次执行以下命令：
1、执行 npm install -g @vue/cli 来安装 vue 客户端工具 。
2、执行 vue create dataview 来初始化项目，在选择列表中选择 Default (Vue 3 Preview) ，然后回车安装。
三、工作区
(一) 打开项目
1、启动 Visual Studio Code 。
2、点击 文件 => 打开文件夹 ，选择D盘下的 dataview 文件夹。
(二) 打开终端
1、点击 查看 => 终端 。
(三) 运行项目
1、执行 npm run serve 来运行项目。
2、启动浏览器并访问：http://localhost:8080/ 。
四、组件
(一) 新建组件
1、在 src/components 目录下新增 Covid.vue 文件。
(二) 根标签
所有组件由 template 、script 、style 三个标签组成。
template 标签内必须且只能有一个子标签。
示例代码如下：
<template>
<div id="main"></div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<style>
#main { width: 600px; height: 400px; }
</style>
(三) 注册组件
1、在 App.vue 中注册组件：
<template>
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<!-- 第3步：添加组件 -->
<Covid />
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
// 第1步：导入组件
import Covid from './components/Covid.vue'
export default {
name: 'App',
components: {
// HelloWorld
// 第2步：注册组件
Covid
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
五、添加数据
(一) 添加数据文件
以下操作二选一，视情况而定：
1、在 public 目录下新增 covid.json 文件，将数据拷贝并粘贴到文件中。
2、将数据文件拷贝并粘贴到 public 目录下。
(二) 配置 axios
1、点击 终端 => 新建终端 ，运行 npm install axios 命令安装 axios 。（若项目中已提供，则跳过此步骤）
2、打开 main.js 文件，全局注册 axios ：
// 旧代码：
// import { createApp } from 'vue'
// import App from './App.vue'
// createApp(App).mount('#app')
// 新代码：
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 全局注册axios
import axios from 'axios'
app.config.globalProperties.$http = axios
app.mount('#app')
(三) 读取数据
1、在 Covid.vue 中请求 covid.json 数据。
<script>
export default {
mounted() {
this.loadData()
},
methods: {
loadData() {
// 发起get请求，真实场景中将路径更换为webapi地址
this.$http.get('covid.json', {})
.then((res) => {
// 输出读取到的数据
console.log(res.data)
})
}
}
}
</script>
2、此时刷新 http://localhost:8080/ 页面，即可看到 Console 控制台输出的数据。
六、配置图表
(一) 配置 echarts
1、拷贝 echarts.min.js 到 public 目录下。
2、在 Covid.vue 中导入 echarts ：
<script>
// 第1步：导入echarts
const echarts = require('../../public/echarts.min.js')
export default {
mounted() {
this.loadData()
},
methods: {
loadData() {
// 发起get请求，真实场景中将路径更换为webapi地址
this.$http.get('covid.json', {})
.then((res) => {
// 输出读取到的数据
console.log(res.data)
// 第2步：图表默认配置
const option = {
title: {
text: '新冠数据统计'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
}
]
}
// 第3步：渲染图表
var chartDom = document.getElementById('main')
var myChart = echarts.init(chartDom)
myChart.setOption(option)
})
}
}
}
</script>
(二) 转换数据
1、生成 legend 、xAxis 、series 中所需求的数据，更新配置：
<script>
// 第1步：导入echarts
const echarts = require('../../public/echarts.min.js')
export default {
mounted() {
this.loadData()
},
methods: {
loadData() {
// 发起get请求，真实场景中将路径更换为webapi地址
this.$http.get('covid.json', {})
.then((res) => {
// 输出读取到的数据
console.log(res.data)
// 第2步：图表默认配置
const option = {
title: {
text: '新冠数据统计'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
}
]
}
// 第4步：生成数据
var legendArr = ['累计确诊总数', '累计出院', '接受医学观察']
var xaxisArr = []
var ljqzzsArr = []
var ljcyArr = []
var jsyxgcArr = []
var dataArr = res.data.data
for (var i = 0; i < dataArr.length; i++) {
xaxisArr.push(dataArr[i].jzrq)
ljqzzsArr.push(dataArr[i].ljqzzs)
ljcyArr.push(dataArr[i].ljcy)
jsyxgcArr.push(dataArr[i].jsyxgc)
}
// 第5步：更新配置
option.legend.data = legendArr
option.xAxis.data = xaxisArr
option.series[0].name = '累计确诊总数'
option.series[