Vue-cli3中如何引入ECharts并实现自适应

目录
  • 如何引入ECharts并实现自适应
    • 效果
  • Vue-cli使用ECharts并封装ECharts组件
    • 1. 导入echarts
    • 2. 封装echarts组件
    • 3. 父组件引用测试

如何引入ECharts并实现自适应

效果

1. 安装echarts

npm install echarts

2. components/echarts/index.vue

<template>
  <div :class="className" :style="{height:height,width:width}" />
</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" :style="styleObj" 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. 父组件引用测试

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 完美解决vue 中多个echarts图表自适应的问题

    看代码吧~ <div class="echarts"> <IEcharts :option="bar" ref="echarts"></IEcharts> </div> mounted () { this.selfAdaption () }, methods: { //echarts自适应 selfAdaption () { const self = this: setTimeout(() =>

  • 详解vue中移动端自适应方案

    方案1: 直接引入js  (自己 写的动态改变fontsize的js) function htRem() { var ww = document.documentElement.clientWidth; if (ww > 750) { ww = 750; } document.documentElement.style.fontSize = ww / 7.5 + "px"; } htRem(); window.onresize = function() { htRem(); };

  • vue-cli3+echarts实现渐变色仪表盘组件封装

    本文实例为大家分享了vue-cli3+echarts 实现封装一个渐变色仪表盘组件,供大家参考,具体内容如下 效果预览 思路 1.使用两个仪表盘叠加,起始角度一样,底部仪表盘结束角度固定不变2.通过props传入数据3.计算在上层的仪表盘的结束角度并赋值 代码 <template>   <div class="gauge">     <div class="gauge__bottom" ref="bottomGauge&quo

  • 详解基于vue-cli配置移动端自适应

    之前写过一篇关于移动端屏幕适配:移动端屏幕适配的解决,今天来聊一聊基于vue-cli配置的移动端屏幕适配问题. 配方还是一样:手淘的 lib-flexible+ rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装: npm i lib-flexible --save 引入 lib-flexible 在项目入口文件 main.js 里 引入 lib-flexible // main.js import 'lib-flexible' 添加 meta 标签 在项目根

  • Vue-cli3中如何引入ECharts并实现自适应

    目录 如何引入ECharts并实现自适应 效果 Vue-cli使用ECharts并封装ECharts组件 1. 导入echarts 2. 封装echarts组件 3. 父组件引用测试 如何引入ECharts并实现自适应 效果 1. 安装echarts npm install echarts 2. components/echarts/index.vue <template>   <div :class="className" :style="{height:

  • Vue框架中正确引入JS库的方法介绍

    本文主要给大家介绍的是关于在Vue框架中正确引入JS库的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 错误示范 全局变量法 最不靠谱的方式就是将导入的库挂在全部变量window 对象下: // entry.js: window._ = require('lodash'); // MyComponent.vue: export default { created() { console.log(_.isEmpty() ? 'Lodash everywhere!' : 'U

  • Vue项目中如何引入icon图标

    1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标.点击进入icomoon网站点击右上角"IcoMoon App",找到自己需要的图标后选择然后点击右下角"Generate Font",接着可以在左上角第二个按钮"Preferences"进行自定义你要下载的图标信息,一般我都是进去改一下"Font Name",然后返回点击右下角"Do

  • 关于Vue CLI3中启动cli服务参数说明

    目录 vue常用命令 使用命令 在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令.你可以在 npm scripts 中以 vue-cli-service.或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令. 这是你使用默认 preset 的项目的 package.json: { "scripts": {   "serve": "vue-

  • 详解vue项目中如何引入全局sass/less变量、function、mixin

    让我们考虑下场景:当使用rem/vw开发移动端的时候,你定义了一个px转rem的函数,或者是网站配色的全局变量等,然后到工程里为每个vue文件或者组件@import 'publicfilename.scss',那得重复做这样的工作很多很多...次,万一这些公用文件目录路径变怎么办呢,哭都来不及,想想都觉得恐怖呀! 接下来拯救我们的神器就要登场了---sass-resources-loader,它可以省去重复性的引入,还支持less,postcss等,具体用法如下: npm install -d

  • Vue CLI3中使用compass normalize的方法

    normalize:统一了基本的样式,如margin: 0;(类似compass中的reset模块) compass:对sass的封装,扩展 1.安装 npm i normalize.css compass-mixins --save-dev 1.1 normalize.cssx引用 在main.js中 import 'normalize.css' 这样就完成了引用,F12,查看 body { margin: 0; // 如果是0则说明normalize已经起作用 } 2.1 compass引用

  • vue项目中全局引入1个.scss文件的问题解决

    首先先发一下我的项目路径 1. 首先要下载   sass-resources-loader npm install sass-resources-loader --save-dev 2.然后再文件夹build/utils里面的更改 scss: generateLoaders('sass') scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.reso

  • Vue中动态引入图片要是require的原因解析

    目录 1.什么是静态资源 2. 为什么动态添加的src会被当做的静态的资源? 3. 没有进行编译,是指的是什么没有被编译? 4. 加上require为什么能正确的引入资源,是因为加上require就能编译了? 4.1 require是什么: 是一个node方法,用于引入模块,JSON或本地文件 4.2 调用require方法引入一张图片之后发生了什么: 5. 问题3中,静态的引入一张图片,没有使用require,为什么返回的依然是编译过后的文件地址? 6. 按照问题6中所说,那么动态添加src的

  • Vue.js中使用Vuex实现组件数据共享案例

    当组件中没有关联关系时,需要实现数据的传递共享,可以使用Vuex 先不管图片 一.安装 在vue cli3中创建项目时勾选这个组件就可以了 或者手动安装 npm install store --save 二.使用 main.js store.js .vue文件 图片中的js文件中有 三部分 分别与图片上对应 1. state中存储数据 2. 而数据的修改需要先经过action的dispatch方法 (不需要异步获取的数据可以不经过这一步,如上图) 3. 然后经过matations的commit方

  • VUE项目中封装Echart折线图的方法

    本文实例为大家分享了VUE项目中封装Echart折线图的具体代码,供大家参考,具体内容如下 封装Echart折线图,可显示多条折线 1. 首先在项目中全局引入Echarts,main.js中: import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 2.components中新建组件baseLineChart.vue,以下代码直接复制: <template>     <div       id="b

随机推荐