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

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

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

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

控制臺(tái)輸入：npm install echarts --save

2、全局引入

main.js中引入

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

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

在一個(gè).vue文件中引入多張圖表

創(chuàng)建WelcomePage.vue

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

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

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

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

創(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
        }
      ]
    },
  ]
})

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98463.html

相關(guān)文章

記一次vue-webpack項(xiàng)目?jī)?yōu)化實(shí)踐【更新】

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

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

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

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

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

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

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

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

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

DirtyMind 2019-08-20 15:33 評(píng)論0 收藏0