Vue 爬坑之路(八)—— 使用 Echarts 创建图表
在后台管理系统中,图表是一个很普遍的元素。目前常用的图标插件有 charts, Echarts, highcharts。这次将介绍 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')[]
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 爬坑之路(八)—— 使用 Echarts 创建图表的更多相关文章
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- Vue 爬坑之路(九)—— 用正确的姿势封装组件
迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...
- Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目
Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...
- Vue 爬坑之路—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- vue爬坑之路1-路由跳转全新页面以及二级页面配置
之前也在网找了一些答案,比较零碎,特此总结下,废话不多说,直接上干货! 路由跳转全新页面 首先在app.vue中先定义router-view,这是主路由. 在router的index.js中引入log ...
- vue爬坑之路(插件安装)
npm install vue-table-with-tree-grid --save import ZkTable from 'vue-table-with-tree-grid' Vue.use(Z ...
- Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- Vue 爬坑之路(四)—— 与 Vuex 的第一次接触
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...
随机推荐
- MongoDb安装--yum安装
本帖最后由 草包 于 2017-5-2 09:57 编辑 [Shell] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 ...
- 音频传输之Jitter Buffer设计与实现
在语音通信中Jitter Buffer(下面简称JB)是接收侧一个非常重要的模块,它是决定音质的重要因素之一.一方面它会把收到的乱序的语音包排好序放在buffer里正确的位置上,另一方面它把接收到的语 ...
- c++邻接表存储图(无向),并用广度优先和深度优先遍历(实验)
一开始我是用c写的,后面才发现广搜要用到队列,所以我就直接使用c++的STL队列来写, 因为不想再写多一个队列了.这次实验写了两个多钟,因为要边写边思考,太菜了哈哈. 主要参考<大话数据结构&g ...
- C++ vector 常用API
vector: 向量容器,动态数组,类模板 定义和初始化: vector<T> v1; //v1是空vector,元素类型是T类型,执行默认初始化,int为0,string为空串 vect ...
- Python开发工具PyCharm个性化设置
Python开发工具PyCharm个性化设置,包括设置默认PyCharm解析器.设置缩进符为制表符.设置IDE皮肤主题等,大家参考使用吧 1.设置默认PyCharm解析器: 操作如下: Pyt ...
- kafak集群安装-转
前言 最近在利用Spark streaming和Kafka构建一个实时的数据分析系统,对图书阅读数据进行分析,做实时推荐.Spark Streaming 模块是对于 Spark Core 的一个扩展, ...
- Node.js开发Web后台服务
一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- 手把手教你用vue-cli搭建vue项目
手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...
- Android查缺补漏(View篇)--在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0?
在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0 ? @Override protected void onCreate(Bundle savedInstanc ...
- 7.python常用模块
1.time 常用表示时间方式: 时间戳,格式化的时间字符串,元组(struct_time) UTC(Coordinated Universal Time,世界协调时)亦即格林威治天文时间,世界标准时 ...