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

vue中使用echarts的方法實(shí)例詳解

 更新時(shí)間：2023年05月10日 09:13:16   作者：Mr.Aholic  
這篇文章主要介紹了vue中使用echarts的方法,結(jié)合實(shí)例形式詳細(xì)分析了vue中使用echarts的包安裝、引入、生命周期函數(shù)元素掛載等相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下

1、安裝

npm install echarts --save

2、在vue中引入（全局引入）

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、在vue中的使用

需要用到echart的地方先設(shè)置一個(gè)div的id、寬高

提示：
可以在一個(gè)頁(yè)面中引入多個(gè)數(shù)據(jù)報(bào)表模板
使用div進(jìn)行位置的排版放置

4、模板代碼放在哪個(gè)位置

重點(diǎn)注意：其中const option = { }就是我們需要引進(jìn)echart圖表的代碼

<template>
  <div>
    <div ref="chart"></div>
  </div>
</template>

要在mounted生命周期函數(shù)中實(shí)例化echarts對(duì)象。確保dom元素已經(jīng)掛載到頁(yè)面中。

mounted(){
    this.getEchartData()  
    },
   methods: {
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {...}
        myChart.setOption(option)
        window.addEventListener("resize", function() {
          myChart.resize()
        })
      }
       this.$on('hook:destroyed',()=>{
         window.removeEventListener("resize", function() {
          myChart.resize();
        });
        })
    }
  }

5、完整的一個(gè)vue頁(yè)面實(shí)例：

<template>
  <div>
    <div ref="chart"></div>
    <div ref="chart1"></div>
  </div>
</template>
<script>
  export default {
    data() {
    },
    mounted() {
      this.getEchartData()
      this.getEchartData1()
    },
    methods: {
      getEchartData() {
        const chart = this.$refs.chart
        if (chart) {
          const myChart = this.$echarts.init(chart)
          const option = { legend: {},
            tooltip: {},
            dataset: {
              source: [
                ['訂單', 43.3, 85.8],
                ['訂單1', 83.1, 73.4],
                ['訂單2', 86.4, 65.2],
                ['訂單3', 72.4, 53.9],
                ['訂單4', 82.4, 53.9],
                ['訂單5', 42.4, 53.9],
                ['訂單6', 72.4, 53.9],
                ['訂單7', 72.4, 53.9]
              ]
            },
            xAxis: { type: 'category' },
            yAxis: {},
            series: [ { type: 'bar' }, { type: 'bar' }]}
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
        this.$on('hook:destroyed',()=>{
          window.removeEventListener("resize", function() {
            myChart.resize();
          });
        })
      },
      getEchartData1() {
        const chart1 = this.$refs.chart1
        if (chart1) {
          const myChart = this.$echarts.init(chart1)
          const option = {
            title: {
              text: 'Stacked Line'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230]
              },
              {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330]
              },
              {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330]
              },
              {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330]
              },
              {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330]
              }
            ]
          }
          myChart.setOption(option)
          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
        this.$on('hook:destroyed',()=>{
          window.removeEventListener("resize", function() {
            myChart.resize();
          });
        })
      },
    },
    watch: {},
    created() {
    }
  }
</script>

6、實(shí)現(xiàn)效果

在這里插入圖片描述

7、可能遇到的問(wèn)題，下載不成功。使用

cnpm install echarts --save

在這里插入圖片描述

8、11:25-32 "export ‘default’ (imported as ‘echarts’) was not found in 'echarts

修改引入的方式

// 引入echarts
import *as echarts from 'echarts'
Vue.prototype.$echarts = echarts

相關(guān)文章

  • Vue中mixin和extends的使用方法詳解

    Vue中mixin和extends的使用方法詳解

    當(dāng)我們談?wù)揤ue的組件擴(kuò)展時(shí),經(jīng)常會(huì)遇到mixin和extends這兩個(gè)關(guān)鍵詞,它們提供了一種有效的方式來(lái)共享和重用組件邏輯,本文將深入探討Vue中mixin和extends的使用方法,并詳細(xì)探討它們的覆蓋邏輯,以便你在實(shí)際項(xiàng)目中能夠更好地應(yīng)用它們
    2023-08-08
  • vue-cli 2.*中導(dǎo)入公共less文件的方法步驟

    vue-cli 2.*中導(dǎo)入公共less文件的方法步驟

    這篇文章主要介紹了vue-cli 2.*中導(dǎo)入公共less文件的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11
  • Vue之TodoList案例詳解

    Vue之TodoList案例詳解

    這篇文章主要為大家介紹了Vue之TodoList的案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助<BR>
    2021-11-11
  • 使用Vue逐步實(shí)現(xiàn)Watch屬性詳解

    使用Vue逐步實(shí)現(xiàn)Watch屬性詳解

    這篇文章主要介紹了使用Vue逐步實(shí)現(xiàn)Watch屬性詳解，watch對(duì)象中的value分別支持函數(shù)、數(shù)組、字符串、對(duì)象，較為常用的是函數(shù)的方式，當(dāng)想要觀察一個(gè)對(duì)象以及對(duì)象中的每一個(gè)屬性的變化時(shí)，便會(huì)用到對(duì)象的方式
    2022-08-08
  • vue如何根據(jù)url下載非同源文件

    vue如何根據(jù)url下載非同源文件

    我們?cè)陂_(kāi)發(fā)過(guò)程中，有時(shí)會(huì)遇到后端返回的文件地址和我們的網(wǎng)站不是同源的情況下，本文就介紹了vue如何根據(jù)url下載非同源文件，感興趣的可以了解一下
    2021-06-06
  • 解決vue加scoped后就無(wú)法修改vant的UI組件的樣式問(wèn)題

    解決vue加scoped后就無(wú)法修改vant的UI組件的樣式問(wèn)題

    這篇文章主要介紹了解決vue加scoped后就無(wú)法修改vant的UI組件的樣式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • Vue中computed(計(jì)算屬性)和watch(監(jiān)聽(tīng)屬性)的用法及區(qū)別說(shuō)明

    Vue中computed(計(jì)算屬性)和watch(監(jiān)聽(tīng)屬性)的用法及區(qū)別說(shuō)明

    這篇文章主要介紹了Vue中computed(計(jì)算屬性)和watch(監(jiān)聽(tīng)屬性)的用法及區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-07-07
  • 淺析Vue3中的邏輯復(fù)用

    淺析Vue3中的邏輯復(fù)用

    這篇文章主要為大家詳細(xì)介紹了Vue3中邏輯復(fù)用的相關(guān)知識(shí),文中的示例代碼簡(jiǎn)潔易懂,對(duì)我們深入了解Vue3有一定的幫助,需要的小伙伴可以參考下
    2023-12-12
  • 詳解Vue組件之間的數(shù)據(jù)通信實(shí)例

    詳解Vue組件之間的數(shù)據(jù)通信實(shí)例

    本篇文章主要介紹了詳解Vue組件之間的數(shù)據(jù)通信實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • vue中v-for循環(huán)選中點(diǎn)擊的元素并對(duì)該元素添加樣式操作

    vue中v-for循環(huán)選中點(diǎn)擊的元素并對(duì)該元素添加樣式操作

    這篇文章主要介紹了vue中v-for循環(huán)選中點(diǎn)擊的元素并對(duì)該元素添加樣式操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07

最新評(píng)論