按部就班VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各类图表展现

在咱们作应用系统的时候，每每都会涉及图表的展现，综合的图表展现可以给客户带来视觉的享受和数据直观体验，同时也是加强客户认同感的举措之一。基于图表的处理，咱们通常每每都是利用对应第三方的图表组件，而后在这个基础上为它的数据模型提供符合要求的图表数据便可，VUE+Element 前端应用也不例外，咱们这里使用了基于vue-echarts组件模块来处理各类图表vue-echarts是对echarts图表组件的封装。

一、图表组件的安装使用

首先使用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

  

二、各类图表的展现处理

对于咱们须要的各类常规的柱状图、饼状图、折线图（曲线图）等，我下来介绍几个案例代码，其余的通常咱们根据官方案例提供的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）--- 界面语言国际化的处理