vue專案中使用echarts圖表
在後臺管理系統中,圖表是一個很普遍的元素。目前常用的圖示外掛有 charts, Echarts, highcharts。這次將介紹 Echarts 在 Vue 專案中的應用。
一、安裝外掛
使用 cnpm 安裝 Echarts
cnpm install echarts -S
和之前介紹的 axios 類似,echarts 也不能通過 Vue.use() 進行全域性呼叫
通常是在需要使用圖表的 .vue 檔案中直接引入
import echarts from 'echarts'
也可以在 main.js 中引入,然後修改原型鏈
Vue.prototype.$echarts = echarts
然後就可以全域性使用了
let myChart = this.$echarts.init(document.getElementById('myChart'))
二、建立圖表
首先需要在 HTML 中建立圖表的容器
需要注意的是,圖表的容器必須指定寬高,也就是說 width,height 不能使用百分比,只能用 px
這樣確實不夠靈活,不過我們可以用 js 來改變 width 和 height,使圖表容器能夠自適應,具體的實現請往後看
然後在 mounted 中建立圖表,具體的配置參考官方文件,這裡不再贅述
三、按需引入
上面引入的 echarts 包含了所有圖表,但有時候我們只需要一兩個基本圖表,這時候完整的 echarts 就顯得累贅
假如只需要建立一個餅圖,那麼可以這麼做:
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入餅圖元件
require('echarts/lib/chart/pie')
// 引入提示框和圖例元件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
四、適應容器
上面說過,圖表的容器必須固定寬高,這確實是一個比較反人類的設定
為了解決這個問題,需要給圖表容器外面再加一個容器,而這個外容器的寬高可以適應頁面。上面的 <div class=”charts”> 就是這樣的外容器
let chartBox = document.getElementsByClassName('charts')[0]
let myChart = document.getElementById('myChart')
// 用於使chart自適應高度和寬度,通過窗體高寬計算容器高寬
function resizeCharts () {
myChart.style.width = chartBox.style.width + 'px'
myChart.style.height = chartBox.style.height + 'px'
}
// 設定容器高寬
resizeCharts()
let mainChart = echarts.init(myChart)
mainChart.setOption(options)
當頁面載入的時候,將外容器的寬高,賦給圖表容器
但這只是解決了頁面載入時的自適應問題
如果在頁面載入之後,仍需要圖表自適應寬高,就需要用到 echarts 的媒體查詢
相關推薦
vue專案中使用Echarts 動態更改圖表資料 , Vue 折線圖、柱狀圖等圖表動態重新整理 ,
問題:在vue元件中,用echarts外掛 動態獲取、修改圖表資料 解決:已解決! 第一步:開啟cmd命令視窗 安裝echarts依賴 安裝:npm install echarts -S 第二步:在main.js中全域性引入 //引入echarts的圖表外掛
vue專案中使用echarts圖表
在後臺管理系統中,圖表是一個很普遍的元素。目前常用的圖示外掛有 charts, Echarts, highcharts。這次將介紹 Echarts 在 Vue 專案中的應用。 一、安裝外掛 使用 cnpm 安裝 Echarts cnpm install echarts -S 和之前介紹的 axios
關於在 vue專案中對echarts圖表的一些控制(及陣列物件去重)
1.利用replace對後臺返回的json資料做替換處理 (不管是多麼複雜的資料結構,都可以利用這樣的方法去全部匹配) var json = [{'real-name':'lolo'},{'real-name':'abc'},{'real-name':'
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 爬坑之旅 -- 在 VUE 專案中使用 ECharts 畫 K 線圖和麵積圖,並且可切換
現在的專案中需要做一個K線圖的功能,花了幾天時間查資料,讀文件,總算是基本搞定了,下面把這過程中一些需要注意的點記下來,以備不時之需。需要達到的效果如下: 說到做圖表,現在的成熟的解決方案就是百度的 ECharts 了,功能強大齊全,文件詳細,用的人多
vue專案中使用echarts 遇到問題總結2
一:echarts圖形的父級容器寬度設定為百分比形式,導致echarts變形;12解決方案:固定寬度沒問題,只要設定成百分比,有的好用,有的不好用,只能將寬高設定為rem,好在相差不大;二:vue-cli專案下使用 vue的tab切換3個不同的echarts圖表,未打包正常顯
在Vue專案中如何使用其他外掛(eCharts & wangeditor)
使用 echartys 1.使用其他外掛 ,直接npm安裝即可: npm install echarts -S //安裝echarts依賴 2.建立圖表,在 main.js 全域性引入
vue專案中使用echarts 遇到問題總結
需要注意echarts版本不同,部分屬性可能有所不同,我用的是echarts4.0. 一、echarts圖表自適應問題。 自適應程式碼 (function (doc, win) { var docEl = doc.documentElement, r
Vue專案中引入Echarts
在Vue專案中使用Echats,可以極大程度的方便完成很多Canvas功能。1. 安裝Echatsnpm install echarts --save2.專案main.js中引入Echarts// 引入Echarts import Echarts from 'echarts'
vue專案中引用echarts的幾種方式
準備工作: 首先我們初始化一個vue專案,執行vue init webpack echart,接著我們進入初始化的專案下。安裝echarts, npm install echarts -S //或 cnpm install echarts -S 安裝完成之後,我們就可
在 Vue 專案中使用 ECharts
import { mapActions, mapState } from 'vuex'; // 引入當前圖表配置需要用到的圖表、元件 import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/title'; import 'e
Vue系列——在vue專案中使用echarts
該示例使用 vue-cli 腳手架搭建 安裝echarts依賴 npm install echarts -S1 或者使用國內的淘寶映象: 安裝npm install -g cnpm --registry=https://registry.npm.taobao.org1使
在vue專案中封裝echarts的正確姿勢
為什麼需要封裝echarts 每個開發者在製作圖表時都需要從頭到尾書寫一遍完整的option配置,十分冗餘 在同一個專案中,各類圖表設計十分相似,甚至是相同,沒必要一直做重複工作 可能有一些開發者忘記考慮echarts更新資料的特性,以及視窗縮放時的適應問題。這樣導致資料更新了echarts檢視卻沒有更新,
vue專案中禁止移動端雙擊放大,雙手拉大放大的方法
在vue打包後生成的dist目錄檔案下下面有index.html 開啟裡面 把原來的這個 <meta name=viewport content="width=device-width,initial-scale=1"> 替換成這個就行了 <meta cont
解決關於 vue專案中 點選按鈕路由多了個問號
問題描述: 在vue專案開發過程中,點選按鈕結果頁面重新整理了一遍 後來發現路徑變成了 localhost:8080/?#/login 原因: 這裡是 form 表單,點選了button 按鈕,觸發了他的預設事件,就是觸發了提交這個行為。 解決方案 使用@click
把圖片公式轉化為文字內容。vue專案中引入MathJax.js
這是個圖片的公式,有img標籤引入。 我們想要轉成下面的效果: 在vue專案中引入MathJax.js 首先在index.html頁面 <script type="text/javascript" src="https://cdn.ma
vue專案中 讓頁面的title顯示的是對應的路由
】 這個頁面我看的是資源中心的頁面。如果什麼也不設定你看到的就是一個網址的連結在title的位置。 我想讓他看到對應的路由就當前而言就是資源中心幾個字替換那上面的網址。 你只需要在main.js裡面新增下面。 router.beforeEach((to, from, next) =&
vue專案中webpack配置代理,解決跨域問題
在config資料夾中的index.js檔案配置 主要是這句話 proxyTable: { //本地測試介面 '/': { target: 'http://xx.xx.xx.xx', changeOrigin: true, sec
vue專案中的一些問題
1、切換路由時根路由一直處於被啟用狀態 解決辦法: 加exact屬性 <router-link to="/home" exact>首頁</router-link> 如果需要進去首頁預設選中home,需要配置路由重定向 { path: