-
Ubuntu 18.04
-
node v16.19.0
-
npm 8.19.3
1、 进入实验环境后, 点击左上角收缩实验指南 
2、 点击环境左上角的“三个横线”的标志,如下图。 最后点击“终端”。 
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/second";: 定义了一个变量 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/second";
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，选择”格式化文档”进行代码格式化。 
—
对下面核心代码的解释： 1、 data.map(function(item) { ... }): 这里使用了 map 函数，它对数组 data 的每个元素都调用一次提供的回调函数。在这个回调函数中，item 是数组 data 中的每个元素。 2、return { name: item.region_name, value: parseInt(item.consumption) };: 在回调函数中，对每个 data 中的元素进行了转换。 创建了一个新的对象，该对象有两个属性： (1) name: 设置为 item.region_name，表示每个元素的地区名。 (2) value: 设置为 parseInt(item.consumption)，表示每个元素的消费值。parseInt 用于将 item.consumption 转换为整数。 通过这个 map 函数，对 data 数组中的每个元素进行了转换，将每个元素映射为一个新的对象，包含了地区名和对应的消费值。 这样，最终得到的 seriesData 数组中的每个元素都是一个包含地区名和消费值的对象，可以用于后续的玫瑰图的展示。
<script>
import axios from "axios";
import * as echarts from "echarts";
export default {
mounted() {
var url = "http://101.227.82.75:12588/api/second";
axios.get(url).then((response) => {
var data = response.data.data;
var seriesData = data.map(function(item) {
return {
name: item.region_name,
value: parseInt(item.consumption)
};
});
// 将用于图表展示的数据结构在浏览器的console中进行打印输出
console.log(data)
var myChart = echarts.init(document.getElementById("main"));
// 创建柱状图
var options = {
title: {
text: '2020年各地区消费总额占比',
x: 'center'
},
series: [
{
type: 'pie',
radius: '75%',
data: seriesData,
roseType: 'area'
}
]
};
myChart.setOption(options);
});
},
name: 'MyChart'
};
</script>
编辑好后，使用npm run serve运行项目，如成功运行，点击预览首页，可以看到如下效果: 
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
暂无评论内容