【Vue】Vue 项目前、后端整合(图表二：产品月销曲线堆叠图)

【Vue】Vue 项目前、后端整合(图表二：产品月销曲线堆叠图)

文章目录

​​Vue 项目前、后端整合(图表二：产品月销曲线堆叠图)​​

​​一、配置图表二​​

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

​​（1）字体颜色​​​​（2）设置提示框组件​​​​（3）图例展示​​​​（4）平滑曲线​​​​（5）堆叠曲线图​​​​（6）堆叠面积填充​​​​（7）设置曲线宽度​​​​（8）隐藏所有数据点​​​​（9）高亮显示选中项​​​​（10）坐标轴两边留白策略​​​​（11）图像在容器中的位置​​

Vue 项目前、后端整合(图表二：产品月销曲线堆叠图)

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

一、配置图表二

1、基本结构搭建

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

​​返回顶部​​

2、Axios 请求数据

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

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

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

​​返回顶部​​

3、图表获取数据配置

注意在图标配置的时候，我们需要满足折线图数据的配置样式，每种类别为一组数据。通过上节的数据格式分析，我们获取到了​​realData​​，横坐标为日期信息：​​realdata.day​​，纵坐标为每个类别的数据信息：​​realdata.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: "cross", // 十字样式 }, }, ......}

提示器坐标轴背景修改：

tooltip: { //提示框组件 trigger: "axis", axisPointer: { type: "cross", label: { //坐标轴指示器的文本标签 backgroundColor: "#000", //文本标签的背景颜色就是x轴y轴上的内容 }, },},

​​Top​​

（3）图例展示

​​官网参数配置​​

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

​​Top​​

（4）平滑曲线

series: [ { name: "Chemicals", type: "line", smooth:true, // 平滑模式开启 data: realdata.num.Chemicals, }, { name: "Clothes", type: "line", smooth:true, data: realdata.num.Clothes, }, ......]

​​Top​​

（5）堆叠曲线图

​​官方实例​​

series: [ { name: "Chemicals", type: "line", smooth:true, // 平滑模式开启 stack:'Total', // 堆叠样式 - 和 data: realdata.num.Chemicals, }, { name: "Clothes", type: "line", smooth:true, stack:'Total', data: realdata.num.Clothes, }, ......]

​​Top​​

（6）堆叠面积填充

series: [ { name: "Chemicals", type: "line", smooth: true, // 平滑模式开启 stack: "Total", // 堆叠样式 - 和 areaStyle: { // 堆叠区域样式 --- 渐变色填充 color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(128, 255, 165)", }, { offset: 1, color: "rgb(1, 191, 236)", }, ]), }, data: realdata.num.Chemicals, }, { name: "Clothes", type: "line", smooth: true, stack: "Total", areaStyle: { opacity: 0.8, color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(0, 221, 255)", }, { offset: 1, color: "rgb(77, 119, 255)", }, ]), }, data: realdata.num.Clothes, }, { name: "Electrical", type: "line", smooth: true, stack: "Total", areaStyle: { opacity: 0.8, color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(55, 162, 255)", }, { offset: 1, color: "rgb(116, 21, 219)", }, ]), }, data: realdata.num.Electrical, }, { name: "digit", type: "line", smooth: true, stack: "Total", areaStyle: { opacity: 0.8, color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(255, 0, 135)", }, { offset: 1, color: "rgb(135, 0, 157)", }, ]), }, data: realdata.num.digit, }, { name: "gear", type: "line", smooth: true, stack: "Total", areaStyle: { opacity: 0.8, color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(255, 191, 0)", }, { offset: 1, color: "rgb(224, 62, 76)", }, ]), }, data: realdata.num.gear, }, ],

默认填充：

渐变色填充：

​​Top​​

（7）设置曲线宽度

series: [ { name: "Chemicals", type: "line", data: realdata.num.Chemicals, smooth: true, // 平滑模式开启 stack: "Total", // 堆叠样式 - 和 lineStyle: { // 设置线段样式 width: 0, }, areaStyle: { // 堆叠区域样式 color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(128, 255, 165)", }, { offset: 1, color: "rgb(1, 191, 236)", }, ]), }, }, ......]

​​Top​​

（8）隐藏所有数据点

series: [ { name: "Chemicals", type: "line", data: realdata.num.Chemicals, smooth: true, // 平滑模式开启 stack: "Total", // 堆叠样式 - 和 showSymbol: false,// 隐藏所有数据点 lineStyle: { // 设置线段样式 width: 0, }, areaStyle: { // 堆叠区域样式 color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(128, 255, 165)", }, { offset: 1, color: "rgb(1, 191, 236)", }, ]), }, }, ......]

​​Top​​

（9）高亮显示选中项

series: [ { name: "Chemicals", type: "line", data: realdata.num.Chemicals, smooth: true, // 平滑模式开启 stack: "Total", // 堆叠样式 - 和 showSymbol: false,// 隐藏所有数据点 lineStyle: { // 设置线段样式 width: 0, }, emphasis: { //设置高亮的图形样式和标签样式 focus: "series", //只显示选中的内容高亮 }, areaStyle: { // 堆叠区域样式 color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgb(128, 255, 165)", }, { offset: 1, color: "rgb(1, 191, 236)", }, ]), }, }, ......]

​​Top​​

（10）坐标轴两边留白策略

xAxis: { type: "category", data: realdata.day, boundaryGap: false, // 设置坐标轴上文字颜色 axisLine: { lineStyle: { color: "#fff", }, },},

​​Top​​

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

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

​​Top​​

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