欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue-cli3中如何引入ECharts并實(shí)現(xiàn)自適應(yīng)

 更新時(shí)間:2022年06月22日 16:19:17   作者:高先生的貓  
這篇文章主要介紹了Vue-cli3中如何引入ECharts并實(shí)現(xiàn)自適應(yīng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

如何引入ECharts并實(shí)現(xiàn)自適應(yīng)

效果

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%'
? ? ? },
? ? ? // 數(shù)據(jù)源
? ? ? 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)
? ? },
? //銷(xiāo)毀
? ? 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() {
    // 據(jù)上一次觸發(fā)時(shí)間間隔
    const last = +new Date() - timestamp
    // 上次被包裝函數(shù)被調(diào)用時(shí)間間隔last小于設(shè)定時(shí)間間隔wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果設(shè)定為immediate===true,因?yàn)殚_(kāi)始邊界已經(jīng)調(diào)用過(guò)了此處無(wú)需調(diào)用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }
 
  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延時(shí)不存在,重新設(shè)定延時(shí)
    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: { // 坐標(biāo)軸指示器,坐標(biāo)軸觸發(fā)有效
? ? ? ? ? ? ? type: 'shadow' // 默認(rèn)為直線,可選為:'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. 導(dǎo)入echarts

在終端輸入

cnpm install echarts --save

在main.js中引入

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

2. 封裝echarts組件

新建組件echats.vue

首先應(yīng)該明確Echarts圖形必須滿(mǎn)足四項(xiàng)剛性條件才可以繪制:

  • 準(zhǔn)備一個(gè)具有寬高的容器(container);
  • 每次繪制之前需要初始化(init);
  • 必須設(shè)置配置,否則無(wú)從繪制(option);
  • 改變數(shù)據(jù)時(shí)必須傳入改變的數(shù)據(jù),否則監(jiān)聽(tīng)不到新數(shù)據(jù)(setOption);
  • 1.容器

注意,容器的寬高可以通過(guò)v-bind綁定樣式的參數(shù)styleObj來(lái)設(shè)置(父組件引用時(shí)傳遞過(guò)來(lái)),使得應(yīng)用echats組件時(shí)可以自由地設(shè)置寬高

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

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

mounted () {
    //  因?yàn)樾枰玫饺萜?,所以要掛載之后
     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',
            }] //配置項(xiàng)
         }
        chart.setOption(option)
 }
}

3. 父組件引用測(cè)試

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。 

相關(guān)文章

  • Vue 虛擬列表的實(shí)戰(zhàn)示例

    Vue 虛擬列表的實(shí)戰(zhàn)示例

    這篇文章主要介紹了Vue 虛擬列表的實(shí)現(xiàn)示例,幫助大家更好的理解和學(xué)習(xí)使用vue,感興趣的朋友可以了解下
    2021-03-03
  • 使用vue-video-player實(shí)現(xiàn)直播的方式

    使用vue-video-player實(shí)現(xiàn)直播的方式

    在開(kāi)發(fā)期間使用過(guò)video.js、mui-player等插件,發(fā)現(xiàn)這些video插件對(duì)移動(dòng)端的兼容性都不友好,最后發(fā)現(xiàn)一個(gè)在移動(dòng)端兼容不錯(cuò)的插件vue-video-player,下面通過(guò)場(chǎng)景分析給大家介紹使用vue-video-player實(shí)現(xiàn)直播的方法,感興趣的朋友一起看看吧
    2022-01-01
  • Swiper在Vue2中的簡(jiǎn)單使用方法

    Swiper在Vue2中的簡(jiǎn)單使用方法

    這篇文章主要給大家介紹了關(guān)于Swiper在Vue2中的簡(jiǎn)單使用方法,swiper是一款現(xiàn)代化的移動(dòng)端輪播組件,可以在Vue中輕松使用,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
    2023-11-11
  • vue中的文本空格占位符說(shuō)明

    vue中的文本空格占位符說(shuō)明

    這篇文章主要介紹了vue中的文本空格占位符說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)

    Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)

    這篇文章主要介紹了Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04
  • Vue編程三部曲之模型樹(shù)優(yōu)化示例

    Vue編程三部曲之模型樹(shù)優(yōu)化示例

    這篇文章主要為大家介紹了Vue編程三部曲之模型樹(shù)優(yōu)化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • vue仿ios列表左劃刪除

    vue仿ios列表左劃刪除

    這篇文章主要為大家詳細(xì)介紹了vue仿ios列表左劃刪除,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式

    vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式

    這篇文章主要介紹了vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • Vue方法與事件處理器詳解

    Vue方法與事件處理器詳解

    這篇文章主要為大家詳細(xì)介紹了Vue方法與事件處理器,,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • vue-cli之引入Bootstrap問(wèn)題(遇到的坑,以及解決辦法)

    vue-cli之引入Bootstrap問(wèn)題(遇到的坑,以及解決辦法)

    這篇文章主要介紹了vue-cli之引入Bootstrap問(wèn)題(遇到的坑,以及解決辦法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評(píng)論