在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一。基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在这个基础上为它的数据模型提供符合要求的图表数据即可,VUE+Element 前端应用也不例外,我们这里使用了基于vue-echarts组件模块来处理各种图表vue-echarts是对echarts图表组件的封装。

1、图表组件的安装使用

首先使用npm 安装vue-echarts组件。

git地址:https://github.com/ecomfe/vue-echarts

NPM安装命令

npm install echarts vue-echarts

然后在对应模块页面里面引入对应的组件对象,如下代码所示。

<script>
import ECharts from 'vue-echarts' // 主图表对象
import 'echarts/lib/chart/line' // 曲线图表
import 'echarts/lib/chart/bar' // 柱状图
import 'echarts/lib/chart/pie' // 饼状图
import 'echarts/lib/component/tooltip' // 提示信息

接着在Vue组件里面对象中加入对象即可。

export default {
components: {
'v-chart': ECharts
},

如果是全局注册使用,那么可以在main.js里面进行加载

// 注册组件后即可使用
Vue.component('v-chart', VueECharts)

我们来看看图表展示的效果图

柱状图效果

饼状图

曲线图

其他类型,极坐标和散点图形

或者曲线和柱状图组合的图形

更多的案例可以参考官网的展示介绍:https://echarts.apache.org/examples/zh/index.html

2、各种图表的展示处理

对于我们需要的各种常规的柱状图、饼状图、折线图(曲线图)等,我下来介绍几个案例代码,其他的一般我们根据官方案例提供的data数据模型,构造对应的数据即可生成,就不再一一赘述。

另外,我们也可以参考Vue-echarts封装的处理demo:https://github.com/ecomfe/vue-echarts/tree/master/src/demo

对于柱状图,效果如下

在Vue模块页面的Template 里面,我们定义界面代码如下即可。

<v-chart
ref="simplebar"
:options="simplebar"
autoresize
/>

然后在data里面为它准备好数据即可,如下代码所示。

 data() {
return {
simplebar: {
title: { text: '柱形图Demo' },
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
}
}

当然我们也可以把这些构造对应数据的逻辑放在单独的JS文件里面,然后导入即可。

例如对于饼图,它的界面效果如下所示。

它的vue视图下,Template里面的代码如下所示。

<v-chart
ref="pie"
:options="pie"
autoresize />

一般对于图表的数据,由于处理代码可能不少,建议是独立放在一个JS文件里面,然后我们通过import导入即可使用。

然后在data里面引入对应的对象即可,如下所示。

<script>
import ECharts from 'vue-echarts' // 主图表对象
import 'echarts/lib/chart/line' // 曲线图表
import 'echarts/lib/chart/bar' // 柱状图
import 'echarts/lib/chart/pie' // 饼状图
import 'echarts/lib/component/tooltip' // 提示信息 // 导入报表数据
import getBar from './chartdata/bar'
import pie from './chartdata/pie'

import scatter from './chartdata/scatter'
import lineChart from './chartdata/lineChart'
import incomePay from './chartdata/incomePay' export default {
components: {
'v-chart': ECharts
},
return {
pie,
scatter,,
lineChart,
incomePay,
simplebar: {
title: { text: '柱形图Demo' },
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
}
},

其中pie.js里面放置的是处理饼图数据的逻辑,如下代码所示。

export default {
title: {
text: '饼图程序调用高亮示例',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}

在界面处理的时候,值得注意的时候,有时候Vue页面处理正常,但是图表就是没有出来,可能是因为高度或者宽度为0的原因,需要对对应的样式进行处理设置,以便能够正常显示出来。

如下是我 对图表的设置的样式处理,使得图表在一个卡片的位置能够显示正常。

<style scoped>
.echarts { width: 100%; height: 400px;} .el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
margin-bottom: 20px;
}
</style>

最后几个界面组合一起的效果如下所示。

以上就是基于vue-echarts处理各种图表展示,其中常规的引入组件很容易的,主要就是需要根据对应的图表案例,参考数据组成的规则,从而根据我们实际情况构建对应的数据,赋值给对应的模型变量即可。

列出以下前面几篇随笔的连接,供参考:

循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示的更多相关文章

  1. 循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

    循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装, ...

  2. 循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

    VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...

  3. 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

  4. 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  5. 循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理

    在我们很多模块里面,都需要使用到一些诸如图片.Excel文件.PDF文件等附件的管理,一般我们倾向于把它独立为一个公用的附件管理模块,这样可以有效的统一管理附件的信息.本篇随笔介绍附件内容的管理,包括 ...

  6. 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

    在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...

  7. 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

    在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...

  8. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

  9. 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

随机推荐

  1. 解决删除~/Library/Caches/CocoaPods/search_index.json重新pod search还是不起作用

    今天新苹果机安装cocoapods,安装完以后发现怎么pod search 都没有用 命令行提示: swhcxp@iosdevmac ~ % pod search Almofire Setup com ...

  2. 检查可执行App类型是否为executable (腾讯上线预审核报错)otool工具使用

    https://blog.csdn.net/lovechris00/article/details/81561627 查看IPA文件的路径 1,解压缩 xcode导出的xxx.ipa文件 2,然后在解 ...

  3. 将BeyondCompare设置为TortoiseSVN的扩展比较工具

    1)点击鼠标右键 -> 点击TortoiseSVN -> Settings,如下图: 2)选择Diff Viewer - > 选择External(并配置好参数),具体如下图: 3) ...

  4. Unity读取StreamingAssets路径下的文件

    /// <summary> ///读取StreamingAssets中的文件 /// </summary> /// <param name="path" ...

  5. python3.7 64bit安装pygame1.9.3

    https://blog.csdn.net/xiaolixi199311/article/details/79209506/

  6. Android 中加载本地Html 跨域问题,http协议允许加载

    一.需求: 后台加载HTML的包时间太长,太卡,让把所有的HTML包放到前台:使用的是file://协议,有些内容和样式加载不出来,H5那边说需要用http://协议来加载: 二.处理过程: 安卓最简 ...

  7. Linux下db2V10.5命令行安装超详细图文教程(附下载地址)

    下载地址:https://pan.baidu.com/s/1GtF03x1FMF3IsGdSiBJu-g 提取码:8vfj 失效了发邮件:wells974@163.com 一.db2prereqche ...

  8. dubbo报com.alibaba.dubbo.remoting.TimeoutException: Waiting server-side response timeout. start time: 2020-03-28 23:08:50.342, end time: 2020-03-28 23:08:51.344,

    当进行debug 启动项目报 dubbo remotiong timeout ,默认1一秒,要在spring配置文件中,dubbo配置中dubbo:service配置timeout属性,如下图配置10 ...

  9. 04 . Mysql主从复制和读写分离

    Mysql AB复制 ​ AB复制又称之为主从复制,用于实现数据同步,实现Mysql的AB复制时,数据库的版本尽量保持一致,如果不能保持一致,最起码从服务器的版本要高于主服务器,但是就无法实现双向复制 ...

  10. 学习使用pyquery解析器爬小说

    一.背景:个人喜欢在网上看小说,但是,在浏览器中阅读小说不是很方便,喜欢找到小说的txt版下载到手机上阅读,但是有些小说不太好找txt版本,考虑自己从网页上爬一爬,自己搞定小说的txt版本.正好学习一 ...