代码看吧_看吧代码-优快云博客

本文介绍了一种使用Vue.js和ECharts实现贫困家庭与贫困人口比率的统计与可视化的方法。通过计算其他家庭数与贫困人口数的比例，以及其他人与贫困人口的比例，然后将这些数据以饼图的形式展示出来。此外，还展示了如何通过API调用获取电商、服务站、物流、贫困等概览数据，并在前端界面中进行展示。

otherFamilyRate(){
      return Number(Math.round(parseInt((this.poverty.otherFamiliesNum  / this.poverty.poorFamiliesNum )*1000))/10)
    },
    otherPeopleRate(){
      return Number(Math.round(parseInt((this.poverty.otherPeopleNum  / this.poverty.poorPeopleNum )*1000))/10)
    },
<div class="povertyBox">
                  <div id="povertyFEchart">
                    <poverty-family v-if="flag" :data-arr = otherFamilyRate  :color-set = color1 ></poverty-family>
                  </div>
                </div>

<template>
  <div class="container">
    <div id="family"></div>
  </div>
</template>

<script>
const echarts = require('echarts');
// 引入柱状图组件
require('echarts/lib/chart/pie')
require('echarts/lib/chart/gauge')
// import 'echarts/map/js/china'
// 引入提示框组件、标题组件、工具箱组件。
import 'echarts/lib/component/toolbox'
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/dataZoom')
export default {
    data() {
        return {
            series: []
        }
    },
  props: {
    dataArr: {
      type: Number,
      default: 50
    },
    colorSet: {
        type: Array,
        default: ['#f3b03a','#E69608']
    }
  },
  mounted(){
      this.echartFamilyFn();
  },
  methods: {
      echartFamilyFn(){
          console.log(this.dataArr)
      var myChart = echarts.init(document.getElementById('family'));

          var option = {
              title: {
                text: '{a|'+ this.dataArr +'}{c|%}',
                x: 'center',
                y: 'center',
                textStyle: {
                    rich:{
                        a: {
                            fontSize: 25,
                            color: this.colorSet[0]
                        },
                        
                        c: {
                            fontSize: 20,
                            color: '#ffffff',
                            // padding: [5,0]
                        }
                    }
                }
            },
            series: [{
                    name: '',
                    type: 'pie',
                    radius: ['48%', '38%'],
                    silent: true,
                    clockwise: true,
                    startAngle: 90,
                    z: 0,
                    zlevel: 0,
                    label: {
                        normal: {
                            position: "center",

                        }
                    },
                    data: [{
                            value: this.dataArr,
                            name: "",
                            itemStyle: {
                                normal: {
                                    color: { // 完成的圆环的颜色
                                        colorStops: [{
                                            offset: 0,
                                            color: this.colorSet[0] // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: this.colorSet[1] // 100% 处的颜色
                                        }]
                                    },
                                }
                            }
                        },
                        {
                            value: 100-this.dataArr,
                            name: "",
                            label: {
                                normal: {
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'rgba(0,0,0,0.4)'
                                }
                            }
                        }
                    ]
                },
                
            ]
        };
         myChart.setOption(option);
        window.onresize = myChart.resize;
      }
  }
}
</script>

<style scoped>
#family{
    width: 100%;
    height: 250px;
}
</style>

{
    path: '/table',
    component: Layout,
    children: [
      {
        path: 'ecommerScale',
        name: 'ecommerScale',
        component: () => import('@/views/table/ecommerScale'),
        meta: { title: '电商概览',  icon: 'el-icon-shopping-bag-1'}
      }
    ]
  },
  {
    path: '/link1',
    component: Layout,
    children: [
      {
        path: 'serviceStation',
        name: 'serviceStation',
        component: () => import('@/views/table/serviceStation'),
        meta: { title: '服务站概览',  icon: 'el-icon-shopping-bag-1'}
      }
    ]
  },

import request from '@/utils/request'

