vue文件中使用echarts.js的兩種方式

陳江龍發(fā)布于2019-08-23 12:24 / 3416人閱讀

最近工作中需要用到echarts，由于項目是用的vue-cli開發(fā)的。在網(wǎng)上搜到vue中合成了vue-echarts，但是不想使用vue中規(guī)定好的數(shù)據(jù)格式，于是就自己做了一個vue項目引用原生echarts的簡單demo，實(shí)現(xiàn)過程如下：用了兩種實(shí)現(xiàn)方式

準(zhǔn)備工作 1、安裝echarts依賴

控制臺輸入：npm install echarts --save

2、全局引入

main.js中引入

import echarts from "echarts"
Vue.prototype.$echarts = echarts

創(chuàng)建圖表 第一種創(chuàng)建方式

在一個.vue文件中引入多張圖表

創(chuàng)建WelcomePage.vue

實(shí)現(xiàn)效果如下圖：

第二種實(shí)現(xiàn)方式（以組件的形式）

創(chuàng)建父組件 father.vue

  
    {{ msg }}
    第二種方式：通過組件的方式進(jìn)行頁面渲染

創(chuàng)建子組件barGraph.vue

   
    {{ msg }}

創(chuàng)建pieGraph.vue

效果實(shí)現(xiàn)如下：

路由文件如下：

import WelcomePage from "@/components/WelcomePage"
import Father from "@/components/father"

import BarGraph from "@/components/bargraph"
import PieGraph from "@/components/piegraph"

export default new Router({
  routes: [
    {
      path: "/",
      name: "WelcomePage",
      component: WelcomePage
    },
    {
      path: "/father",
      name: "father",
      component: Father,
      children:[
        {
          path: "/bargraph",
          name: "bargraph",
          component: BarGraph
        },
        {
          path: "/piegraph",
          name: "piegraph",
          component: PieGraph
        }
      ]
    },
  ]
})

GPU云服務(wù)器云服務(wù)器域名解析的兩種主要方式為 json的兩種結(jié)構(gòu)】數(shù)據(jù)統(tǒng)計的兩種方法最優(yōu)生成樹的兩種算法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98463.html

相關(guān)文章

記一次vue-webpack項目優(yōu)化實(shí)踐【更新】

摘要：優(yōu)化空間不大主要關(guān)注另外兩個上面。目前為止，項目打包后的大部頭就是，這個目前的優(yōu)化空間較小。當(dāng)然，從整體優(yōu)化的大維度上來說優(yōu)化的點(diǎn)還有很多，這個文章繼續(xù)更新下去。項目現(xiàn)狀項目是一個數(shù)據(jù)監(jiān)測平臺，引入了ehcart和three.js 負(fù)責(zé)項目的數(shù)據(jù)可視化；打包后，體積高達(dá)2.1M，這個體積相比于我的項目規(guī)模來說就顯得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 評論0 收藏0
vue.js下引入百度地圖jsApi的兩種方法

摘要：下引入百度地圖的兩種方法前言今天有個項目需要用到百度地圖，一般我們在移動端使用百度地圖，都是直接通過這樣的方式，直接引入百度地圖的。通過模塊化引入的方法實(shí)際上百度地圖官方去年已經(jīng)開源了基于的和的對應(yīng)開源組件，我們可以直接通過安裝，然后使用。 vue.js下引入百度地圖jsApi的兩種方法前言今天有個項目需要用到百度地圖，一般我們在移動端使用百度地圖，都是直接通過這樣的方式，直接引入...

muddyway 2019-08-23 10:23 評論0 收藏0
vue前端上傳文件到阿里云oss的兩種方式，put文件流上傳，multipartUpload直接上傳

摘要：引入阿里云的上傳圖片文件調(diào)用后臺接口獲取阿里云上傳下載通行證初始化權(quán)限去掉對的校驗(yàn)選擇文件傳到上的名字調(diào)用上傳方法上傳文件進(jìn)度調(diào)用后臺添加文件的接口上傳成功上傳失敗彈出上傳失敗的消息如果傳到阿里云的圖片要展示出來要在的圖片路徑后面引入阿里云oss的js 上傳圖片/文件 mounted () { this.initConfig() // 調(diào)用后臺接口獲取阿里云上傳下載通行證 } ...

K_B_Z 2019-08-22 18:32 評論0 收藏0
酷狗音樂- Vue / React 全家桶的兩種實(shí)現(xiàn)

摘要：引言兩個月前用全家桶實(shí)現(xiàn)過一次酷狗音樂，最近又用全家桶重構(gòu)了下，最終成果和的實(shí)現(xiàn)基本一致，放個圖手機(jī)預(yù)覽戳版本版本。的行為結(jié)構(gòu)表現(xiàn)分離，很明顯，而的分離雖然不是很明顯，但實(shí)際上也是有的。發(fā)送指令，最終會到里合并數(shù)據(jù)，與中的類似。引言兩個月前用 Vue 全家桶實(shí)現(xiàn)過一次酷狗音樂，最近又用 React 全家桶重構(gòu)了下，最終成果和 Vue的實(shí)現(xiàn)基本一致，放個圖： showImg(htt...

hot_pot_Leo 2019-08-23 14:57 評論0 收藏0
關(guān)于一些Vue的文章。（2）

摘要：原文鏈接我的，歡迎。這次想要分享的一篇文章是從一個奇怪的錯誤出發(fā)理解的基本概念。瞬間明白了，原來是函數(shù)，一個考驗(yàn)編程能力的函數(shù)，比更接近編譯器。來看這里有一個小知識點(diǎn)被忽略在實(shí)例掛載之后，元素可以用訪問腦補(bǔ)會用到的場景中。。。原文鏈接我的blog，歡迎STAR。這次想要分享的一篇文章是：從一個奇怪的錯誤出發(fā)理解Vue的基本概念。這篇文章以Vue的兩種構(gòu)建方式做為切入點(diǎn)，深入探討...

DirtyMind 2019-08-20 15:33 評論0 收藏0