在后台管理系统中，图表是一个很普遍的元素。目前常用的图标插件有 charts,  Echarts, highcharts。这次将介绍 Echarts 在 Vue 项目中的应用。 [b]一、安装插件[/b] 使用 cnpm 安装 Echarts 和之前介绍的 axios 类似，echarts 也不能通过 Vue.use() 进行全局调用 通常是在需要使用图表的 .vue 文件中直接引入 也可以在 main.js 中引入，然后修改原型链 然后就可以全局使用了 [b]二、创建图表[/b] 首先需要在 HTML 中创建图表的容器 需要注意的是，图表的容器必须指定宽高，也就是说 width，height 不能使用百分比，只能用 px 这样确实不够灵活，不过我们可以用 js 来改变 width 和 height，使图表容器能够自适应，具体的实现请往后看 然后在 mounted 中创建图表，具体的配置参考[url=http://echarts.baidu.com/tutorial.html]官方文档[/url]，这里不再赘述 [b] 三、按需引入[/b] 上面引入的 echarts 包含了所有图表，但有时候我们只需要一两个基本图表，这时候完整的 echarts 就显得累赘 假如只需要创建一个饼图，那么可以这么做： 之所以使用 require 而不是 import，是因为 require 可以直接从 node_modules 中查找，而 import 必须把路径写全 可以按需引入的模块列表见 [url=https://github.com/ecomfe/echarts/blob/master/index.js]https://github.com/ecomfe/echarts/blob/master/index.js[/url] [b] 四、适应容器[/b] 上面说过，图表的容器必须固定宽高，这确实是一个比较反人类的设定 为了解决这个问题，需要给图表容器外面再加一个容器，而这个外容器的宽高可以适应页面。上面的 <div class="charts"> 就是这样的外容器 当页面加载的时候，将外容器的宽高，赋给图表容器 但这只是解决了页面加载时的自适应问题 如果在页面加载之后，仍需要图表自适应宽高，就需要用到 echarts 的[url=http://echarts.baidu.com/tutorial.html#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94]媒体查询[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。