element-ui表单前后端数据的交互以及简单的echarts

一.效果以及引入

             Echarts是使用js实现的开源可视化库 与vue高度契合，提供直观，交互丰富，可高度个性化定制的数据可视化图标。Echarts支持全局引入以及局部引入 支持组件封装。

       在main.js中引入

       功能与实际效果

             创建表单，点击表单的每一行 可以将数据传入到echats并画饼状图

二.表单功能创建

                表单部分采用了element组件中的表单单选 ，实现点击每一行传入每一行数据，绘制饼状图。

<template>
  <div class="app-container">
 <div style="text-align:center">    
   <div id="chartPie" :style="{ width: '100%', height: '600px'}" />
</div> 
  <!-- echarts盒子 --> 
     
    <el-table
     
      highlight-current-row
      @current-change="handleCurrentChange"
      v-loading="loading"
      :data="NackNameList"
    >
      <el-table-column label="业务员" align="center" prop="nickName" />
      <el-table-column label="保费总额" align="center" prop="totalPrice" />
      <el-table-column label="保费成本" align="center" prop="totalExpend" />
      <el-table-column label="直返" align="center" prop="totalDirectReturn" />
      <el-table-column label="发票成本" align="center" prop="totalInvoiceCost" />
      <el-table-column label="毛利润" align="center" prop="totalProfit" />
      <el-table-column label="毛利润率" align="center" prop="totalProfitMargin" />
      <el-table-column label="业绩" align="center" prop="totalAchievement" />
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

           

三.界面交互逻辑部分

               首先需要请求后端接口获取数据 ，并引入接口

 api/inside/salesname.js 

import request from '@/utils/request'

//查询业务员名称
export function nickName(query){
    return request({
        url:'/inside/book/salesmanReport', 
        method:'get',
        params: query
    })
}

界面引入接口

import { nickName } from '@/api/inside/salesname'

模块引入，参数定义，方法创建，

<script>
export default {
  name: 'Radio',
  data() {
    return {
      queryParams: {},
      total: 0,
      chartPie: null,
      pieDate: [],
      NackNameList: [],
      // 业务员参数
      salesName: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    }
  },
mounted: function() {
    // this.drawCharts()
  },
created() {
    // 获取表单数据
    this.getList()
  },
 methods: {
    getList() {
      this.loading = true
      nickName(this.queryParams).then(response => {
        this.NackNameList = response.rows
        this.total = response.total
        this.loading = false
        const data = response.rows[0]
        // 默认选取第一行
        this.$refs.tb.setCurrentRow(response.rows[0])
  this.pieDate[0] = {
          name: '业绩',
          value: data.totalAchievement
        }
        this.pieDate[1] = {
          value: data.totalInvoiceCost,
          name: '成本'
        }
        this.pieDate[2] = {
          value: data.totalDirectReturn,
          name: '直返'
        }
        this.pieDate[3] = {
          value: data.totalProfit,
          name: '毛利润'
        }
   this.drawPieChart()
      })
    },
    handleCurrentChange(val) {
      this.currentRow = val
      this.pieDate[0] = {
        name: '业绩',
        value: this.currentRow.totalAchievement
      }
      this.pieDate[1] = {
        value: this.currentRow.totalInvoiceCost,
        name: '成本'
      }
      this.pieDate[2] = {
        value: this.currentRow.totalDirectReturn,
        name: '直返'
      }
      this.pieDate[3] = {
        value: this.currentRow.totalProfit,
        name: '毛利润'
      }
      this.drawPieChart()
    },
  drawPieChart() {
      this.chartPie = this.$echarts.init(document.getElementById('chartPie'))
      this.chartPie.setOption({
        title: {
          text: '保费总额',
          subtext: '',
          x: 'center'
        },

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: 'middle',
          orient: 'vertical',
          left: 50,
          data: ['保费成本', '直返', '发票成本', '毛利润']
        },
        series: [
          {
            name: '保费总额',
            type: 'pie',
            radius: '45%',
            center: ['50%', '60%'],
            data: this.pieDate,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>