折线图

1.单独抽出组件

<!--
 * @Author: your name
 * @Date: 2022-04-20 10:16:31
 * @LastEditTime: 2022-06-15 09:20:59
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \udcv\src\views\statistical-analysis\components\lineChart.vue
-->
<template>
  <div class="home-view">
    <!-- 标题 -->
    <div class="home-view-t">
      <slot name="header" />
    </div>
    <!-- 折线图 -->
    <div class="home-view-c">
      <div ref="refline" />
      <div v-show="!isShow" class="no-data"> 暂无数据</div>
    </div>
  </div>
</template>
<script >
export default {
  name: 'LineChart',
  props: {
    lineObj: {
      type: Object,
      default: () => { [] }
    }

  },
  data() {
    return {
      myChart: null
    }
  },
  computed: {
    // 默认无数据不展示
    isShow() {
      let bool = false
      this.lineObj.list && this.lineObj.list.forEach(item => {
        if (item.data && item.data.length) {
          bool = true
        }
      })
      return bool
    }
  },
  watch: {
    lineObj: {
      deep: true,
      handler: function(newV, oldV) {
        if (newV) {
          if (this.isShow) {
            this.change()
          }
        }
      }
    }
    // 重新渲染
    // refresh() {
    //   this.myChart && this.myChart.resize()
    // }
  },
  mounted() {
    if (this.isShow) {
      this.change()
    }
    // 屏幕自适应
    window.addEventListener('resize', () => {
      this.myChart && this.myChart.resize()
    })
  },
  methods: {
    change() {
      this.myChart = this.$echarts.init(this.$refs.refline)
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.lineObj.legend_arr || [],
          top: 5,
          right: 5
        },
        color: ['#62A9FF', '#C098ED', '#EEBC23', '#C3E14C', '#53CEE9', '#8378EA'],
        grid: {
          top: '25%',
          left: '3%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: { interval: 0, rotate: 50, color: '#898989' },
          /* 改变xy轴颜色*/
          axisLine: {
            lineStyle: {
              color: '#898989',
              width: 1 // 这里是为了突出显示加上的
            }
          },

          boundaryGap: false,
          data: this.lineObj.x_arr || []
        },
        yAxis: {
          type: 'value',
          name: '数量',
          axisLabel: { color: '#898989' },
          /* 改变xy轴颜色*/
          axisLine: {
            lineStyle: {
              color: '#898989',
              width: 1 // 这里是为了突出显示加上的
            }
          }

        },
        series: this.lineObj.list || [],
          dataZoom: [{
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          realtime: true,
          height: '20',
          left: '5%',
          bottom: 1,
          start: 65,
          //  end: this.xData.length <= 20 ? 100 : 30,
          end: 100, // 初始化滚动条
          borderColor: '#278add', // 边框颜色。
          fillerColor: 'rgba(39, 138, 221, 0.1)',
          /* 去除datazoom里面的数据 */
          dataBackground: {
            lineStyle: { color: '#fff' },
            areaStyle: { color: 'rgba(39, 138, 221, 0.3)' }
          },
          textStyle: false,
          handleStyle: {
            color: '#278add',
            shadowColor: 'rgba(0, 0, 0, 0)'
          }
        }]
      }
      this.myChart.setOption(option)
       const resizeChart = this.myChart.resize // 图表重绘添加函数防抖
      const elementResizeDetectorMaker = require('element-resize-detector') // 监听容器宽高，重绘echarts
      const listener = elementResizeDetectorMaker()
      listener.listenTo(this.$refs.refline, element => {
        resizeChart()
      })

    }
  }
}
</script>
<style lang="scss" scoped>
div{
    box-sizing:border-box;
}
.no-data{
  display: flex;
  align-items: center;
  justify-content: center;
  color:#999;
  height: 100%;
  font-size: 10px;
}
.home-view{
    height:100%;
    width:100%;
    padding-bottom:15px;
    &-t{
        height:50px;
    }
    &-c{
        height:calc(100% - 50px);
        position: relative;
      >div{
        width: 100%;
        height:100%;
      }
      .no-data{
        display: flex;
        align-items: center;
        justify-content: center;
        color:#999;
        height: 100%;
        font-size: 10px;
        position: absolute;
        bottom:0;
        width: 100%;
        background: white;
      }
    }
}
</style>

index中使用

          <div class="resources-crf resources-c-view">
            <BottomChart :line-obj="lineObj">
              <div slot="header" class="headre">
                <div class="headre-l">
                  <div class="headre-lx" />
                  <div class="headre-ln">按月分析资源调阅、下载、共享数</div>
                </div>
              </div>
            </BottomChart>
          </div>

data里面定义数据，获取的数据也往这里放

      lineObj: { // 底部折线图
        legend_arr: ['资源调阅数', '资源下载数', '资源共享数'],
        x_arr: ['2021年1月', '2021年1月', '2021年1月', '2021年1月', '2021年1月', '2021年1月'],
        list: [
          {
            name: '资源调阅数',
            type: 'line',
            data: [22, 53, 66, 22, 13, 3]
            // smooth: true //圆润弧度
          },
          {
            name: '资源下载数',
            type: 'line',
            data: [99, 53, 96, 22, 13, 63]
            // smooth: true
          },
          {
            name: '资源共享数',
            type: 'line',
            data: [11, 32, 96, 22, 13, 23]
            // smooth: true
          }
        ]
      },

调接口处理数据

    async  statCreateTimeList() {
      const res = await statCreateTimeApi.api()
      if (res.code === '0') {
        const xarr = []
        const listarr1 = []
        const listarr2 = []
        const listarr3 = []

        if (res.body) {
          res.body.map(item => {
            xarr.push(item.name)
            listarr1.push(item.callNum)
            listarr2.push(item.downNum)
            listarr3.push(item.sharedNum)
          })
        }
        this.lineObj.x_arr = xarr
        this.lineObj.list[0].data = listarr1
        this.lineObj.list[1].data = listarr2
        this.lineObj.list[2].data = listarr3
        return this.lineObj
      } else {
        this.$message.error(res.msg)
      }
    }