Echarts动态加载折线图 x轴，y轴数据，阴影部分

比眉伴天荒 2024-03-25 20:04 49阅读 0赞

#### **需求** ####

1.  制作折线图

1.  x轴动态显示最近14天的日期

1.  y轴根据x轴日期所对应的数据，动态显示数据所在区间。

1.  鼠标移入，显示日期对应的数据。

1.  所有有数据的地方，用折线连接，并且用阴影覆盖

效果图

![05701f4aaf8dd1a111947f15adf22007.gif][]

### **具体实现** ###

安装echarts

npm install echarts -S

引入echarts

为了节省空间，这里采用按需引用

const echarts = require('echarts/lib/echarts')
    require('echarts/lib/chart/line')
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/markPoint')
    require('echarts/lib/component/title')
    require('echarts/lib/component/axisPointer')

具体位置

![61afc3cfb319784b53b6656db1415776.png][]

*  创建容器

注意： 想要改变echarts的位置，大小，可以在行内写样式，id对应的是图标的表示

*  创建js

//   图表
        drawLine () {
          // 基于准备好的dom，初始化echarts实例
          const myChart = echarts.init(document.getElementById('myChart'))
          // 绘制图表
          myChart.setOption({
            tooltip: {
              // 设置tip提示
              trigger: 'axis',
              backgroundColor: '#0dcba3' // 背景颜色（此时为默认色）
            },
            color: '#8AE09F', // 设置区分（每条线是什么颜色，和 legend 一一对应）
            xAxis: {
              // 配置x轴数据、样式、名称
              type: 'category',
              boundaryGap: false, // 坐标轴两边不留白
              data: this.MomDay,
              axisLine: {
                // 坐标轴轴线相关设置。
                lineStyle: {
                  color: '#0dcba3'
                }
              }
            },
            yAxis: [{
              type: 'value',
              scale: true,
              max: this.max + 3,
              min: 0,
              splitNumber: 5,
              axisLine: {
                // 坐标轴轴线相关设置。
                lineStyle: {
                  color: '#0dcba3'
                }
              }
            }],
            // 刻度线
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            series: [
              {
                name: '交易数',
                data: this.showData,
                type: 'line', // 类型为折线图
                smooth: true, // 曲线平滑
                itemStyle: {
                  normal: {
                    areaStyle: {
                      z: 10,
                      type: 'default',
                      // 渐变色实现
                      color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        // 变化度
                        // 三种由深及浅的颜色
                        [
                          {
                            offset: 0,
                            color: '#0dcba3'
                          },
                          //   {
                          //   offset: 0.5,
                          //   color: '#FFFFFF',
                          // },
                          {
                            offset: 1,
                            color: '#FFFFFF'
                          }
                        ]
                      )
                    },
                    lineStyle: {
                      // 线的颜色
                      width: 1,
                      type: 'solid',
                      color: '#0dcba3'
                    },
                    label: {
                      show: false,
                      position: 'top',
                      textStyle: {
                        color: '#0dcba3'
                      }
                    },
                    color: '#FFFFFF',
                    borderColor: '#0dcba3',
                    borderWidth: 1
                  }
                }
              }
            ]
          })
        },

###### **注意：这里drawLine() 调用的时机** ######

由于echarts的数据是根据后端返回的数据进行填充，所以drawLine()的调用时机，我是放在了请求完图表相关数据，调用drawLine()

*  x轴最近14天的数据动态填写

xAxis: {
              // 配置x轴数据、样式、名称
              type: 'category',
              boundaryGap: false, // 坐标轴两边不留白
              data: this.MomDay,
              axisLine: {
                // 坐标轴轴线相关设置。
                lineStyle: {
                  color: '#0dcba3'
                }
              }
            },

data: this.MomDay 是自己或许到的最近14天的天数

数据传递，和以前一样

1.  先在data里声明变量 MomDay: \[\]

1.  然后对MomDay 进行赋值

1.  将MomDay 传递给折线图的data

