Vue Element前端应用开发之echarts图表

 更新时间:2021年05月13日 09:06:34   作者:伍华聪  
在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一

概述

基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在这个基础上为它的数据模型提供符合要求的图表数据即可,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前端应用开发之echarts图表的详细内容,更多关于Vue Element之echarts图表的资料请关注脚本之家其它相关文章!

相关文章

  • vue 验证码界面实现点击后标灰并设置div按钮不可点击状态

    vue 验证码界面实现点击后标灰并设置div按钮不可点击状态

    今天小编就为大家分享一篇vue 验证码界面实现点击后标灰并设置div按钮不可点击状态,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 使用vue进行Lodop打印的一些常用方法小结

    使用vue进行Lodop打印的一些常用方法小结

    这篇文章主要给大家介绍了关于使用vue进行Lodop打印的一些常用方法,需要进行打印功能,Lodop就是实现需求的插件,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • vue 1.x 交互实现仿百度下拉列表示例

    vue 1.x 交互实现仿百度下拉列表示例

    本篇文章主要介绍了vue 1.x 交互实现仿百度下拉列表示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Vue路由组件的缓存keep-alive和include属性的具体使用

    Vue路由组件的缓存keep-alive和include属性的具体使用

    :浏览器页面在进行切换时,原有的路由组件会被销毁,通过缓存可以保存被切换的路由组件,本文主要介绍了Vue路由组件的缓存keep-alive和include属性的具体使用,感兴趣的可以了解一下
    2023-11-11
  • VUE+element-ui文件上传的示例代码

    VUE+element-ui文件上传的示例代码

    图片和文件上传在很多项目中都可以使用的到,本文主要介绍了VUE+element-ui文件上传的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 基于vue的短信验证码倒计时demo

    基于vue的短信验证码倒计时demo

    这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue顶部tags浏览历史的实现

    Vue顶部tags浏览历史的实现

    在管理系统中,常常需要在顶部tags显示浏览历史。本文将教大家如何通过Vue实现这一功能,文中的示例代码讲解详细,需要的可以参考一下
    2021-12-12
  • vue3.0找不到模块“./App.vue”或其相应的类型声明(多种情况分析)

    vue3.0找不到模块“./App.vue”或其相应的类型声明(多种情况分析)

    这篇文章主要介绍了vue3.0找不到模块“./App.vue”或其相应的类型声明,报错原因是typescript 只能理解 .ts 文件,无法理解 .vue文件,本文通过多种情况分析给大家详细讲解,需要的朋友可以参考下
    2023-01-01
  • vue.js入门(3)——详解组件通信

    vue.js入门(3)——详解组件通信

    这篇文章主要介绍了vue.js入门(3)——详解组件通信 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
    2016-12-12
  • 解决vue3中内存泄漏的问题

    解决vue3中内存泄漏的问题

    在项目中会发现一个奇怪的现象,当我们在使用element-plus中的图标组件时会出现内存泄漏,所以本文讲给大家讲讲如何解决vue3中的内存泄漏的问题,需要的朋友可以参考下
    2023-07-07

最新评论