vue 中echart折线自适应

xiaoqibTn 发布于2019-08-30 14:02 / 1822人阅读

摘要：前端时间做一个的项目，是按需引入的如下引入主模块引入折线图引入提示框和图例组件然后发现在缩放浏览器窗口时折线图并不会自适应，费了好一会才解决，记录下来给需要的小伙伴，解决方法是在里面调用如下方法折线图宽高自适应

前端时间做一个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云服务器云服务器自适应文本自适应文字自适应自适应沉底

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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