vue中的echarts實現(xiàn)寬度自適應的解決方案
更新時間:2022年09月17日 08:09:16 作者:小茴香
這篇文章主要介紹了vue中的echarts實現(xiàn)寬度自適應,本文給大家分享實現(xiàn)方案,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
今天項目中需要使用到 echarts
為了自適應。找到了。以下解決方案、
效果圖
代碼
<template> <!-- 這是圖表開始 --> <div class="chart"> <div ref="main1" style="width: 600px;height:400px;" ></div> <div ref="main2" style="width: 600px;height:400px;" ></div> </div> <!-- 這是圖表結束 --> </template> <script> // 導入echarts import echarts from 'echarts' export default { name: 'HomeIndex', components: { }, props: {}, data () { return { } }, computed: { }, watch: { }, created () { }, mounted () { var myChart1 = echarts.init(this.$refs.main1) var myChart2 = echarts.init(this.$refs.main2) var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] } myChart1.setOption(option) myChart2.setOption(option) window.addEventListener('resize', () => { myChart1.resize() }) window.addEventListener('resize', () => { myChart2.resize() }) window.onresize = () => { clearTimeout(this.timer) this.timer = setTimeout(() => { }, 300) } }, methods: { } } </script>
補充:下面看下VUE+ECharts 自適應寬度
card的邊框,chart divwidth: '100%'
代碼:
<el-row :gutter="5" style="padding-top: 0px"> <el-col :span="12"> <el-card> <div id="myChart1" :style="{ width: '100%', height: '260px' }"></div> </el-card> </el-col> <el-col :span="12"> <el-card> <div id="myChart2" :style="{ width: '100%', height: '260px' }"></div> </el-card> </el-col> </el-row> <el-row :gutter="5" style="padding-top: 0px"> <el-col :span="12"> <el-card> <div id="myChart3" :style="{ width: '100%', height: '260px' }"></div> </el-card> </el-col> <el-col :span="12"> <el-card> <div id="myChart4" :style="{ width: '100%', height: '260px' }"></div> </el-card> </el-col> </el-row> <el-row :gutter="5" style="padding-top: 0px"> <el-col :span="12"> <el-card> <div id="myChart5" :style="{ width: '100%', height: '260px' }"></div> </el-card> </el-col> <el-col :span="12"> <el-card> <div id="myChart6" :style="{ width: '100%', height: '260px' }"></div> </el-card> </el-col> </el-row>
以上內容轉載鏈接:https://www.cnblogs.com/xiaosheng1989/p/16415660.html
到此這篇關于vue中的echarts實現(xiàn)寬度自適應的文章就介紹到這了,更多相關vue echarts寬度自適應內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
解決Element組件的坑:抽屜drawer和彈窗dialog
這篇文章主要介紹了解決Element組件的坑:抽屜drawer和彈窗dialog問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07Vue中l(wèi)ocalStorage那些你不知道的知識分享
在Vue.js中,?Vuex是一個強大的狀態(tài)管理工具,而localStorage則是一種用于存儲和獲取本地數(shù)據(jù)的機制,雖然這兩個東西都可以用來存儲數(shù)據(jù),但它們之間還是有很大的區(qū)別,本文就來簡單說說吧2023-05-05