在vue中實(shí)現(xiàn)echarts隨窗體變化
<div id="myChart" :style="{width: '100%', height: '345px'}"></div> <script> export default { mounted(){ this.drawLine(); }, methods: { drawLine(){ var myChartContainer = document.getElementById('myChart'); //用于使chart自適應(yīng)寬度,通過(guò)窗體寬計(jì)算容器高寬 var resizeMyChartContainer = function(){ myChartContainer.style.width=(document.body.clientWidth-75)+'px' } //設(shè)置容器高寬 resizeMyChartContainer() // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例 var myChart = this.$echarts.init(myChartContainer) // 繪制圖表 myChart.setOption({ title: { text: '啟動(dòng)次數(shù)' }, tooltip: {}, xAxis: { type: 'category', data: ['2019-02-15', '2019-02-16', '2019-02-17', '2019-02-18', '2019-02-19', '2019-02-20', '2019-02-21'] }, yAxis: { type:'value' }, series: [{ type: 'line', data: [0,0, 0, 7, 0, 0,12], smooth:true, symbol: 'circle', symbolSize: 6, itemStyle:{ normal:{ color:'#fc8a0f', lineStyle:{ color:'#ff9c35' } } } }], }); window.onresize=function(){ resizeMyChartContainer(); myChart.resize(); } } }}</script>
補(bǔ)充知識(shí):echarts 圖表大小隨窗口變動(dòng)而自適應(yīng)變動(dòng)(無(wú)需刷新瀏覽器調(diào)整)
問(wèn)題提出:
使用echars做完圖表之后,需要根據(jù)瀏覽器窗口的縮放做自適應(yīng)效果。
原因分析及解決方案:
echars的圖標(biāo)實(shí)例事實(shí)上并沒(méi)有主動(dòng)的去綁定resize()事件,就是說(shuō)顯示區(qū)域的大小改變內(nèi)部并不知道,當(dāng)你需要去做一些自適應(yīng)的效果的時(shí)候,需要主動(dòng)綁定這個(gè)時(shí)間才能達(dá)到自使用的效果,常見(jiàn)的如window.onresize = myChart.resize()
示例:
var map5 = echarts.init(document.getElementById('map5')); var option5 = { backgroundColor: '#def1f9', color: ['#c23531', '#1875ff'], title: { left: 10, top: 10, text: 'Bill charts for the past year' }, // color: ['#1875ff', '#1fe6ab', '#eee119', '#ff3074', '#6f99d9'], legend: { top: 30, right: 30 }, tooltip: {}, xAxis: {type: 'category'}, yAxis: {}, series: [ {type: 'bar'}, {type: 'bar'} ] } map5.setOption(option5); window.onresize = function () { setTimeout(function () { map1.resize() map2.resize() map3.resize() map4.resize() map5.resize() },10) }
重點(diǎn):
window.onresize = function () { map1.resize() ; // 如果有多個(gè)圖標(biāo)變動(dòng),可寫(xiě)多個(gè) }
以上這篇在vue中實(shí)現(xiàn)echarts隨窗體變化就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue使用echarts實(shí)現(xiàn)水平柱形圖實(shí)例
- 在vue中實(shí)現(xiàn)清除echarts上次保留的數(shù)據(jù)(親測(cè)有效)
- vue 項(xiàng)目引入echarts 添加點(diǎn)擊事件操作
- 在項(xiàng)目vue中使用echarts的操作步驟
- vue中echarts引入中國(guó)地圖的案例
- 關(guān)于vue 結(jié)合原生js 解決echarts resize問(wèn)題
- 在Vue 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表
- 在vue中使用echarts(折線圖的demo,markline用法)
- 解決Vue + Echarts 使用markLine標(biāo)線(precision精度問(wèn)題)
- 解決echarts vue數(shù)據(jù)更新,視圖不更新問(wèn)題(echarts嵌在vue彈框中)
- 在vue中使用Echarts利用watch做動(dòng)態(tài)數(shù)據(jù)渲染操作
- 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題
- 在vue中使用Echarts畫(huà)曲線圖的示例
相關(guān)文章
Vue如何通過(guò)瀏覽器控制臺(tái)查看全局data值
在寫(xiě)vue項(xiàng)目時(shí)想到一個(gè)問(wèn)題,項(xiàng)目里面的文件都是一個(gè)個(gè)的組件,如何在控制臺(tái)中修改,查看組件data里的值呢,下面這篇文章主要給大家介紹了關(guān)于Vue如何通過(guò)瀏覽器控制臺(tái)查看全局data值的相關(guān)資料,需要的朋友可以參考下2023-04-04el-table?fixed固定列導(dǎo)致錯(cuò)位的解決方法介紹
ElementUI中el-table設(shè)置指定列固定不動(dòng),不受滾動(dòng)條影響,下面這篇文章主要給大家介紹了關(guān)于el-table?fixed固定列導(dǎo)致錯(cuò)位的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11使用Vue Router進(jìn)行路由組件傳參的實(shí)現(xiàn)方式
Vue Router 為 Vue.js 應(yīng)用提供了完整的路由解決方案,其中包括了組件間的數(shù)據(jù)傳遞功能,通過(guò)路由組件傳參,我們可以輕松地在導(dǎo)航到新頁(yè)面時(shí)傳遞必要的數(shù)據(jù),本文將深入探討如何使用 Vue Router 進(jìn)行路由組件間的傳參,并通過(guò)多個(gè)示例來(lái)展示其實(shí)現(xiàn)方式2024-09-09Vue整合Node.js直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作過(guò)程詳解
這篇文章主要給大家分享Vue整合Node.js,直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作的詳細(xì)過(guò)程,文中有詳細(xì)的代碼講解,具有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07vite配置@別名以及讓vscode智能提示路經(jīng)的步驟
這篇文章主要給大家介紹了關(guān)于vite配置@別名以及讓vscode智能提示路經(jīng)的步驟,文中通過(guò)代碼示例以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08