vue项目中echarts自适应宽高的设置_教程

在实际的vue项目中，遇到想让echarts能根据屏幕，或者是父组件的大小改变来自适应的改变图表的大小，那么下边我就介绍一下，如何使用vue中的自定义指令，让图标自适应

1、首先新建一个js文件，用来自定义一个全局指令：

2、然后在main.js中引入：

3、然后在自己使用的echarts上加入此指令！

完美！

打开APP进入。

点击个人中心按钮，就可打开手机ECHARTS软件个性化之旅，然后，就会出现菜单，这里找到设置按钮，就可打开地图设置的下一级菜单了，设置高度和字体。

高度和字体根据自己的喜好设置，可以全屏，也可以半屏设置，以视觉看清楚为佳。

echarts控制圆饼图的大小代码及方法如下：

1、新建静态页面pie.html，并引入echarts核心js文件。

2、在<body></body>元素内插入div饼图容器，设置其宽度和高度。

3、编写生成饼图图形的核心代码，有数据源和样式。

4、预览该静态页面，查看饼图效果，分别点击饼图块。

5、添加饼图块图例切换事件，并打印出饼图参数，更改参数值即可实现圆饼图大小的控制。

6、再次预览该界面，可以查看到饼图效果，并点击饼图分块。

欢迎分享，转载请注明来源：内存溢出

vue项目中echarts自适应宽高的设置