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

更新時(shí)間：2018年07月03日 09:22:42 作者：Yvonne

這篇文章主要介紹了Vue中使用Echarts的兩種方式,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1. 直接引入echarts

先npm安裝echarts

npm install echarts --save

開(kāi)發(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 = {
      //畫一條簡(jiǎn)單的線
      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

開(kāi)發(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的兩種方式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vue
echarts

相關(guān)文章

vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法
這篇文章主要介紹了vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
Vue.Js中的$watch()方法總結(jié)
這篇文章主要給大家介紹了在Vue.Js中的$watch()方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-03-03
通過(guò)vue-router懶加載解決首次加載時(shí)資源過(guò)多導(dǎo)致的速度緩慢問(wèn)題
這篇文章主要介紹了vue-router懶加載解決首次加載時(shí)資源過(guò)多導(dǎo)致的速度緩慢問(wèn)題,文中單獨(dú)給大家介紹了vue router路由懶加載問(wèn)題，需要的朋友可以參考下
2018-04-04
vite打包優(yōu)化分片打包依賴包詳解
這篇文章主要介紹了vite打包優(yōu)化分片打包依賴包,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue通信方式EventBus的實(shí)現(xiàn)代碼詳解
這篇文章主要介紹了vue通信方法EventBus的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06
vue.js實(shí)現(xiàn)h5機(jī)器人聊天（測(cè)試版）
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)h5機(jī)器人聊天測(cè)試版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07
詳解vue-cli3使用
這篇文章主要介紹了詳解vue/cli 3使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue-awesome-swiper滑塊插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue-awesome-swiper滑塊插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
Vuejs第十二篇之動(dòng)態(tài)組件全面解析
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。接下來(lái)通過(guò)本文給大家介紹Vuejs第十二篇之動(dòng)態(tài)組件，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-09-09
vue實(shí)現(xiàn)純前端表格滾動(dòng)分頁(yè)加載
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)純前端表格滾動(dòng)分頁(yè)加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04