資訊專欄INFORMATION COLUMN
摘要：前端時間做一個的項目，是按需引入的如下引入主模塊引入折線圖引入提示框和圖例組件然后發(fā)現(xiàn)在縮放瀏覽器窗口時折線圖并不會自適應(yīng)，費(fèi)了好一會才解決，記錄下來給需要的小伙伴，解決方法是在里面調(diào)用如下方法折線圖寬高自適應(yīng)
前端時間做一個vue的項目，echart是按需引入的如下：
// 引入 ECharts 主模塊 import echarts from "echarts/lib/echarts" // 引入折線圖 import "echarts/lib/chart/line" // 引入提示框和圖例組件 import "echarts/lib/component/tooltip" import "echarts/lib/component/legendScroll"
然后發(fā)現(xiàn)在縮放瀏覽器窗口時折線圖并不會自適應(yīng)，費(fèi)了好一會才解決，記錄下來給需要的小伙伴，
解決方法是在mounted里面調(diào)用如下方法：
init () {
//折線圖寬高自適應(yīng)
const self = this;
setTimeout(() => {
window.onresize = function () {
if(self.$refs.lineChart) {
self.chart = echarts.init(self.$refs.lineChart);
self.chart.resize();
}
};
}, 20);
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/51913.html
摘要：前端時間做一個的項目，是按需引入的如下引入主模塊引入折線圖引入提示框和圖例組件然后發(fā)現(xiàn)在縮放瀏覽器窗口時折線圖并不會自適應(yīng)，費(fèi)了好一會才解決，記錄下來給需要的小伙伴，解決方法是在里面調(diào)用如下方法折線圖寬高自適應(yīng) 前端時間做一個vue的項目，echart是按需引入的如下： // 引入 ECharts 主模塊 import echarts from echarts/lib/echarts ...
摘要：前端時間做一個的項目，是按需引入的如下引入主模塊引入折線圖引入提示框和圖例組件然后發(fā)現(xiàn)在縮放瀏覽器窗口時折線圖并不會自適應(yīng)，費(fèi)了好一會才解決，記錄下來給需要的小伙伴，解決方法是在里面調(diào)用如下方法折線圖寬高自適應(yīng) 前端時間做一個vue的項目，echart是按需引入的如下： // 引入 ECharts 主模塊 import echarts from echarts/lib/echarts ...
摘要：原來的格式修改為現(xiàn)在的格式篇幅所限，我這里沒有詳細(xì)列出來詳細(xì)請訪問我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。 一.場景 在使用echarts3做圖表的時候，可能會遇到一些特殊的需求： 星期一到星期四這幾個點的折線顯示一個顏色，周五到周日這幾個點的折線顯示另外一個顏色，來起到強(qiáng)調(diào)區(qū)別的作用。 二.效果圖 先看一下效果圖，你會有一個更清晰的認(rèn)識: showImg(...
摘要：原來的格式修改為現(xiàn)在的格式篇幅所限，我這里沒有詳細(xì)列出來詳細(xì)請訪問我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。 一.場景 在使用echarts3做圖表的時候，可能會遇到一些特殊的需求： 星期一到星期四這幾個點的折線顯示一個顏色，周五到周日這幾個點的折線顯示另外一個顏色，來起到強(qiáng)調(diào)區(qū)別的作用。 二.效果圖 先看一下效果圖，你會有一個更清晰的認(rèn)識: showImg(...
閱讀 3478·2021-10-27 14:20
閱讀 2646·2021-10-08 10:05
閱讀 1696·2021-09-09 09:33
閱讀 2959·2019-08-30 13:16
閱讀 1505·2019-08-29 18:34
閱讀 1246·2019-08-29 10:58
閱讀 1292·2019-08-28 18:22
閱讀 1287·2019-08-26 13:33
