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

詳解Vue中使用Echarts的兩種方式

 更新時(shí)間:2018年07月03日 09:22:42   作者:Yvonne  
這篇文章主要介紹了Vue中使用Echarts的兩種方式,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1. 直接引入echarts

先npm安裝echarts

npm install echarts --save

開發(fā):

main.js

import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)
myCharts.js
/**
 * 各種畫echarts圖表的方法都封裝在這里
 */
import echarts from 'echarts'
(function() {
  var chart = {};
  chart.install = function(vue) {
    vue.prototype.$chart = {
      //畫一條簡單的線
      line1: function(id) {
        this.chart = echarts.init(document.getElementById(id));
        this.chart.clear();
        const optionData = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }]
        };
        this.chart.setOption(optionData);
      },
    }
  }
  if(typeof exports == 'object') {
    module.exports = chart
  }
})()
hello.vue
...
<div id="chart1"></div>
...
mounted() {
  this.$chart.line1('chart1');
},

2、使用vue-echarts

先npm安裝vue-echarts

npm install vue-echarts

開發(fā):

main.js

import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
Vue.component('chart', ECharts)
hello.vue
...
<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
...
data: function() {
  return {
    orgOptions: {},
  }
},
...
mounted() {
  this.orgOptions = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }]
  }
}

總結(jié)

以上所述是小編給大家介紹的Vue中使用Echarts的兩種方式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • vue中$set用法詳解

    vue中$set用法詳解

    在vue中,并不是任何時(shí)候數(shù)據(jù)都是雙向綁定的,解決數(shù)據(jù)沒有被雙向綁定我們可以使用?vm.$set?實(shí)例方法,該方法是全局方法?Vue.set?的一個(gè)別名,這篇文章主要介紹了vue中$set用法詳細(xì)講解,需要的朋友可以參考下
    2022-12-12
  • Vue 3開發(fā)中VueUse強(qiáng)大Hooks庫

    Vue 3開發(fā)中VueUse強(qiáng)大Hooks庫

    VueUse提供了一個(gè)豐富且強(qiáng)大的Hooks庫,可以幫助開發(fā)者快速實(shí)現(xiàn)各種功能,提高開發(fā)效率,本文來詳細(xì)的介紹一下,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-08-08
  • 使用vscode 開發(fā)uniapp的方法

    使用vscode 開發(fā)uniapp的方法

    本文給大家分享我使用vscode開發(fā)的一些配置。其中包括uniapp組件語法提示,uniapp代碼提示,代碼自動(dòng)格式化問題,對vscode 開發(fā)uniapp的相關(guān)知識(shí)感興趣的朋友一起看看吧
    2021-08-08
  • vue 子組件watch監(jiān)聽不到prop的解決

    vue 子組件watch監(jiān)聽不到prop的解決

    這篇文章主要介紹了vue 子組件watch監(jiān)聽不到prop的解決,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue列表數(shù)據(jù)發(fā)生變化指令沒有更新問題及解決方法

    vue列表數(shù)據(jù)發(fā)生變化指令沒有更新問題及解決方法

    這篇文章主要介紹了vue中使用指令,列表數(shù)據(jù)發(fā)生變化指令沒有更新問題,本文給出了解決辦法,需要的朋友可以參考下
    2020-01-01
  • Vue2.0 實(shí)現(xiàn)歌手列表滾動(dòng)及右側(cè)快速入口功能

    Vue2.0 實(shí)現(xiàn)歌手列表滾動(dòng)及右側(cè)快速入口功能

    這篇文章主要介紹了Vue2.0實(shí)現(xiàn)歌手列表滾動(dòng)及右側(cè)快速入口功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-08-08
  • Vue中util的工具函數(shù)實(shí)例詳解

    Vue中util的工具函數(shù)實(shí)例詳解

    本文通過實(shí)例代碼給大家介紹了Vue中util的工具函數(shù),代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-07-07
  • Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作分析

    Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作分析

    這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作,結(jié)合實(shí)例形式分析了vue.js使用Watch針對數(shù)組、對象、變量監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下
    2019-04-04
  • Vue配合iView實(shí)現(xiàn)省市二級聯(lián)動(dòng)的示例代碼

    Vue配合iView實(shí)現(xiàn)省市二級聯(lián)動(dòng)的示例代碼

    本篇文章主要介紹了Vue配合iView實(shí)現(xiàn)省市二級聯(lián)動(dòng)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-07
  • vue 動(dòng)態(tài)創(chuàng)建組件的兩種方法

    vue 動(dòng)態(tài)創(chuàng)建組件的兩種方法

    這篇文章主要介紹了vue 動(dòng)態(tài)創(chuàng)建組件的兩種方法,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2020-12-12

最新評論