温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue-cli3中怎么引入ECharts并实现自适应

发布时间:2022-06-23 09:24:38 来源:亿速云 阅读:320 作者:iii 栏目:开发技术

本篇内容介绍了“Vue-cli3中怎么引入ECharts并实现自适应”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

Vue-cli3中怎么引入ECharts并实现自适应

效果

1. 安装echarts

npm install echarts

2. components/echarts/index.vue

<template>
  <div :class="className" : />
</template>
<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import {debounce} from '@/utlis/index.js'
  const animationDuration = 6000
  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      // 数据源
      echartsData: {
        type: Object,
        default: {}
      },
    },
    data() {
      return {
        chart: null,
      }
    },
    watch: {
    },
    //初始化
    mounted() {
      this.initChart()
      this.resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.resizeHandler)
    },
  //销毁
    beforeDestroy() { 
      if (!this.chart) {
        return
      }
      window.removeEventListener('resize', this.resizeHandler)
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption(this.echartsData, animationDuration)
      }
    }
  }
</script>

3. utlis/index.js

export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result
 
  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp
    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }
 
  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延时不存在,重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }
    return result
  }
}

4. 在.vue 中使用 test/index.vue

<template>
  <div id="test">
    <echarts :echartsData="echartsData" /> 
  </div>
</template>
<script>
  import echarts from '@/components/echarts/index'
  export default {
    components: {
      echarts
    },
    data() {
      return {
        echartsData: {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器,坐标轴触发有效
              type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
            }
          },
          grid: {
            top: 10,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value',
            axisTick: {
              show: false
            }
          }],
          series: [{
            name: 'pageA',
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: [79, 52, 200, 334, 390, 330, 220],
          }, {
            name: 'pageB',
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: [80, 52, 200, 334, 390, 330, 220],
          }, {
            name: 'pageC',
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: [30, 52, 200, 334, 390, 330, 220],
          }]
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  #test {
    width: 100%;
    height: 100%;
    background: antiquewhite;
    position: absolute;
    top: 0px;
    bottom: 0px;
  }
</style>

Vue-cli使用ECharts并封装ECharts组件

1. 导入echarts

在终端输入

cnpm install echarts --save

在main.js中引入

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

2. 封装echarts组件

新建组件echats.vue

首先应该明确Echarts图形必须满足四项刚性条件才可以绘制:

  • 准备一个具有宽高的容器(container);

  • 每次绘制之前需要初始化(init);

  • 必须设置配置,否则无从绘制(option);

  • 改变数据时必须传入改变的数据,否则监听不到新数据(setOption);

  • 1.容器

注意,容器的宽高可以通过v-bind绑定样式的参数styleObj来设置(父组件引用时传递过来),使得应用echats组件时可以自由地设置宽高

<template>
  <div id="myChart" : ref="chart">
  </div>
</template>
  • 2.初始化+配置

由于初始化需要获取到容器dom,所以需要在mouted生命周期里面初始化 

mounted () {
    //  因为需要拿到容器,所以要挂载之后
     this.init()
 },
 methods: {
     init(){
         let chart = this.$eCharts.init(this.$refs.chart)
         let option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          }, //X轴
          yAxis: { type: 'value' }, //Y轴
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
            }] //配置项
         }
        chart.setOption(option)
 }
}

3. 父组件引用测试

Vue-cli3中怎么引入ECharts并实现自适应

Vue-cli3中怎么引入ECharts并实现自适应

“Vue-cli3中怎么引入ECharts并实现自适应”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI