1. 程式人生 > >在Vue專案中如何使用其他外掛(eCharts & wangeditor)

在Vue專案中如何使用其他外掛(eCharts & wangeditor)

使用 echartys

1.使用其他外掛 ,直接npm安裝即可:

npm install echarts -S  //安裝echarts依賴

這裡寫圖片描述

2.建立圖表,在 main.js 全域性引入

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

3.在需要使用 echarts 圖表的地方 ,插入 html標籤以及 js

<template>
    <div id="myChart" :style="{width: '1500px', height: '600px'}"></div>
</template>
<script>
    export default {
      mounted(){
        this.drawLine();
      },
      methods: {
        drawLine(){
            // 基於準備好的dom,初始化echarts例項
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 繪製圖表
            myChart.setOption({
                title: { text: '冬季銷量統計'
}, tooltip: {}, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子",'毛衣','秋褲','外套','短袖','手套','帽子','衛衣','棒球服'] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5
, 20, 36, 10, 10, 20,15,22,33,8,6,21,22,39] }] }); } } }
</script>

這裡寫圖片描述

使用wangeditor

1.使用 npm下載 :

npm install wangeditor --save   //(注意 wangeditor 全部是小寫字母)

2.在需要的地方引入:

<template>
    <div>
        <div id="editorElem" style="text-align:left"></div>
    </div>  
</template>
<script>
 import E from 'wangeditor'
 export default {
      name: 'editor',
      data () {
        return {
          editorContent: ''
        }
      },
      mounted() {
        var editor = new E('#editorElem')
        editor.customConfig.onchange = (html) => {
          this.editorContent = html
        }
        editor.create()  
      }
    }
</script>

這裡寫圖片描述

相關推薦

Vue專案如何使用其他外掛eCharts & wangeditor

使用 echartys 1.使用其他外掛 ,直接npm安裝即可: npm install echarts -S //安裝echarts依賴 2.建立圖表,在 main.js 全域性引入

vue-apollo的使用--vue專案使用graphql詳細版

在前段時間使用graphql獲取資料,感覺獲取資料來說是方便了一些,但是也爆出了一系列的問題。先來graphql的使用方法… 下載依賴包 需要搭配Apollo一起使用 npm install -S apollo-cache-inmemory ap

vue專案使用sass適用於vue-cli腳手架專案

進入專案目錄: C:\Users\PC>cd XXX/XXXX/xxx //你的專案目錄 安裝sass的依賴: npm install --save-dev sass-loader npm install --save-dev node-s

iconfont 在vue專案的應用icon-component元件

前言:上一篇記錄了iconfont的三種基本使用方法。 在Vue中應該如何使用吶?Vue中的元件化思想很明確,要提高元件的複用率,增強專案的可維護性,擴充套件性。以下是採用icontfont的使用方式之symbol封裝的icon-component元件。 //components/Icon-s

如何在vue專案使用sassscss

前提:用vue -cli腳手架生成vue專案,cmd進入到專案根目錄 1.用npm安裝sass的依賴包(可使用cnpm淘寶映象) npm install --save-dev sass-loader //sass-loader依賴於node-sass npm inst

Android Studio將庫引入到專案出現錯誤例如Glide

在學習的過程中,由於書上的版本,不能與自己的Android studio各種庫的版本相互對應。有時候錯誤資訊並不是只提示某個庫出現錯誤,而是會引發各種各樣的錯誤,直接導致相對應的控制元件無法使用。 所以可以採用一種方法去引入庫。 1、點選File,開啟Pro

如何在實際專案使用Promise入門級

你們有沒有遇到過這樣的情況,ES6看過了,Promise的文字概念都懂,但是我要怎麼在專案中去寫一個Promise呢? 那天我就是帶著這樣的疑問去網上搜了下。最後成功地在專案中應用了Promise,只有實際成功使用一次,才能明白它的前因後果,明白它的用途。   1.這是一個vue的電商專案-商

