<nav id="c88yu"></nav>

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

陳江龍發布于2019-08-23 12:24 / 3403人閱讀

最近工作中需要用到echarts，由于項目是用的vue-cli開發的。在網上搜到vue中合成了vue-echarts，但是不想使用vue中規定好的數據格式，于是就自己做了一個vue項目引用原生echarts的簡單demo，實現過程如下：用了兩種實現方式

準備工作 1、安裝echarts依賴

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

2、全局引入

main.js中引入

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

創建圖表 第一種創建方式

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

創建WelcomePage.vue

實現效果如下圖：

第二種實現方式（以組件的形式）

創建父組件 father.vue

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

創建子組件barGraph.vue

   
    {{ msg }}

創建pieGraph.vue

效果實現如下：

路由文件如下：

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云服務器域名解析的兩種主要方式為 json的兩種結構】數據統計的兩種方法最優生成樹的兩種算法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98463.html

記一次vue-webpack項目優化實踐【更新】

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

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

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

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

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

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

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

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

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

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