曲线图+平均值+自动切换动效

微信截图_20240126171015.jpg 微信截图_20240126171038.jpg

引入使用

import Right3 from './components/Right3'
<Right3 :id="'Right3'" :datas="right3Data"></Right3>

组件代码

<template>
  <div :id="id" class="echarts1"></div>
</template>
<script>
import * as echarts from 'echarts'
// 颜色设置
var colorList = {
  linearYtoG: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 1,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: '#f5b44d'
      },
      {
        offset: 1,
        color: '#28f8de'
      }
    ]
  },
  linearGtoB: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: '#43dfa2'
      },
      {
        offset: 1,
        color: '#28f8de'
      }
    ]
  },
  linearBtoG: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: '#1c98e8'
      },
      {
        offset: 1,
        color: '#28f8de'
      }
    ]
  },
  areaBtoG: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(35,184,210,.2)'
      },
      {
        offset: 1,
        color: 'rgba(35,184,210,0)'
      }
    ]
  }
}
export default {
  // startVal 初始值 endVal 最终值 title 标签值
  props: {
    datas: {
      type: [Array, Object],
      default: null
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      Time1: null,
      myChart: '',
      datasCopy: '',
      xData0: [],
      xData: [],
      yData: []
    }
  },
  computed: {},
  watch: {
    // 这是监听json值变化
    datas: {
      // json为监听参数名
      handler: function (val, oldVal) {
        // 不能用箭头函数
        this.$nextTick(() => {
          this.echartsFun()
          this.datasCopy = val
          let i = 4

          clearInterval(this.Time1)
          this.xData = []
          this.yData = []
          this.Time1 = setInterval(() => {
            if (i == this.datasCopy.length) {
              i = 4
            }
            this.xData0 = this.getFiveElements(this.datasCopy, i).map(
              (v) => v.riqi
            )
            this.xData = this.getFiveElements(this.datasCopy, i).map((v) =>
              v.riqi.substring(5, 10)
            )
            this.yData = this.getFiveElements(this.datasCopy, i).map(
              (v) => v.number
            )
            // console.log(this.xData0)
            // console.log(this.xData)
            // console.log(this.yData)
            this.myChart.setOption({
              xAxis: {
                data: this.xData
              },
              series: [
                {
                  data: this.yData
                }
              ]
            })
            i++
          }, 2000)
        })
      },
      immediate: true
    }
  },
  beforeDestroy() {
    clearInterval(this.Time1)
  },
  methods: {
    /** 返回数组的五个元素，追加源数组的新的i数据，并删除之前的第一个 */
    getFiveElements(arr, i) {
      let d = arr.slice(i - 4, i)
      return d
    },
    echartsFun(val) {
      this.datasCopy = val
      console.log(this.datasCopy)
      echarts.init(document.getElementById(this.id)).dispose() // 一定要摧毁
      this.myChart = echarts.init(document.getElementById(this.id))
      this.myChart.clear()
      const option = {
        grid: {
          top: '5%',
          left: '2%',
          right: '15%', // 右侧要留一点，不然X轴最后一个值显示不完整
          bottom: '0%',
          containLabel: true // 显示范围包含坐标刻度
        },
        xAxis: {
          type: 'category',
          position: 'bottom',
          axisLine: true,
          axisLabel: {
            color: 'rgba(255,255,255,.8)',
            fontSize: 12
          },
          data: this.xData
        },
        yAxis: {
          name: 'km/h',
          nameLocation: 'end',
          nameGap: 24,
          nameTextStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: 14
          },
          splitNumber: 4,

          axisLine: {
            lineStyle: {
              opacity: 0
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1
            }
          },
          axisLabel: {
            color: 'rgba(255,255,255,.8)',
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.5)',
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          },

          formatter: (params) => {
            const index = params[0].dataIndex // 下标
            return this.xData0[index] + '<br/>' + '数量：' + this.yData[index]
          }
        },
        series: [
          {
            name: '每日跑步里程',
            type: 'line',
            smooth: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            lineStyle: {
              normal: {
                color: colorList.linearBtoG,
                width: 3
              }
            },
            areaStyle: {
              normal: {
                color: colorList.areaBtoG
              }
            },
            data: this.yData,
            lineSmooth: true,
            markLine: {
              silent: true,
              data: [
                {
                  type: 'average',
                  name: '平均值'
                }
              ],
              precision: 0,
              label: {
                normal: {
                  formatter: '平均值\n {c}'
                }
              },
              lineStyle: {
                normal: {
                  color: 'rgba(248,211,81,.7)'
                }
              }
            }
          }
        ]
      }
      this.myChart.setOption(option, true) // true无数据时更新试图
      // myChart.on('click', (param) => {
      //   this.$router.push({ path: '/clue', query: { tag: param.name } })
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
.echarts1 {
  width: 100%;
  height: 100%;
}
</style>


···