JY1.0/src/views/SalesManagement/StatisticalAnalysis/ProductPricing.vue

<template>
  <div>
    <el-card>
      <el-cascader ref="cascader" :options="product" :show-all-levels="false" placeholder="产品名称" clearable size="small" @clear="clearData" @change="getData"/>
      <el-date-picker
        v-model="dateRange"
        size="small"
        type="daterange"
        align="center"
        style="width: 260px;"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        range-separator="～"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="getProductItemValue1()"/>
      <span style="margin-left: 200px;font-size: 20px;font-weight: bold">{{ TitlesDrawings }}</span>
      <div id="myChart1" style="width: 1500px;height: 820px;text-align: center"/>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
export default {
  data() {
    return {
      dateRange: '',
      TitlesDrawings: '',
      product: [],
      productValue: '',
      yName: '',
      selectionProductValue: '',
      selectionProduct: []
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id'
    ])
  },
  created() {
    this.getTreeData()
    this.changeTitlesDrawings()
  },
  methods: {
    getTreeData() {
      var param = []
      param[0] = ['子节点', 0]
      var Data = this.CreateData('11', '产品关系_查询节点', param)
      this.ExecDatabase(Data).then(response => {
        const data = response.data
        this.product = this.tree(data, 0)
      })
    },
    tree(data, pid) {
      const result = []
      let temp
      for (let i = 0; i < data.length; i++) {
        if (data[i].父节点 === pid) {
          const obj = { label: data[i].节点名称, value: data[i].子节点 }
          temp = this.tree(data, data[i].子节点)
          if (temp.length > 0) {
            obj.children = temp
          }
          result.push(obj)
        }
      }
      return result
    },
    getData(val) {
      this.productValue = val[val.length - 1]
      this.getProductItemValue1()
    },
    changeTitlesDrawings() {
      this.TitlesDrawings = '产品定价分析图'
      this.yName = '销\n售\n额'
    },
    getProduct() {
      var param = []
      var Data = this.CreateData('11', '数据分析_产品信息_基础表_查询数据', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.selectionProduct.push({
            label: response.data[i].产品名称,
            value: response.data[i].产品流水号
          })
        }
      })
    },
    getProductItemValue1() {
      if (this.productValue) {
        let dateRange_check
        console.log(this.dateRange, 123)
        this.dateRange ? dateRange_check = 1 : (dateRange_check = 0, this.dateRange = '')
        console.log(dateRange_check, 234)
        var param = []
        param[0] = ['选择产品', this.productValue]
        param[1] = ['时间_check', dateRange_check]
        param[2] = ['开始时间', this.dateRange[0]]
        param[3] = ['结束时间', this.dateRange[1]]
        var Data = this.CreateData('11', 'jy_产品定价分析_查询', param)
        this.ExecDatabase(Data).then(response => {
          this.xdata = []
          this.y1data = []
          if (response.data.length > 0) {
            for (let i = 0; i < response.data.length; i++) {
              this.xdata.push(response.data[i].单价)
              if (!this.downdate) { this.downdate = 0 }
              this.y1data.push(response.data[i].销售额)
            }
          }
        }).then(response => {
          this.drawLine1()
        })
      } else {
        this.$message.warning('请先选择产品')
      }
    },
    drawLine1() {
      this.myChart1 = echarts.init(document.getElementById('myChart1'))
      // 绘制图表
      this.myChart1.clear()
      const _this = this
      this.myChart1.setOption({
        xAxis: [{
          axisLabel: {
            interval: 0,
            rotate: 0,
            formatter: function(value) {
              return value.split(' ').join('\n')
            }
          },
          name: '单价',
          type: 'category',
          data: this.xdata,
          nameLocation: 'middle',
          nameTextStyle: {
            padding: [20, 0, 0, 0]
          }
        }],
        yAxis: [{
          name: this.yName,
          type: 'value',
          nameTextStyle: {
            padding: [10, 135, -180, 20]
          },
          max: function(value) {
            return _this.update > value.max ? (1.2 * _this.update).toFixed(2) : (1.2 * value.max).toFixed(2)
            // 这里写的是y轴的最大值为提取数据中最大值的1.2倍
          }
        }],
        series: [{
          markLine: {
            // markline表示是柱形图之外的折线图 它的数据和柱形图是一样的都来子this.ydata
            lineStyle: {
              normal: {
                type: 'dashed'
              }
            }
          },
          label: {
            show: true
          },
          data: this.y1data,
          type: 'line'
        }],
        grid: {
          left: '3%',
          right: '5%',
          bottom: '8%',
          containLabel: true
        }
      })
    }
  }
}
</script>

<style scoped>

</style>