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

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

文章目录

​​Vue 项目前、后端整合(图表四：产品库存)​​

​​一、配置图表四​​

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

​​（1）字体颜色​​​​（2）设置提示框组件​​​​（3）图例展示​​​​（4）堆叠柱状图​​​​（6）显示标签​​​​（7）高亮显示选中项​​​​（8）图像在容器中的位置​​

Vue 项目前、后端整合(图表四：产品库存)

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

一、配置图表四

1、基本结构搭建

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

​​返回顶部​​

2、Axios 请求数据

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

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

通过数据的格式我们可以在 ​​barData.data.chartData.chartData​​ 中获取的所需要得到数据。所以我们创建变量 ​​dataFour​​ 对其进行封装获取，并且为了使数据更容易进行配置，我们需要进行更细致的划分获取，后面配置参数的时候可以直接使用：

​​返回顶部​​

3、图表获取数据配置

注意在图标配置的时候，我们需要满足折线图数据的配置样式，每种类别为一组数据。通过上节的数据格式分析，我们获取到了​​dataFour​​，横坐标为日期信息：​​dataFour.day​​，纵坐标为每个类别的数据信息：​​dataFour.num.类别名​​，对应配置即可。

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

​​返回顶部​​

4、图标丰富

（1）字体颜色

option={ xAxis: { type: "category", data: realdata.day, // 设置坐标轴上文字颜色 axisLine: { lineStyle: { color: "#fff", }, }, }, yAxis: { type: "value", // 设置坐标轴上文字颜色 axisLine: { lineStyle: { color: "#fff", }, }, }, series: [ ............ ]}

​​Top​​

（2）设置提示框组件

option = { tooltip: { //提示框组件 trigger: "axis", // 坐标轴 axisPointer: { type: "shadow", // 阴影样式 }, }, ......}

​​Top​​

（3）图例展示

​​官网参数配置​​

option = { legend:{ // 图例 show:true // 默认显示置顶 }, xAxis:{ type:'category', data:dataFour.day }, yAxis:{ type:'value' }, series:[ .......... ]};

​​Top​​

（4）堆叠柱状图

​​官方实例​​

series: [ { name: "Chemicals", type: "bar", stack:'Total', // 堆叠样式 - 和 data: dataFour.num.Chemicals, }, { name: "Clothes", type: "bar", stack:'Total', data: dataFour.num.Clothes, }, ......]

​​Top​​

（6）显示标签

series: [ { name: "Chemicals", type: "bar", stack:'Total', // 堆叠样式 - 和 label:{ show:true // 显示标签 }, data: dataFour.num.Chemicals, }, { name: "Clothes", type: "bar", stack:'Total', label:{ show:true // 显示标签 }, data: dataFour.num.Clothes, }, ......]

​​Top​​

（7）高亮显示选中项

series: [ { name: "Chemicals", type: "bar", stack:'Total', // 堆叠样式 - 和 label:{ show:true // 显示标签 }, emphasis: { // 高亮显示当前项 focus: "series", }, data: dataFour.num.Chemicals, }, { name: "Clothes", type: "bar", stack:'Total', label:{ show:true // 显示标签 }, emphasis: { // 高亮显示当前项 focus: "series", }, data: dataFour.num.Clothes, }, ......]

​​Top​​

（8）图像在容器中的位置

grid: { //组件离容器的距离 left: "1%", right: "4%", bottom: "3%", containLabel: true,//grid 区域是否包含坐标轴的刻度标签},

​​Top​​

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