原标题: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,有折线阴影,以及坐标轴和轴线的设置
责任编辑: