目前常用的图标插件有 charts,  Echartshighcharts。这次将介绍 Echarts 在 Vue 项目中的应用。

一、安装插件

使用 cnpm 安装 Echarts

cnpm install echarts -S

和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用

通常是在需要使用图表的 .vue 文件中直接引入

import echarts from 'echarts'

也可以在 main.js 中引入,然后修改原型链

Vue.prototype.$echarts = echarts 

然后就可以全局使用了

let myChart = this.$echarts.init(document.getElementById('myChart'))

二、创建图表

首先需要在 HTML 中创建图表的容器

aaarticlea/png;base64,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" alt="" />

需要注意的是,图表的容器必须指定宽高,也就是说 width,height 不能使用百分比,只能用 px

这样确实不够灵活,不过我们可以用 js 来改变 width 和 height,使图表容器能够自适应,具体的实现请往后看

aaarticlea/png;base64,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" alt="" />

然后在 mounted 中创建图表,具体的配置参考官方文档,这里不再赘述

三、按需引入

上面引入的 echarts 包含了所有图表,但有时候我们只需要一两个基本图表,这时候完整的 echarts 就显得累赘

假如只需要创建一个饼图,那么可以这么做:

  // 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入饼图组件
require('echarts/lib/chart/pie')
// 引入提示框和图例组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')

可以按需引入的模块列表见 https://github.com/ecomfe/echarts/blob/master/index.js

四、适应容器

上面说过,图表的容器必须固定宽高,这确实是一个比较反人类的设定

为了解决这个问题,需要给图表容器外面再加一个容器,而这个外容器的宽高可以适应页面。上面的 <div class="charts"> 就是这样的外容器

let chartBox = document.getElementsByClassName('charts')[0]
let myChart = document.getElementById('myChart') // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
function resizeCharts () {
myChart.style.width = chartBox.style.width + 'px'
myChart.style.height = chartBox.style.height + 'px'
}
// 设置容器高宽
resizeCharts()

let mainChart = echarts.init(myChart)
mainChart.setOption(options)

当页面加载的时候,将外容器的宽高,赋给图表容器

但这只是解决了页面加载时的自适应问题

如果在页面加载之后,仍需要图表自适应宽高,就需要用到 echarts 的媒体查询

前台框架vue.js中怎样嵌入 Echarts 组件?的更多相关文章

  1. Vue.js 3.x 中跨层级组件如何传递数据?

    provide/inject 基本用法 在 Vue.js 中,跨层级组件如果想要传递数据,我们可以直接使用 props 来将祖先组件的数据传递给子孙组件: 注:上图来自 Vue.js 官网:Prop ...

  2. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  3. 一款很便捷很实用的框架——vue.js

    Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 ...

  4. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  5. 可能是目前最完整的前端框架 Vue.js 全面介绍

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...

  6. 前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

    前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...

  7. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  8. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  9. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

随机推荐

  1. AllJoyn 了解

    AllJoyn是一个中性平台系统,旨在简化邻近异构分布式移动通信网络系统.这里的异构性不仅表示不同的设备,而且可以是具有不同操作系统和不同类型的设备(例如个人电脑.手机.平板电脑和消费性电子产品),并 ...

  2. mibox connections

    tcp        0      0 :::52549                :::*                    LISTEN      4398/net.myvst.v2:mt ...

  3. os层删除与数据库层drop的区别于对策。

    os rm删除的,可以通过os层面恢复(句柄.inode.如果inode没有了可以根据block去重组出来数据文件),也可以通过rman备份还原方式恢复.  db 层面drop删除的 只能不完全恢复( ...

  4. vue-cli 打包报错:Unexpected token: punc (()

    vue-cli 打包报错: ERROR in static/js/vendor.ed7d2353f79d28a69f3d.js from UglifyJs Unexpected token: punc ...

  5. 转 JMeter之修改Sampler响应数据的编码格式

    问题:JMeter的sampler响应数据中有中文时,会解析出错. JMeter的Sampler中的响应数据默认的编码格式是:ISO-8859-1.来自文件: jmeter.properties中的语 ...

  6. JZ2440 裸机驱动 第10章 系统时钟和定时器

    本章目标      了解S3C2410/S3C2440的时钟体系结构     掌握通过设置MPLL改变系统时钟的方法     掌握在不同的频率下设置存储控制器的方法     掌握PWM定时器的用法   ...

  7. BASIC-3_蓝桥杯_字母图形

    示例代码: #include <stdio.h>#define N 26 int main(void){ int i = 0 , j = 0 , k = 0; int n = 0 , m ...

  8. selenium操作隐藏的元素 (下拉框类型)

    有时候我们会碰到一些元素不可见,这个时候selenium就无法对这些元素进行操作了.例如,下面的情况: Python 页面主要通过“display:none”来控制整个下拉框不可见.这个时候如果直接操 ...

  9. Vcenter5.5+vmwarePowercli6.5+powershell5批量创建虚拟机

    另存为xxx.ps1 ##########################通过模版批量部署虚拟机以下内容需要人工定义变量####################### #Vcenter的IP $vce ...

  10. 华为P10的内存门和闪存门的检测方法

    用android的终端模拟器,进入以后进入界面,输入命令ls /proc/fs/*,可以查看是否ufs还是emmc硬盘:用devcheck可以查看到手机的内存是否是DDR3还是DDR4:用androb ...