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）；

• 容器

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

<template>  <div id="myChart" : ref="chart">  </div></template>

• 初始化+配置

由于初始化需要获取到容器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并实现自适应”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！