在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專案中使用sass(scss)
前提:用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