echarts图表响应式的实现

最新推荐文章于 2024-05-30 19:48:14 发布

南寻夏墨

最新推荐文章于 2024-05-30 19:48:14 发布

阅读量773

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_47531742/article/details/128298181

版权

npm install echarts --save

main.js

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

echarts图表封装（折线图）

<template>
  <div :id="id" ref="data" style="width: 100%; height: 300px"></div>
</template>

<script>
// import * as echarts from 'echarts'

export default {
  name: 'LineChart',
  props: ['id', 'data'], // 接受从父组件传回的值
  data() {
    return {
      // screenWidth: document.body.clientWidth,
    }
  },
  // 实时监听父组件传过来的值
  // 然后执行drawBar方法 重新绘图
  watch: {
    data: {
      handler(value) {
        this.drawBar(value)
      },
      deep: true, // 深度监听
    },
  },
  mounted() {
    setTimeout(() => {
      this.drawBar(this.data)
    }, 2000)
  },

  methods: {
    drawBar(
      {
        nameArray = [], // x轴的数据
        series = [], // series的数据
      } = {} // 作为一个整体的参数
    ) {
      //
      this.$nextTick(() => {
        const lineBox = this.$echarts.init(document.getElementById(this.id))
        const option = {
          grid: {
            containLabel: true,
          },
          color: ['#1890FF'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {
            data: name,
          },
          xAxis: {
            type: 'category',
            data: nameArray,
            axisTick: {
              show: false,
            },
          },
          yAxis: {
            type: 'value',
            splitNumber: 3,
            splitLine: {
              lineStyle: {
                color: '#E8E8E8',
                type: 'dashed',
              },
            },
          },
          axisLabel: {
            align: 'center',
          },
          series: series,
        }
        window.addEventListener('resize', function () {
          lineBox.resize()
        })
        lineBox.setOption(option, true)
      })
    },
  },
}
</script>

<style scoped>
</style>

 <VueEcharts :id="'echarts1'" :data="objectData1" />
 objectData1: {
        nameArray: [],
        series: [
          {
            data: [],
            name: '接收',
            type: 'line',
            smooth: true,
            symbol: 'none',
            color: '#1890FF',
            lineStyle: {
              width: '3',
            },
          },
          {
            data: [],
            name: '发送',
            type: 'line',
            smooth: true,
            symbol: 'none',
            color: '#FFB0E3',
            lineStyle: {
              width: '3',
            },
          },
        ],
      },
this.objectData3.series[1].data = res.data.map((item) => item.send).reverse()
          this.objectData1.nameArray = res.data.map((item) => this.dayjs(item.stateTime).format('HH:mm')).reverse()