-
Ubuntu 18.04
-
node v16.19.0
-
npm 8.19.3
1、 进入实验环境后, 点击左上角收缩实验指南 
2、 点击环境左上角的“三个横线”的标志,如下图。 最后点击“终端”。 
3、 会在右下方看到打开的终端，可直接在终端中进行操作。 
—
使用yarn命令安装vue cli
yarn global add @vue/cli
安装完成后，可以在终端看到下面的输出： 
输入下面的命令确认vue cli安装成功
yarn global list
vue --version
—
在当前目录创建vue.js初始项目
vue create .
会看到下面的提示询问是否创建，输入Y然后使用Enter键确认 
然后选择要创建vue项目的版本，我们使用方向键将光标移动到Default ([Vue 2] babel, eslint)，创建 Vue 2项目: 
创建成功会有下面的样子 
如果出现下图的git相关的Error信息，不用理会即可 
预览创建好的vue.js初始项目 使用npm命令启动项目:
npm run serve
成功启动，会显示下图 
在文本编辑框内单击鼠标右键，弹出的菜单选项栏里，选择”网站首页预览”。 
在浏览器弹出的新标签里，可以预览正在运行的vue.js项目的效果。 
预览完毕，可以在终端输入 Ctrl + C 键停止项目运行，回到终端输入。 
安装导入echarts和axios 使用Yarn包管理器安装两个不同的 JavaScript 包。 1、 ECharts 是一个基于 JavaScript 的可视化图表库，用于创建交互式和动态的图表。在项目中添加 ECharts，以便在前端页面中使用其强大的图表功能。 2、 Axios 是一个用于在浏览器和 Node.js 环境中进行 HTTP 请求的 JavaScript 库。通过 Axios，可以方便地在前端或后端代码中进行数据请求和交互，例如从服务器获取数据或将数据发送到服务器。
yarn add echarts axios
安装成功，会有下面的结果 
—
编辑 src/App.vue 文件： 1、 修改template标签内的<div>里的内容，替换为 MyCharts 组件。
<template>
<div id="app">
<MyCharts/>
</div>
</template>
2、 修改script标签内的 import 语句，改为导入 MyCharts.vue 组件。
<script>
import MyCharts from './components/MyCharts.vue'
export default {
name: 'App',
components: {
MyCharts
}
}
</script>
—
创建 src/components/MyCharts.vue文件。 鼠标点击components文件夹，然后点击创建文件的图标。 
输入MyCharts.vue并点击回车确定创建，创建成功如下图： 
编辑 src/components/MyCharts.vue 文件写出基本模板:
<template></template>
<script></script>
<style></style>
<template></template> 中添加让<div></div>标签用于图表显示:
<template>
<div id="main" style="width: 1000px; height: 400px"></div>
</template>
<style>
#main {
margin: auto;
}
</style>
大致解释模板代码的含义: 1、 <script></script> 中添加模板代码导入axios和echarts库。 2、 export default { ... }: 是一个 Vue.js 组件的导出，其中包含了组件的各种选项和生命周期钩子。 3、 mounted() { ... }: 这是 Vue.js 组件的生命周期钩子之一，在组件挂载到DOM后触发。在这里，发起了一个HTTP GET请求，获取数据并使用 ECharts 创建图表。 4、 var url = "http://101.227.82.75:12588/api/five";: 定义了一个变量 url，用于存储API的地址，比赛时需要根据具体的API地址进行替换。 5、 axios.get(url).then((response) => { ... });: 使用 Axios 发起GET请求，获取数据。一旦请求成功，将会执行回调函数。在这个回调函数中，提取了响应中的数据，并进行处理。 6、 const myChart = echarts.init(document.getElementById("main"));: 使用 ECharts 的 init 方法初始化一个图表实例，该实例将会在具有 id="main" 的HTML元素上进行渲染。 7、 var options = { ... };: 定义了一个包含 ECharts 图表配置选项的对象。这个对象包括了图表的标题、提示框、图例、x轴、y轴以及表类型等配置。 8、 myChart.setOption(options);: 将配置选项应用到图表实例上，从而设置图表的样式和数据。 模板代码的主要作用是通过HTTP请求获取数据，然后使用ECharts在HTML元素中渲染一个图表，其中图表的样式和数据由配置选项 options 决定。
<script>
import axios from "axios";
import * as echarts from "echarts";
export default {
mounted() {
var url = "http://101.227.82.75:12588/api/five";
axios.get(url).then((response) => {
var data = response.data.data;
var myChart = echarts.init(document.getElementById("main"));
var options = {
title: {},
tooltip: {},
legend: {},
xAxis: {},
yAxis: {},
series: [],
};
myChart.setOption(options);
});
},
name: "MyCharts"
};
</script>
编辑好后，可以点击左下角齿轮图标，选择”命令面板”，或直接按 F1键调出”命令面板”。 输入format，选择”格式化文档”进行代码格式化。 
—
<script>
import axios from "axios";
import * as echarts from "echarts";
export default {
mounted() {
var url = "http://101.227.82.75:12588/api/five";
axios.get(url).then((response) => {
var data = response.data.data;
// 将数据按照 total_amount 排序
data.sort(function(a, b) {
return parseInt(b.provinceavgconsumption) - parseInt(a.provinceavgconsumption);
});
// 取前 5 个省份的数据
var top5Provinces = data.slice(0, 5);
// 处理前 5 个省份的地区平均消费额
top5Provinces.forEach(function(region) {
// 将中位数字符串转换为浮点数
var regionavgconsumptionFloat = parseFloat(region.regionavgconsumption);
// toFixed(2)四舍五入并将数字保留两位小数
var roundedRegionavgconsumption = regionavgconsumptionFloat.toFixed(2);
// 将处理后的中位数更新回对象
region.regionavgconsumption = roundedRegionavgconsumption
});
// 处理前 5 个省份平均消费额
top5Provinces.forEach(function(province) {
// 将中位数字符串转换为浮点数
var provinceavgconsumptionFloat = parseFloat(province.provinceavgconsumption);
// toFixed(2)四舍五入并将数字保留两位小数
var roundedProvinceavgconsumption = provinceavgconsumptionFloat.toFixed(2);
// 将处理后的中位数更新回对象
province.provinceavgconsumption = roundedProvinceavgconsumption
});
// 准备图表数据
var regionAvgConsumption = top5Provinces.map(entry => entry.regionavgconsumption);
var topProvinceNames = top5Provinces.map(entry => entry.provincename);
var provinceAvgConsumption = top5Provinces.map(entry => entry.provinceavgconsumption);
// 将用于图表展示的数据结构在浏览器的console中进行打印输出
console.log("地区平均消费额", regionAvgConsumption)
console.log("省份", topProvinceNames);
console.log("省份平均消费额", provinceAvgConsumption);
var myChart = echarts.init(document.getElementById("main"));
var options = {
title: {
text: '2020年各省份平均消费额和地区平均消费额对比'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['地区平均消费额', '省份平均消费额']
},
xAxis: {
type: 'category',
data: topProvinceNames
},
yAxis: {
type: 'value'
},
series: [
{
name: '地区平均消费额',
type: 'line',
data: regionAvgConsumption
},
{
name: '省份平均消费额',
type: 'bar',
data: provinceAvgConsumption
}
]
};
myChart.setOption(options);
});
},
name: 'MyChart'
};
</script>
编辑好后，使用npm run serve运行项目，如成功运行，点击预览首页，可以看到如下效果: 
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
暂无评论内容