vue專案最近使用的外掛整理---

 最近使用vue的腳手架開發專案,用了一些小外掛來實現一些功能,自己覺得應該要整理一下,方便自己之後的開發。一、複製外掛--  vue-clipboard2    此外掛的功能就是實現文字的複製,使用步驟如下:    1.安裝 npm install --save vue-c

關於在 vue專案echarts圖表的一些控制及陣列物件去重

1.利用replace對後臺返回的json資料做替換處理 (不管是多麼複雜的資料結構,都可以利用這樣的方法去全部匹配) var json = [{'real-name':'lolo'},{'real-name':'abc'},{'real-name':'

vue常用外掛貨幣、日期

貨幣外掛: 價格格式化 // https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/currency.js const digitsRE = /(\d{3})(?=\d)/g /** * [currency 金額格式化函式] * @

vue專案使用Echarts 動態更改圖表資料 , Vue 折線圖、柱狀圖等圖表動態重新整理 ,

問題:在vue元件中,用echarts外掛 動態獲取、修改圖表資料 解決:已解決! 第一步:開啟cmd命令視窗 安裝echarts依賴 安裝:npm install echarts -S 第二步:在main.js中全域性引入   //引入echarts的圖表外掛

vue專案如何使用多語言vue-i18n

因專案需要,需要使用多語言,特此記錄使用方法。 第一步:安裝vue-i18n npm install vue-i18n   第二步:在生成的i18n資料夾中的index.js裡引入vue-i18n   第三步:依舊在i18n資料夾中的indx.js檔

微信公眾號支付介面vue專案,兩種方法

第一種:引入微信js-sdk //在一個地方呼叫this.weixin()方法,比如說按鈕 //寫微信支付方法 weixin() { var that = this; var url=''; var params = {

PDF.js —— vue專案使用pdf.js顯示pdf檔案

前言:專案中有一個需要預覽下載pdf的需求,網上找了很久,決定使用 pdf.js 完成。 第一步: 首先肯定是匯入外掛,我是從官網直接下載,連結:點選開啟連結,注意需要放在static檔案目錄下 注意:這裡面有核心的pdf.js和pdf.worker.js,以及展示pdf的vi

vue專案關於錨點的帶變數使用方法全域性使用

問題 在普通html中,錨點的使用方法是: <a href="#123">點選就定位到123的錨點</a> ... <div id="123">這裡是錨點的位置</div> 但在vue專案中,各個頁面被劃分成了很多元件,經常是在

vue 專案使用echarts起步

在元件<mychart.vue>中: <template> <div> <div ref="mychart"></div> </div> </template> <script> exp

vue專案使用echarts

該示例使用 vue-cli 腳手架搭建 安裝echarts依賴 npm install echarts -S 1 或者使用國內的淘寶映象: 安裝 npm install -g cnpm --registry=https://registry.npm.taobao.org

介紹vue專案的axios請求get和post

一、先安裝axios依賴,還有qs依賴 npm install axios --save npm install qs --save qs依賴包用post請求需要用到的 插入一個知識點: npm install X --save 會把依賴包安裝在生產環境中,並且把依賴包名稱新增到 package

vue-baidu-map vue專案使用百度地圖搜尋,資訊視窗,獲取地點詳細資訊

最近做了一個垃圾分類的專案,要求使用百度地圖。主要實現以下幾個功能: 1、點選地圖獲取到經緯度和地點資訊 2、點選地圖實時顯示資訊視窗 3、區域搜尋功能,具體功能就是如下圖 ↓ 兩個api網址,一個vue-baidu-map的api,一個JavaScript的百度

Vue專案使用ueditor富文字編輯器

vue專案打包後引入的ueditor富文字編輯器,資源載入不正確 如下圖:一個個解決: 1:ueditor.css ①如果用的是ueditor.all.js,在29336行修改如下: ②如果用的是ueditor.all.mai