export function ecommerce_sales(params) {
  return request({
    url: '/api/e_commerce_sales',
    method: 'post',
    data: params
  })
}
export function service_station(params) {
  return request({
    url: '/api/service_station',
    method: 'post',
    data: params
  })
}

export function logistics(params) {  // 物流概览 
  return request({
    url: '/api/logistics',
    method: 'post',
    data: params
  })
}
export function poverty(params) {  //贫困概览
  return request({
    url: '/api/poverty ',
    method: 'post',
    data: params
  })
}
export function brandTradeView(params) {  //品牌销售收据
  return request({
    url: '/api/brandTradeView',
    method: 'post',
    data: params
  })
}
export function tracingSource(params) {  // 溯源概览
  return request({
    url: '/api/tracingSource',
    method: 'post',
    data: params
  })
}
export function training(params) {  //  培训概览
  return request({
    url: '/api/training',
    method: 'post',
    data: params
  })
}

<template>
  <div class="app-container">
    <el-form ref="serviceStation" :model="serviceStation" label-width="140px">
      
      
      <el-col :span="12">
        <el-form-item label="服务站数量">
        <el-input v-model="serviceStation.totalCount"></el-input>
      </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="累计交易额">
          <el-input v-model="serviceStation.tradeVolume"></el-input>
        </el-form-item>
      </el-col>

      <el-table
        :data="serviceArr" border
        style="width: 100%">
        <el-table-column
        label="日期"
        width="100">
            <template slot-scope="scope">
                <span>{{scope.$index +1}} 月</span>
            </template>
        </el-table-column>
        <el-table-column
        label="代买"
        width="280">
         <template slot-scope="scope">
            <el-input v-model="scope.row.agencyBuy"></el-input>
        </template>
        </el-table-column>
        <el-table-column
        label="代卖"
        width="278">
            <template slot-scope="scope">
                <el-input v-model="scope.row.agencySell"></el-input>
            </template>
        </el-table-column>
        
    </el-table>

      
      
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getData } from '@/api/getData'
import { service_station } from '@/api/table'

export default {
  data() {
    return {
      serviceStation:{},
      serviceArr: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    onSubmit(){
        this.serviceStation.datas = this.serviceArr;
        service_station(this.serviceStation).then(res=>{
             this.$message({
                message: '恭喜你，修改成功',
                type: 'success'
            });
        })
        console.log(this.serviceArr)
    },
    fetchData() {
      getData().then(response => {
        this.serviceStation = response.serviceStation ;
        this.serviceArr = response.serviceStation.datas;

      })
    }
  }
}
</script>
<style lang="scss">
  .app-container{
    width: 700px;
  }
</style>

<template>
  <div class="app-container">
    <el-form class="clearfix" ref="form" :model="form" label-width="140px">
      <el-col :span="24">
        <el-form-item label="销售总额">
          <el-input v-model="form.totalSales"></el-input>
        </el-form-item>
      </el-col>
      
      <el-col :span="12">
        <el-form-item label="实物型销售额">
        <el-input v-model="form.physicalSales"></el-input>
      </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="实物型同比增长">
          <el-input v-model="form.physicalGrowth"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="服务型销售额">
          <el-input v-model="form.serviceSales"></el-input>
        </el-form-item>
      </el-col>
        <el-col :span="12">
        <el-form-item label="服务型同比增长">
          <el-input v-model="form.serviceGrowth"></el-input>
        </el-form-item>
      </el-col>
       <el-col :span="24">
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
       </el-col>
    </el-form>
  </div>
</template>

<script>
import { getData } from '@/api/getData'
import { ecommerce_sales } from '@/api/table'

export default {
  data() {
    return {
      form:{}
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    onSubmit(){
      ecommerce_sales(this.form).then(res=>{
        this.$message({
                message: '恭喜你，修改成功',
                type: 'success'
            });
      })
      
    },
    fetchData() {
      getData().then(response => {
        this.form = response.ecommerceSales
      })
    }
  }
}
</script>
<style lang="scss">
  .app-container{
    width: 700px;
  }
</style>