echart vue 图表大小_echart随窗口大小变化自适应（Vue）

原标题：echart随窗口大小变化自适应(Vue)

直入主题啦！效果图：

Vue中使用echart的教程很多，这里主要记录下自适应窗口大小变化，因为踩了很多坑，最终解决了，希望能帮助到大家(下面是缩小后的图)

其实就只要改几行代码：

width换成百分比(height应该也OK)

1

随窗口大小调整(加在setOption之后；一定要加哦，否则是不会变的)

myChart.setOption(options);

window.onresize = myChart.resize; //加这行代码，没错！

1

2

下面还有一些小建议

安装与按需加载

安装

npm install echarts -S

1

按需加载

//全局环境

let echarts = require("echarts/lib/echarts");

// 按需要引入折线图组件(其他的就不需要啦)

require("echarts/lib/chart/line");

1

2

3

4

一个调试工具(不太熟悉echart的小伙伴试一试不错哦~网页上调试你的图表)

biu~

https://echarts.baidu.com/examples/editor.html?c=line-simple&theme=light

小刀资源网/http://www.xiaodaozy.com

下面是我图表的option，有折线阴影，以及坐标轴和轴线的设置

责任编辑：