yos_web/src/views/mediaStatistics/modules/futureTwelveMonths.vue

<template>
  <div>
    <boxBorder title="未来12月项目预计签约金额/预计成交金额分析" class1="20px 20px" height="282px">
      <template slot="charts">
        <el-tooltip effect="dark" placement="top-start" style="margin-top: 3px;margin-left:240px;position: relative;z-index: 50">
          <div slot="content">
            {{
              $t(
                  '预计签约金额 × 项目成交率'
              )
            }}
          </div>
          <!--        <i class="el-icon-question" style="color: #afb0be;float: right"></i>-->
          <img
              width="14px"
              height="14px"
              src="../../../assets/icons/prompt_icon.svg"
          />
        </el-tooltip>
        <div ref="chartRef" style="height: 220px;margin-top: -25px;position: relative;z-index: 20">
        </div>
      </template>
    </boxBorder>
  </div>
</template>

<script>
import boxBorder from './boxBorder'
import {Column} from "@antv/g2plot";
export default {
  name: "futureTwelveMonths",
  components:{
    boxBorder
  },
  data(){
    return {
      chartMap:[],
      chartMapData:[],
    }
  },
  methods:{
    chartData(init,data){
      let index = 0
      let indexNew = 0
      data.forEach((item,num) =>{
        if (num == index){
          this.chartMapData[indexNew] = {
            "signdate_due":item.signdate_due,
            "value":Math.round(this.tool.unitConversion(item.signamount_due,10000) * 100)/100,
            "name":this.$t('预计签约金额')
          }
          indexNew = indexNew + 1
          this.chartMapData[indexNew] = {
            "signdate_due":item.signdate_due,
            "value":Math.round(this.tool.unitConversion(item.dealamount_due,10000) * 100)/100,
            "name":this.$t('预计成交金额')
          }
          indexNew = indexNew + 1
          index = index + 1
        }
      })
      console.log(this.chartMapData,'chartMapData')
      if (init){
        this.chartMap = new Column(this.$refs.chartRef,{
          color:['#3874F6','#F29C37'],
          data:this.chartMapData,
          isGroup: true,
          xField: 'signdate_due',
          yField: 'value',
          seriesField: 'name',
          /** 设置颜色 */
          //color: ['#1ca9e6', '#f88c24'],
          /** 设置间距 */
          // marginRatio: 0.1,
          label: {
            // 可手动配置 label 数据标签位置
            position: 'top', // 'top', 'middle', 'bottom'
            offsetY:12,
            // 可配置附加的布局方法
            layout: [
              // 数据标签防遮挡
              { type: 'interval-hide-overlap' },
            ],
            style: {
              fill: '#444444',
              opacity: 0.9,
              fontSize:12
            },
            formatter: (datum) =>{
              return '¥' + this.tool.formatAmount(datum.value,2)
            }
          },
          tooltip: {
            formatter: (datum) => {
              return {
                name:datum.name,
                value:'¥' + this.tool.formatAmount(datum.value,2)
              }
            }
          }
        });
        this.chartMap.render()
      }else {
        this.chartMap.changeData(this.chartMapData)
      }
    }
  }
}
</script>

<style scoped>

</style>