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

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

需求

  1. 制作折线图

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

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

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

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

效果图

05701f4aaf8dd1a111947f15adf22007.gif

具体实现

安装echarts

npm install echarts -S

引入echarts

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

  1. const echarts = require('echarts/lib/echarts')
  2. require('echarts/lib/chart/line')
  3. require('echarts/lib/component/tooltip')
  4. require('echarts/lib/component/markPoint')
  5. require('echarts/lib/component/title')
  6. require('echarts/lib/component/axisPointer')

具体位置

61afc3cfb319784b53b6656db1415776.png

  • 创建容器

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

  • 创建js

    // 图表

    1. drawLine () {
    2.   // 基于准备好的dom，初始化echarts实例
    3.   const myChart = echarts.init(document.getElementById('myChart'))
    4.   // 绘制图表
    5.   myChart.setOption({
    6.     tooltip: {
    7.       // 设置tip提示
    8.       trigger: 'axis',
    9.       backgroundColor: '#0dcba3' // 背景颜色（此时为默认色）
    10.     },
    11.     color: '#8AE09F', // 设置区分（每条线是什么颜色，和 legend 一一对应）
    12.     xAxis: {
    13.       // 配置x轴数据、样式、名称
    14.       type: 'category',
    15.       boundaryGap: false, // 坐标轴两边不留白
    16.       data: this.MomDay,
    17.       axisLine: {
    18.         // 坐标轴轴线相关设置。
    19.         lineStyle: {
    20.           color: '#0dcba3'
    21.         }
    22.       }
    23.     },
    24.     yAxis: [{
    25.       type: 'value',
    26.       scale: true,
    27.       max: this.max + 3,
    28.       min: 0,
    29.       splitNumber: 5,
    30.       axisLine: {
    31.         // 坐标轴轴线相关设置。
    32.         lineStyle: {
    33.           color: '#0dcba3'
    34.         }
    35.       }
    36.     }],
    37.     // 刻度线
    38.     axisTick: {
    39.       show: false,
    40.       alignWithLabel: true
    41.     },
    42.     series: [
    43.       {
    44.         name: '交易数',
    45.         data: this.showData,
    46.         type: 'line', // 类型为折线图
    47.         smooth: true, // 曲线平滑
    48.         itemStyle: {
    49.           normal: {
    50.             areaStyle: {
    51.               z: 10,
    52.               type: 'default',
    53.               // 渐变色实现
    54.               color: new echarts.graphic.LinearGradient(
    55.                 0,
    56.                 0,
    57.                 0,
    58.                 1,
    59.                 // 变化度
    60.                 // 三种由深及浅的颜色
    61.                 [
    62.                   {
    63.                     offset: 0,
    64.                     color: '#0dcba3'
    65.                   },
    66.                   //   {
    67.                   //   offset: 0.5,
    68.                   //   color: '#FFFFFF',
    69.                   // },
    70.                   {
    71.                     offset: 1,
    72.                     color: '#FFFFFF'
    73.                   }
    74.                 ]
    75.               )
    76.             },
    77.             lineStyle: {
    78.               // 线的颜色
    79.               width: 1,
    80.               type: 'solid',
    81.               color: '#0dcba3'
    82.             },
    83.             label: {
    84.               show: false,
    85.               position: 'top',
    86.               textStyle: {
    87.                 color: '#0dcba3'
    88.               }
    89.             },
    90.             color: '#FFFFFF',
    91.             borderColor: '#0dcba3',
    92.             borderWidth: 1
    93.           }
    94.         }
    95.       }
    96.     ]
    97.   })
    98. },
注意：这里drawLine() 调用的时机

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

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

    xAxis: {

    1.       // 配置x轴数据、样式、名称
    2.       type: 'category',
    3.       boundaryGap: false, // 坐标轴两边不留白
    4.       data: this.MomDay,
    5.       axisLine: {
    6.         // 坐标轴轴线相关设置。
    7.         lineStyle: {
    8.           color: '#0dcba3'
    9.         }
    10.       }
    11.     },

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

数据传递，和以前一样

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

  2. 然后对MomDay 进行赋值

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

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

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

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

    yAxis: [{

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

578735b843e71244228782e931d702d7.png

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

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

    series: [

    1.       {
    2.         name: '交易数',
    3.         data: this.showData,
    4.         type: 'line', // 类型为折线图
    5.         smooth: true, // 曲线平滑
    6.         itemStyle: { // 阴影覆盖
    7.           normal: {
    8.             areaStyle: {
    9.               z: 10,
    10.               type: 'default',
    11.               // 渐变色实现
    12.               color: new echarts.graphic.LinearGradient(
    13.                 0,
    14.                 0,
    15.                 0,
    16.                 1,
    17.                 // 变化度
    18.                 // 三种由深及浅的颜色
    19.                 [
    20.                   {
    21.                     offset: 0,
    22.                     color: '#0dcba3'
    23.                   },
    24.                   //   {
    25.                   //   offset: 0.5,
    26.                   //   color: '#FFFFFF',
    27.                   // },
    28.                   {
    29.                     offset: 1,
    30.                     color: '#FFFFFF'
    31.                   }
    32.                 ]
    33.               )
    34.             },
    35.             lineStyle: {
    36.               // 线的颜色
    37.               width: 1,
    38.               type: 'solid',
    39.               color: '#0dcba3'
    40.             },
    41.             label: {
    42.               show: false,
    43.               position: 'top',
    44.               textStyle: {
    45.                 color: '#0dcba3'
    46.               }
    47.             },
    48.             color: '#FFFFFF',
    49.             borderColor: '#0dcba3',
    50.             borderWidth: 1
    51.           }
    52.         }
    53.       }
    54.     ]
注意 鼠标移入，还是接口数据传入值
  • 获取今日起，前14天的数据

  1. 定义方法，求日期

    // 获取当前时间，day为number，getDay(-1):昨天的日期;getDay(0):今天的日期;getDay(1):明天的日期;【以此类推】

    1. getDay (day) {
    2.   var today = new Date()
    3.   today.setTime(today.getTime() + 1000 * 60 * 60 * 24 * day) // 注意，这行是关键代码
    4.   var tYear = today.getFullYear()
    5.   var tMonth = today.getMonth()
    6.   var tDate = today.getDate()
    7.   tMonth = this.doHandleMonth(tMonth + 1)
    8.   tDate = this.doHandleMonth(tDate)
    9.   return tYear + '-' + tMonth + '-' + tDate
    10. },

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

    // 求14天日期

    1. for (var i = 0; i > -14; i--) {
    2.   this.forthDay.push(this.getDay(i))
    3. }
    4. window.localStorage.setItem('yester', JSON.stringify(this.forthDay))

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

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

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

版权声明：本文为CSDN博主「推开世界的门」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_38845858/article/details/107857617

发表评论

表情：
评论列表 （有 0 条评论，114人围观）

还没有评论，来说两句吧...

相关阅读