vue 中echart折線自適應

xiaoqibTn 發布于2019-08-30 14:02 / 1839人閱讀

摘要：前端時間做一個的項目，是按需引入的如下引入主模塊引入折線圖引入提示框和圖例組件然后發現在縮放瀏覽器窗口時折線圖并不會自適應，費了好一會才解決，記錄下來給需要的小伙伴，解決方法是在里面調用如下方法折線圖寬高自適應

前端時間做一個vue的項目，echart是按需引入的如下：

// 引入 ECharts 主模塊
import echarts from "echarts/lib/echarts"
// 引入折線圖
import "echarts/lib/chart/line"
// 引入提示框和圖例組件
import "echarts/lib/component/tooltip"
import "echarts/lib/component/legendScroll"

然后發現在縮放瀏覽器窗口時折線圖并不會自適應，費了好一會才解決，記錄下來給需要的小伙伴，
解決方法是在mounted里面調用如下方法：

init () {
        //折線圖寬高自適應
        const self = this;
        setTimeout(() => {
          window.onresize = function () {
            if(self.$refs.lineChart) {
               self.chart = echarts.init(self.$refs.lineChart);
               self.chart.resize();
            }
          };
        }, 20);
    }

云服務器 GPU云服務器自適應文本自適應文字自適應自適應沉底

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115721.html

vue 中echart折線自適應

摘要：前端時間做一個的項目，是按需引入的如下引入主模塊引入折線圖引入提示框和圖例組件然后發現在縮放瀏覽器窗口時折線圖并不會自適應，費了好一會才解決，記錄下來給需要的小伙伴，解決方法是在里面調用如下方法折線圖寬高自適應前端時間做一個vue的項目，echart是按需引入的如下： // 引入 ECharts 主模塊 import echarts from echarts/lib/echarts ...

jayce 2019-08-01 18:39 評論0 收藏0
vue 中echart折線自適應

摘要：前端時間做一個的項目，是按需引入的如下引入主模塊引入折線圖引入提示框和圖例組件然后發現在縮放瀏覽器窗口時折線圖并不會自適應，費了好一會才解決，記錄下來給需要的小伙伴，解決方法是在里面調用如下方法折線圖寬高自適應前端時間做一個vue的項目，echart是按需引入的如下： // 引入 ECharts 主模塊 import echarts from echarts/lib/echarts ...

guyan0319 2019-08-22 14:51 評論0 收藏0
echarts3的折線圖怎么分段顯示不同的顏色

摘要：原來的格式修改為現在的格式篇幅所限，我這里沒有詳細列出來詳細請訪問我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。一.場景在使用echarts3做圖表的時候，可能會遇到一些特殊的需求：星期一到星期四這幾個點的折線顯示一個顏色，周五到周日這幾個點的折線顯示另外一個顏色，來起到強調區別的作用。二.效果圖先看一下效果圖，你會有一個更清晰的認識: showImg(...

J4ck_Chan 2019-08-21 10:52 評論0 收藏0
echarts3的折線圖怎么分段顯示不同的顏色

摘要：原來的格式修改為現在的格式篇幅所限，我這里沒有詳細列出來詳細請訪問我的的折線圖怎么分段顯示不同的顏色再次刷新，是不是兩條斷線連上了呢。一.場景在使用echarts3做圖表的時候，可能會遇到一些特殊的需求：星期一到星期四這幾個點的折線顯示一個顏色，周五到周日這幾個點的折線顯示另外一個顏色，來起到強調區別的作用。二.效果圖先看一下效果圖，你會有一個更清晰的認識: showImg(...

mumumu 2019-06-27 13:50 評論0 收藏0