【Vue】Vue 项目前、后端整合(图表三：产品库存统计饼图)

【Vue】Vue 项目前、后端整合(图表三：产品库存统计饼图)

文章目录

​​Vue 项目前、后端整合(图表三：产品库存统计饼图)​​

​​一、配置图表三​​

​​1、基本结构搭建​​​​2、Axios 请求数据​​​​3、图表获取数据配置​​​​4、图标丰富​​

​​（1）饼图半径、位置​​​​（2）并图样式：玫瑰图​​​​（3）图形样式：圆角​​​​（4）图例展示​​​​（5）提示框组件​​

Vue 项目前、后端整合(图表三：产品库存统计饼图)

​​Vue 项目后端接口框架搭建​​中，我们已经配置好了图表三中的数据，这里直接调用接口就行了。

一、配置图表三

1、基本结构搭建

在​​vue/app​​目录下的​​components​​文件夹下的 ​​itemThree.vue​​中,设置图表3，初始化​​echarts​​:

​​返回顶部​​

2、Axios 请求数据

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

配置完成后，记得运行 ​​server​​，然后运行 ​​app​​，在页面控制台中查看打印的数据：

​​返回顶部​​

3、图表获取数据配置

通过数据的格式我们可以在 ​​pieData.data.chartData.chartData​​ 中获取的所需要得到数据。所以我们创建变量 ​​realdata​​ 对其进行封装获取并且其数据格式符合​​饼图数据格式​​，后面配置参数的时候可以直接使用：

如下图所示，基本的饼图样式就已经出来了：

​​返回顶部​​

4、图标丰富

（1）饼图半径、位置

option = { series: [ { type: "pie", data:realdata, radius:["5%","60%"], // 两个参数表示内、外半径 center:['50%','50%'] // 两个参数表示横、纵位置 }, ],};

​​Top​​

（2）并图样式：玫瑰图

option = { series: [ { type: "pie", data:realdata, radius:["5%","60%"], // 两个参数表示内、外半径 center:['50%','50%'], // 两个参数表示横、纵位置 roseType:'area' // 玫瑰图：area样式 }, ],};

​​Top​​

（3）图形样式：圆角

option = { series: [ { type: "pie", data:realdata, radius:["5%","60%"], // 两个参数表示内、外半径 center:['50%','45%'], // 两个参数表示横、纵位置 roseType:'area', // 玫瑰图：area样式 itemStyle:{ borderRadius:10 // 配置圆角 } }, ],};

​​Top​​

（4）图例展示

​​官网参数配置​​

option = { legend:{ // 图例 top:'bottom' // 放在底部 }, series: [ { type: "pie", data:realdata, radius:["5%","60%"], // 两个参数表示内、外半径 center:['50%','45%'], // 两个参数表示横、纵位置 roseType:'area', itemStyle:{ borderRadius:10 // 配置圆角 } }, ],};

​​Top​​

（5）提示框组件

option = { tooltip:{ // 提示框组件 show:true, //formatter:"{a}
{b} : {c} | {d}%" // 格式化内容 }, legend:{ // 图例 top:'bottom' // 放在底部 }, series: [ { name:'库存统计', type: "pie", data:realdata, radius:["5%","60%"], // 两个参数表示内、外半径 center:['50%','45%'], // 两个参数表示横、纵位置 roseType:'area', // 玫瑰图：area样式 itemStyle:{ borderRadius:10 // 配置圆角 } }, ],};

默认样式：

格式化后：

​​Top​​

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