vue+echarts——图表的创建(近6个月/近7天)——技能提升

╰半橙微兮° 2022-09-04 09:47 202阅读 0赞

今天在做后台的时候，遇到一个需求，就是要展示近6个月/近7天的数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
下面封装一下近几天和近几个月的时间获取函数：

# 1.近几天的时间函数封装 #

注意一下，比如今天是8月12日，则近7天的初始时间是8月6日凌晨。此处后端要求的时间格式是年月日

函数封装如下：

getDayBefore(day) { 
        var date = new Date();
        var timeBefore = date.getTime() + 1000 * 60 * 60 * 24 * day;
        date = new Date(timeBefore);
        var year = date.getFullYear().toString().padStart(4, "0");
        var month = (date.getMonth() + 1).toString().padStart(2, "0");
        var day = (date.getDate() + 1).toString().padStart(2, "0");
        return `${ year}-${ month}-${ day}`;
    },

如果要看7天前的数据，则`getDayBefore(-7)`即可得到初始时间，然后在获取当前时间，就拿到近7天的时间区间了。当前时间的年月日格式可以参照上一篇博客。

## 用上面的代码获取年月都没有问题，获取天的时候可能会遇到问题 ##

比如：`date.getDate()`拿到的是某个月份的最后一天，我直接`+1`，就会出现一个不存在的天数，因此需要进行判断后再显示天数。

# 2.近6个月时间函数封装 #

近6个月的时间初始值，这个计算的时候需要注意，如果跨年了，则需要把年份减一。而且月份是从0开始的。

getMonthBefore(mon){ 
    	var year = new Date().getFullYear();
        var month = new Date().getMonth();
        var day = new Date().getDate();
        if (month - mon < 0) { 
            month = 12 + (month - mon);
            year -= 1;
        } else { 
            month = month - mon;
        }
        var days = new Date(year, month + 1, 0).getDate();
        if (day > days-1) { 
            day = days-1;
        }
        return `${ year}-${ month + 1}-${ day + 1}`;
    }

如果是获取近6个月的时间，则可以通过`getMonthBefore(6)`即可，当然上面的函数可以封装成跟近几天的一样，区分一下前几个月和后几个月，也就是将代码中的`-mon`变成`mon`就可以了，传参的时候需要传`-6`。

# 3.多条折线图的数据处理 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
对于多条折线图，需要注意以下几点：

## 1.需要有图例，否则无法知道每条折线代表的含义 ##

`option`初始化： 指定图例的位置，还可以定义颜色

var optionRate: {
             title: {
                  text: '交期准时率',
                  subtext: ''
              },
              grid: {
                  left: "8%"
              },
              legend: {
                  left: 'center',
              },
              color: ['#f90','#67c23a'],
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: []
              },
              yAxis: {
                  type: 'value',
                  axisLabel: {
                      show: true,
                      interval: 'auto'
                  }
              },
              series: []
          },
    }

## 2.给`series`赋值时，需要注意，每条折线都需要有`name type data`等参数，否则折线不会展示 ##

这个就是我吃的大亏，最终就是这个问题导致的，没有给每条折线都赋值`name` `type`等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

# 4.饼图不展示 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
今天在做饼图时，发现标题可以出来，但是饼图一直不显示，为了保证数据没有问题，我都把`echarts`官网中的示例代码都拷贝了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]  
饼图不展示，需要判断一下是哪种情况引起的。

## 1.没有给对应的`div`设置宽高，这个也是非常重要的。 ##

## 2.确保数据没有问题，可以将`echarts`官网中示例的数据拷贝过去，进行渲染，借此排除数据问题。 ##

## 3.如果上面的两种情况都排除了，则需要看下`echarts`是否是`js`引入的方式。 ##

因为`js`如果是本地引入的，则需要在官网上下载`echarts.js`

我这边是在线定制化的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]  
当初下载`echart`时，为了能够将文件体积缩小，因此在定制时，只选择了柱状图和折线图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]  
所以，即便我的饼图数据没有问题，依然导致饼图显示不出来。重新定制`echart`之后，在此引入`echart.js`。饼图就显示出来了。

多多练习，多多积累。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/0362661f9eb84421b5077223a32cabfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/ca53509d7bc849c39d6218ab6e40c923.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/fee490e49d5b413887202b97a1865105.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20220829/a6b4a272f8544615a88d8e74c411d535.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20220829/e77c1f5259594616a1ae6cf0907b6d17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 5]: /images/20220829/4114c986562e411aae246f10ddb6867b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 6]: /images/20220829/fd2c340a52d24ccd8fb0840757f90df7.png