JY1.0/src/views/MarketingCenter/ProjectProgress/index.vue

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-card v-loading="loading1" style="height: 450px">
          <span>年营销金额图表</span>
          <el-button size="small" type="primary" icon="el-icon-search" plain @click="search1()">查询</el-button>
          <div id="myChart1" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card v-loading="loading2" style="height: 450px">
          <span>客户分布图</span>
          <el-button size="small" type="primary" icon="el-icon-search" plain @click="search2()">查询</el-button>
          <div id="myChart2" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-card v-loading="loading3" style="height: 450px">
          <span>在执行项目金额及回款</span>
          <el-button size="small" type="primary" icon="el-icon-search" plain @click="search3()">查询</el-button>
          <div id="myChart3" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { search1, search2, search3 } from '@/api/MarketingCenter/ProjectProgress'
import echarts from 'echarts'

export default {
  data() {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false
    }
  },
  methods: {
    // 项目完成进度
    search1() {
      this.loading1 = true
      var myChart1 = echarts.init(document.getElementById('myChart1'))
      myChart1.clear()
      search1().then(response => {
        this.loading1 = false
        this.drawLine1(response.data)
      })
    },
    drawLine1(data) {
      var dataX = []
      var lineData = []
      for (let i = 0; i < data.length; i++) {
        dataX.push(data[i].开票时间)
        lineData.push(data[i].开票金额)
      }
      var myChart1 = echarts.init(document.getElementById('myChart1'))
      myChart1.clear()
      myChart1.setOption({
        title: {
          left: 'center',
          text: '直方图'
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          name: '年份',
          // axisLabel: {
          //   interval: 0,
          //   rotate: 40,
          //   margin: 10
          // },
          data: dataX
        },
        yAxis: {
          type: 'value',
          name: '金额',
          min: 0,
          scale: 'true'
        },
        series: [
          {
            name: '测量值',
            type: 'bar',
            data: lineData,
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            }
          }
        ]
      })
    },
    // 客户分布图
    search2() {
      this.loading2 = true
      var myChart2 = echarts.init(document.getElementById('myChart2'))
      myChart2.clear()
      search2().then(response => {
        this.loading2 = false
        this.drawLine2(response.data)
      })
    },
    drawLine2(data) {
      var dataX = []
      var lineData = []
      for (let i = 0; i < data.length; i++) {
        dataX.push({
          value: parseInt(data[i].客户数量),
          name: data[i].省份
        })
        lineData.push(data[i].省份)
      }
      var myChart2 = echarts.init(document.getElementById('myChart2'))
      myChart2.clear()
      myChart2.setOption({
        title: {
          text: '客户分布图',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: lineData
        },
        series: [
          {
            name: '省份',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: dataX,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    // 年营销金额图表
    search3() {
      this.loading2 = true
      var myChart3 = echarts.init(document.getElementById('myChart3'))
      myChart3.clear()
      search3().then(response => {
        this.loading2 = false
        this.drawLine3(response.data)
      })
    },
    drawLine3(data) {
      var dataX = []
      var lineData = []
      var lineData2 = []
      for (let i = 0; i < data.length; i++) {
        dataX.push(data[i].项目名称)
        lineData.push(data[i].已收金额)
        lineData2.push(data[i].待收金额)
      }
      var myChart3 = echarts.init(document.getElementById('myChart3'))
      myChart3.clear()
      myChart3.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['已收金额', '待收金额']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: dataX,
          axisLabel: {
            interval: 0,
            rotate: 40,
            margin: 10
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '已收金额',
            type: 'bar',
            stack: '总量',
            color: '#67C23A',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: lineData
          },
          {
            name: '待收金额',
            type: 'bar',
            stack: '总量',
            color: 'rgb(213,58,53)',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: lineData2
          }
        ]
      })
    }
  }
}
</script>

<style>

</style>