系列文章目录
Vue基础篇一:编写第一个Vue程序
Vue基础篇二:Vue组件的核心概念
Vue基础篇三:Vue的计算属性与侦听器
Vue基础篇四:Vue的生命周期(秒杀案例实战)
Vue基础篇五:Vue的指令
Vue基础篇六:Vue使用JSX进行动态渲染
Vue提高篇一:使用Vuex进行状态管理
Vue提高篇二:使用vue-router实现静态路由
Vue提高篇三:使用vue-router实现动态路由
Vue提高篇四:使用Element UI组件库
Vue提高篇五:使用Jest进行单元测试
Vue提高篇六: 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一: 使用Vue搭建注册登录界面
Vue实战篇二: 实现邮件验证码发送
Vue实战篇三:实现用户注册
Vue实战篇四:创建多步骤表单
Vue实战篇五:实现文件上传
Vue实战篇六:表格渲染动态数据
Vue实战篇七:表单校验
Vue实战篇八:实现弹出对话框进行交互
Vue实战篇九:使用省市区级联选择插件
Vue实战篇十:响应式布局
Vue实战篇十一:父组件获取子组件数据的常规方法
Vue实战篇十二:多项选择器的实际运用
Vue实战篇十三:实战分页组件
Vue实战篇十四:前端excel组件实现数据导入
Vue实战篇十五:表格数据多选在实际项目中的技巧
Vue实战篇十六:导航菜单
Vue实战篇十七:用树型组件实现一个知识目录
Vue实战篇十八:搭建一个知识库框架
Vue实战篇十九:使用printjs打印表单
Vue实战篇二十:自定义表格合计
Vue实战篇二十一:实战Prop的双向绑定
Vue实战篇二十二:生成二维码
Vue实战篇二十三:卡片风格与列表风格的切换
Vue实战篇二十四:分页显示
一、背景
- 到目前为止,我们对Vue的学习还停留在导航、菜单、表单组件、表格等一些常规的操作上,今天我们要学习前端的数据可视化技术。
- 我们将借助ECharts开源可视化图表库实现一个疫情折线图。
二、ECharts
ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
- EChart提供了很多的常用图表类型:
常用类型 |
---|
折线图、柱状图 、饼图、散点图、地图、K线图、雷达图、势力图、漏斗图… |
- 今天我们将学习平滑折线图:每个平面折线图,都有一个X轴,一个Y轴,这两个轴都是由轴线、刻度、刻度标签、轴标题四个部分组成。
option = {
// X轴线
xAxis: {
// 轴标题
name:"月份",
type: 'category',
// 刻度标签
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
// Y轴线
yAxis: {
// 轴标题
name:"数量",
type: 'value'
},
series: [{
// 刻度
data: [820, 932, 901, 934, 1290, 1330, 1320],
// 折线类型
type: 'line',
// 平滑
smooth: true
}]
};
三、前端实现
- 了解了ECharts折线图的基本用法后,我们将按以下几个步骤来实现疫情折线图。
3.1 Vue安装ECharts
- 注意,我们安装5.0以下的版本
npm install echarts@4.9.0 --save
- 安装元素监听组件Resize Detector,用于监听页面大小的调整,当页面大小发生变化时,调用ECharts的resize方法自适应页面大小。
在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。
比如,图表容器是一个高度为 400px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。
这种情况下,可以监听页面的 resize 事件获取浏览器大小改变的事件,然后调用 echartsInstance.resize 改变图表的大小
npm install --save resize-detector
3.2 编写平滑折线图组件
- MyLineChart.vue
<template>
<div ref="myChart" :style="{height:height,width:width