0
点赞
收藏
分享

微信扫一扫

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

老北京的热干面 2022-03-31 阅读 5
vueexpressecharts

文章目录

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

一、配置图表二

1、基本结构搭建

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

<template>
  <div>
    <h2>产品月销</h2>
    <div class="chart" id="chartTwo">
      <!-- 图表容器 -->
    </div>
  </div>
</template>

<script>
import { inject, reactive, onMounted } from "vue";

export default {
  setup() {
    // 获取echarts对象
    var $echarts = inject("echarts");

    // 钩子
    onMounted(() => {
      // 初始化echarts
      var myChart = $echarts.init(document.getElementById("chartTwo"));
      // 配置项
      var option = null;
      option = {};
      // 封装
      myChart.setOption(option);
    });

    return {};
  },
};
</script>

<style>
</style>

返回顶部

2、Axios 请求数据

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

<template>
  <div>
    <h2>产品月销</h2>
    <div class="chart" id="chartTwo">
      <!-- 图表容器 -->
    </div>
  </div>
</template>

<script>
import { inject, reactive, onMounted } from "vue";

export default {
  setup() {
    // 获取echarts对象
    var $echarts = inject("echarts");
    // 获取axios
    var $axios = inject("axios");
    // 获取数据
    var dataTwo = reactive({});

    // 自定义函数获取数据
    async function getData(){
        dataTwo = await $axios({url:'/two/data'});
        // 控制台输出
        console.log("dataTwo:",dataTwo);
    }

    // 钩子
    onMounted(() => {
      // 初始化echarts
      var myChart = $echarts.init(document.getElementById("chartTwo"));
      // 调用函数获取数据
 	    getData();
      // 配置项
      var option = null;
      option = {};
      // 封装
      myChart.setOption(option);
    });

    return {getData,dataTwo};
  },
};
</script>

<style>
</style>

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

image-20220331101947978

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

image-20220331103944827

返回顶部

3、图表获取数据配置

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

<template>
  <div>
    <h2>产品月销</h2>
    <div class="chart" id="chartTwo">
      <!-- 图表容器 -->
    </div>
  </div>
</template>

<script>
import { inject, reactive, onMounted } from "vue";

export default {
  setup() {
    // 获取echarts对象
    var $echarts = inject("echarts");
    // 获取axios
    var $axios = inject("axios");
    // 获取整体数据
    var dataTwo = reactive({});
    var realdata = reactive([]);
    
    // 自定义函数获取数据
    async function getData() {
      dataTwo = await $axios({ url: "/two/data" });
      realdata = dataTwo.data.chartData.chartData;
      // 控制台输出
      console.log("dataTwo:", dataTwo);
      console.log("dataTwo-real:", realdata);
    }

    // 钩子
    onMounted(() => {
      // 初始化echarts
      var myChart = $echarts.init(document.getElementById("chartTwo"));
      // 调用函数获取数据
      getData().then(() => {
        // 配置项
        var option = null;
        option = {
          xAxis:{
             type:'category',
             data:realdata.day
          },
          yAxis:{
             type:'value'
          },
          series:[
            {
              name:'Chemicals',
              type:'line',
              data:realdata.num.Chemicals
            },
            {
              name:'Clothes',
              type:'line',
              data:realdata.num.Clothes
            },
            {
              name:'Electrical',
              type:'line',
              data:realdata.num.Electrical
            },
            {
              name:'digit',
              type:'line',
              data:realdata.num.digit
            },
            {
              name:'gear',
              type:'line',
              data:realdata.num.gear
            },
          ]
        };
        // 封装
        myChart.setOption(option);
      });
    });
    // 返回值
    return { getData, dataTwo, realdata };
  },
};
</script>

<style>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
}
.chart {
  /* 高度360 */
  height: 4.3rem;
  /* background-color: gray; */
}
</style>

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

image-20220331104039404

返回顶部

4、图标丰富

（1）字体颜色

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

image-20220331105022530

Top

（2）设置提示框组件

image-20220329194705217

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

提示器坐标轴背景修改：

image-20220331114213323

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

Top

（3）图例展示

image-20220330121545646

官网参数配置

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

image-20220331105102852

Top

（4）平滑曲线

image-20220331110400295

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

image-20220331110232203

Top

（5）堆叠曲线图

image-20220331110730706

官方实例

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,
    },
    ......
]

image-20220331110634357

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,
            },
          ],

默认填充：

image-20220331111244157

渐变色填充：

image-20220331112059192

Top

（7）设置曲线宽度

image-20220331112408158

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)",
                },
            ]),
        },
    },
    ......
]

image-20220331112643223

Top

（8）隐藏所有数据点

image-20220331112913231

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)",
                },
            ]),
        },
    },
    ......
]

image-20220331112839847

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）坐标轴两边留白策略

image-20220331113504053

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

image-20220331113649249

Top

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

image-20220331114918522

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

image-20220331115023510Top

嘎嘎嘎嘎

举报

相关推荐

实现vue项目和springboot项目前后端数据交互

node.jsvue.jsspring boot

部署看板娘到vue项目（前后端整合）

前端

vue echarts 折线图 堆叠面积图

深度学习人工智能

一、Vue移动端项目前准备

h5htmlideJavaScript前端开发

Vue项目前端部署——nginx方式

数据结构排序算法算法

【Vue】Vue 项目前端响应式布局及框架搭建

vue返回顶部插槽iosOpenStack云计算

Spring Boot + Vue前后端分离项目，Maven自动打包整合

前后端分离MavenmavenxmlspringHarmonyOS后端开发

Vue2+Spirngboot前后端分离项目(二)

springjavavue

【Vue】Vue 项目后端接口框架搭建

vueexpress返回顶部数据应用程序Html/CSS前端开发

使用VSCode建立Vue+Spring项目（二）：后端项目的开发

visual studio codespring后端前端
0 条评论