Vue 爬坑之路（八）—— 使用 Echarts 创建图表
发布时间：2020-12-16 23:16:57 所属栏目：百科 来源：网络整理
导读：在后台管理系统中，图表是一个很普遍的元素。目前常用的图标插件有 ,? ,。这次将介绍 Echarts 在 Vue 项目中的应用。 一、安装插件 使用 cnpm 安装 Echarts 和之前介绍的 axios 类似，echarts 也不能通过 Vue.use() 进行全局调用 通常是在 中直接引入 from '
|
在后台管理系统中，图表是一个很普遍的元素。目前常用的图标插件有 ,? ,。这次将介绍 Echarts 在 Vue 项目中的应用。 一、安装插件 使用 cnpm 安装 Echarts 和之前介绍的 axios 类似，echarts 也不能通过 Vue.use() 进行全局调用 通常是在中直接引入 from ''
也可以在 main.js 中引入，然后修改原型链 =
然后就可以全局使用了 = ..init(.getElementById(''))
二、创建图表 首先需要在 HTML 中创建图表的容器
需要注意的是，图表的容器必须指定宽高，也就是说 width，height 不能使用百分比，只能用 px 这样确实不够灵活，不过我们可以用 js 来改变 width 和 height，使图表容器能够自适应，具体的实现请往后看
然后在 mounted 中创建图表，具体的配置参考，这里不再赘述 三、按需引入 上面引入的 echarts 包含了所有图表，但有时候我们只需要一两个基本图表，这时候完整的 echarts 就显得累赘 假如只需要创建一个饼图，那么可以这么做：
echarts = require(
require(
require()
可以按需引入的模块列表见 四、适应容器 上面说过，图表的容器必须固定宽高，这确实是一个比较反人类的设定 为了解决这个问题，需要给图表容器外面再加一个容器，而这个外容器的宽高可以适应页面。上面的 chartBox = .getElementsByClassName()[ = .getElementById(<span style="color: #008000;">//<span style="color: #008000;"> 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
<span style="color: #000000;"><span style="color: #333399;">function <span style="color: #993300;">resizeCharts () { <span style="font-size: 14px;"><span style="color: #000000;">myChart.<span style="color: #800000;">style.width = chartBox.style.<span style="color: #800000;">width + <span style="color: #800000;">'<span style="color: #800000;">px<span style="color: #800000;">'<span style="color: #000000;"> <span style="font-size: 14px;"><span style="color: #000000;">myChart.<span style="color: #800000;">style.height = chartBox.style.<span style="color: #800000;">height + <span style="color: #800000;">'<span style="color: #800000;">px<span style="color: #800000;">'<span style="color: #000000;"> } <span style="color: #008000;">//<span style="color: #008000;"> 设置容器高宽 <span style="color: #000000;"><span style="color: #993300;">resizeCharts() <span style="color: #333399;">let <span style="font-size: 14px;"><span style="color: #000000;"><span style="font-size: 14px;"><span style="color: #000000;"><span style="font-size: 14px;"><span style="color: #000000;">mainChart =<span style="color: #000000;"><span style="color: #993300;"> echarts.init(<span style="font-size: 14px;"><span style="color: #000000;"><span style="font-size: 14px;"><span style="color: #000000;">myChart) <span style="font-size: 14px;"><span style="color: #000000;"><span style="font-size: 14px;"><span style="color: #000000;"><span style="font-size: 14px;"><span style="color: #000000;">mainChart.<span style="color: #993300;">setOption(options) 当页面加载的时候，将外容器的宽高，赋给图表容器 但这只是解决了页面加载时的自适应问题 如果在页面加载之后，仍需要图表自适应宽高，就需要用到 echarts 的 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
