深入前端Vue篇丨如何在项目中优雅使用Echarts（上篇）
写在前面最近因为一些不可抗力的因素，跳槽到一家为高校提供教育服务的公司，大学。刚入职的时候正好赶上PC端项目的重构，主要负责数据可视化这个模块，其实做起来也不复杂，但是也踩了一些坑使用Echarts的过程。所以有了这篇文章，这篇文章分为两部分。本文主要介绍如何在vue项目中使用Echarts，以及如何保证Echarts在页面上正常显示，并能随窗口变化。下一篇我会介绍主要介绍如何将API接口返回的数据填充到Echarts中。下一篇文章地址：深入Vue前端丨如何在项目中优雅地使用Echarts（下）希望小伙伴们看完后能够掌握在项目中使用Echarts的正确方法，以及可以在我的基础上避免一些陷阱。事不宜迟，让我们开始吧。在vue项目中安装安装Echarts其实还是比较简单的。直接在项目中打开命令行工具，执行npminstallecharts--save，也可以简写为npmiecharts-S，将Echarts安装到项目生产环境中。安装完成后，我们需要打开main.js文件，在上面找个地方导入Echarts，挂载到vue的原型上。具体代码如下importechartsfrom'echarts'Vue.prototype.$echarts=echartsusedin简单安装挂载原型后，我们就可以直接在需要的页面使用了。首先，我们需要创建一个容器，一个空的div，可以放置Echarts
这里我使用ref来获取DOM节点，主要是为了避免Echarts容器在生成之前进行初始化。创建容器后，就可以使用数据渲染Echarts了。为了方便小伙伴们，我这里贴出一个公开代码。项目中需要使用Echarts的可以直接复制~mounted(){this.setMyEchart()//页面挂载后执行},methods:{setMyEchart(){constmyChart=this.$refs.myChart;//通过ref获取DOM节点if(myChart){constthisChart=this.$echarts.init(myChart);//使用原型调用Echarts的初始化方法constoption={};//需要图表的各种配置都写在{}里，可以在官方案例中修改后复制过来thisChart.setOption(option);//将写好的配置项挂载到Echarts中}}}makeEchartsin基本结构正常显示在页面上后，可以去Echarts官方示例中找到自己需要的图，复制option中的内容，粘贴到页面的option对象中。这里我以雷达图为例，贴上代码后，页面是这样的。宽度只有100px。其实这是因为Echarts不识别百分比系统，所以会把100%识别为100px。我们修改浏览器的宽高后，触发thisChart.resize();，图表可以正常显示，但是用户进来后我们不能改变浏览器的宽高，官方建议是我们给Echarts容器设置一个特定的宽高来保证显示，这显然不是一个很好的适配方案。所以我们要设置动态宽度：在这一步，我们首先要有一个宽度参考对象（这个参考对象可以是一个百分比宽度，因为当我们得到宽度的时候，它会转换成一个真正的像素宽度），这个参考object可以是chart的wrap也可以是相邻的相同宽度的DOM节点。以我的页面为例，获取下面块的宽度，假设这个div的类名是content，那么我们可以写如下代码document.querySelector('#myChart').style.width=document.querySelector('.content').clientWidth可以一开始就设置一个特定的宽度，也可以在浏览器的宽高改变后自适应改变。至于内容，大家可以自己找自己需要的修改。更多配置项可以参考此链接学习。结束语经过以上的学习，相信大家对Echarts的使用有了初步的了解。其实比较简单。重要的是你想展示什么。选择好后，复制到我们的模板中。下篇主要介绍如何将API接口返回的数据填充到Echarts中。深入Vue前端篇丨如何在项目中优雅的使用Echarts（下）最后，把所有代码都给大家参考。
