【Vue】Vue 项目前、后端整合(图表一：销售总量)

【Vue】Vue 项目前、后端整合(图表一：销售总量)

文章目录

​​Vue 项目前、后端整合(图表一)​​

​​一、配置图表一​​

​​1、基本结构搭建​​​​2、Axios 请求数据​​​​3、CORS 跨域请求​​​​4、基准路径配置​​​​5、获取数据​​​​6、图表数据配置​​​​7、图表丰富​​

​​（1）图表渐变色​​​​（2）图形圆角​​​​（3）图像位置​​​​（4）标签文字颜色​​​​（5）坐标轴文字颜色​​

Vue 项目前、后端整合(图表一)

一、配置图表一

1、基本结构搭建

在​​vue/app​​目录下的​​components​​文件夹下的 ​​itemOne.vue​​中,设置图表1:

通过如上的修改，我们可以发现项目运行后的界面还是没有显示图形。那是因为我们还没有将数据设置到 ​​echarts​​ 中去。

​​返回顶部​​

2、Axios 请求数据

接下来我们需要图表展示的数据(后台 ​​server​​ 提供)，我们需要在组件内容请求数据，就需要引入 ​​axios​​组件：

配置好后，保存刷新页面，可以发现这里报了错，连不上请求的连接地址？！原因是我们启动了​​vue​​项目后没有开启后端的​​server服务​​：

开启后端的server服务后：

发现开启​​server​​服务后，有报了错：​​跨域请求​​

​​返回顶部​​

3、CORS 跨域请求

​​跨源资源共享​​ (​​CORS​​)（或通俗地译为跨域资源共享）是一种基于 ​​HTTP​​ 头的机制，该机制通过允许服务器标示除了它自己以外的其它​​origin​​（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。

跨源HTTP请求的一个例子：运行在 ​​的 JavaScript 代码使用 ​​​XMLHttpRequest​​​ 来发起一个到 ​​的请求。（类似我们项目中的情况）

跨源域资源共享（​​CORS​​）机制允许 Web 应用服务器进行跨源访问控制，从而使跨源数据传输得以安全进行。现代浏览器支持在 API 容器中（例如 ​​​XMLHttpRequest​​​ 或 ​​Fetch​​）使用 CORS，以降低跨源 HTTP 请求所带来的风险。

我们需要在 ​​server​​ 中的 ​​index.js​​ 中配置跨域：

// 设置跨域请求app.use(function(req,res,next){ res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS'); next();})

设置完成后记得保存，我们重新打开 ​​server​​ 服务：

​​返回顶部​​

4、基准路径配置

上面一步我们已经成功的将 图表一的数据获取到并输出到了控制台中，其余的图表配置按照图表一的来就行了。这时我们会发现在使用 ​​axios​​ 进行请求的时候，请求连接的前半段 ​​是保持不变的，每次都需要重写。并且在工作项目中，url地址会时常发生变动，所以通过 ​​基准路径的配置​​ 简化开发

在 ​​App.vue​​ 中，我们可以来设置基准路径：

配置完成后保存刷新页面，​​F12​​ 打开页面控制台就会出现结果：

​​返回顶部​​

6、图表数据配置

在获取到数据之后，我们按照正常的处理流程，将代码顺序进行一定的调整，并将其全部放置在 onMounted 钩子函数中。

// 调用生命周期函数onMounted(() => { // 初始化 echarts var myChart = $echarts.init(document.getElementById("oneChart")); // 调用请求 getData().then(() => { // 调用数据处理 setData(); // 配置图表参数 var option = null; option = { xAxis: { type: "value", }, yAxis: { type: "category", data: xdata, }, series: [ { type: "bar", data: ydata, }, ], }; // 导入参数 myChart.setOption(option); });

保存之后打开页面刷新可以看到初步的图形已经显现了：

​​返回顶部​​

7、图表丰富

（1）图表渐变色

在使用echarts绘制图表时, 如果需要使用​​渐变色​​, 则应使用echarts内置的渐变色生成器​​echarts.graphic.LinearGradient​​

itemStyle: { normal: { // 颜色渐变函数 前四个参数分别表示四个位置依次为 // 右下左上 color: new $echarts.graphic.LinearGradient( 0,0,1,0, // 第五个参数表示线条渐变色 [ { offset: 0, color: "#005eaa", }, { offset: 0.5, color: "#339ca8", }, { offset: 1, color: "#cda819", } ] ), },},

​​TOP​​

（2）图形圆角

​​barBorderRadius​​：[ 左上角参数1, 右上角参数2, 右下角参数3, 左下角参数4]参数越大，弧度越大

itemStyle: { normal: { // 图形圆角配置 barBorderRadius:[0,20,20,0], // 颜色渐变函数 前四个参数分别表示四个位置依次为 // 右下左上 color: new $echarts.graphic.LinearGradient( 0,0,1,0, // 第五个参数表示线条渐变色 [ { offset: 0, color: "#005eaa", }, { offset: 0.5, color: "#339ca8", }, { offset: 1, color: "#cda819", } ] ), },},

​​TOP​​

（3）图像位置

​​grid​​：直角坐标系内绘图网格

option = { // 配置图标的位置 不包含坐标轴中的文字 grid:{ top:'3%', left:'1%', bottom:'3%', right:'6%', containLabel:true // 包含坐标轴中的文字 }, .............}

​​TOP​​

（4）标签文字颜色

​​label​​：设置文本标签

// 设置图形上的文字label:{ show:true, // 显示数值 position:'right',//位置 textStyle:{ color:'#fff' }},

​​TOP​​

（5）坐标轴文字颜色

刻度标签文字的颜色，默认取 ​​axisLine.lineStyle.color​​

: { type: "value", // 设置坐标轴上文字颜色 axisLine: { lineStyle: { color: "#fff", }, }, }, yAxis: { type: "category", data: xdata, // 设置坐标轴上文字颜色 axisLine: { lineStyle: { color: "#fff", }, }, },

​​TOP​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。