1.  注意：echarts的宽度如果不够，x轴会显示最近十四天的天数，但是中间会间隔一个，显示一个日期。如果宽度充足，会全部显示14天的日期

1.  下面会给出获取最近14天数的代码

*  y轴根据x轴日期所对应的数据，动态显示数据所在区间

yAxis: [{
              type: 'value',
              scale: true,
              max: this.max + 3, 
              // max 是后端返回的数据，表示最大值。知道最大值，间隔数，动态显示y轴数据就很方便了. + 3的意思是，不至于图表顶到最顶部，给顶部稍微留点间隔
              // 比如 max =  12 splitNumber: 5 那每个间隔值就是 2 ... 2
              max =  15 splitNumber: 5 那每个间隔值就是 3 
              min: 0,
              splitNumber: 5, // y轴的间隔数
              axisLine: {
                // 坐标轴轴线相关设置。
                lineStyle: {
                  color: '#0dcba3'
                }
              }
            }],

![578735b843e71244228782e931d702d7.png][]

*  鼠标移入，显示日期对应的数据

*  所有有数据的地方，用折线连接，并且用阴影覆盖

series: [
              {
                name: '交易数',
                data: this.showData,
                type: 'line', // 类型为折线图
                smooth: true, // 曲线平滑
                itemStyle: { // 阴影覆盖
                  normal: {
                    areaStyle: {
                      z: 10,
                      type: 'default',
                      // 渐变色实现
                      color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        // 变化度
                        // 三种由深及浅的颜色
                        [
                          {
                            offset: 0,
                            color: '#0dcba3'
                          },
                          //   {
                          //   offset: 0.5,
                          //   color: '#FFFFFF',
                          // },
                          {
                            offset: 1,
                            color: '#FFFFFF'
                          }
                        ]
                      )
                    },
                    lineStyle: {
                      // 线的颜色
                      width: 1,
                      type: 'solid',
                      color: '#0dcba3'
                    },
                    label: {
                      show: false,
                      position: 'top',
                      textStyle: {
                        color: '#0dcba3'
                      }
                    },
                    color: '#FFFFFF',
                    borderColor: '#0dcba3',
                    borderWidth: 1
                  }
                }
              }
            ]

##### **注意 鼠标移入，还是接口数据传入值** #####

*  获取今日起，前14天的数据

1.  定义方法，求日期

// 获取当前时间，day为number，getDay(-1):昨天的日期;getDay(0):今天的日期;getDay(1):明天的日期;【以此类推】
        getDay (day) {
          var today = new Date()
          today.setTime(today.getTime() + 1000 * 60 * 60 * 24 * day) // 注意，这行是关键代码
          var tYear = today.getFullYear()
          var tMonth = today.getMonth()
          var tDate = today.getDate()
          tMonth = this.doHandleMonth(tMonth + 1)
          tDate = this.doHandleMonth(tDate)
          return tYear + '-' + tMonth + '-' + tDate
        },

1.  求14天日期，并存储到localStorage

// 求14天日期
        for (var i = 0; i > -14; i--) {
          this.forthDay.push(this.getDay(i))
        }
        window.localStorage.setItem('yester', JSON.stringify(this.forthDay))

1.  在需要的地方，取出14天日期

this.newYester = JSON.parse(window.localStorage.getItem('yester')).reverse()

1.  存数组用 JSON.stringify 取数组用 JSON.parse 日期翻转 .reverse()

原文链接：[https://blog.csdn.net/qq\_38845858/article/details/107857617][https_blog.csdn.net_qq_38845858_article_details_107857617]

[05701f4aaf8dd1a111947f15adf22007.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b21460d348fb410082a86b6231454345.png
[61afc3cfb319784b53b6656db1415776.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e573b44c40474f4e9df44e3ff2fae4d2.png
[578735b843e71244228782e931d702d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/19a402f706ce491a96a7046e0783b812.png
[https_blog.csdn.net_qq_38845858_article_details_107857617]: https://blog.csdn.net/qq_38845858/article/details/107857617