#

luxiaotao1123

2023-07-31 cb8fc3a72eb5462cb52025b2ec390aa9ba4617e5

 src/components/datav/roseChart.vue

@@ -1,72 +1,71 @@
<template>
  <div id="rose-chart">
    <div class="rose-chart-title">累计计量资金分布</div>
    <div class="rose-chart-title">每月销售金额 - 总金额：{{ (sum/10000).toFixed(2) }} 万元</div>
    <dv-charts :option="option" />
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'RoseChart',
  data () {
  data() {
    return {
      option: {}
      option: {},
      sum: 1000
    }
  },
  methods: {
    createData () {
      const { randomExtend } = this

      this.option = {
        series: [
          {
            type: 'pie',
            radius: '50%',
            roseSort: false,
            data: [
              { name: '路基', value: randomExtend(40, 70) },
              { name: '交安设施', value: randomExtend(20, 30) },
              { name: '日常养护', value: randomExtend(10, 50) },
              { name: '桥通', value: randomExtend(5, 20) },
              { name: '交通事故', value: randomExtend(40, 50) },
              { name: '路面', value: randomExtend(20, 30) },
              { name: '绿化', value: randomExtend(5, 10) },
              { name: '计日工', value: randomExtend(20, 35) },
              { name: '除雪', value: randomExtend(5, 10) }
            ],
            insideLabel: {
              show: false
            },
            outsideLabel: {
              formatter: '{name} {percent}%',
              labelLineEndLength: 20,
              style: {
                fill: '#fff'
    httpData() {
      const getApiData = async () => {
        return await axios.get(this.baseUrl + "data3", { params: {} })
      }
      getApiData().then(result => {
        let list = result.data.data;
        let sum = 0;
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          sum += item.sum;
          item['name'] = item.month + "月";
          item['value'] = Number(item.sum.toFixed(2));
          delete item.month;
          delete item.sum;
        }
        this.option = {
          series: [
            {
              type: 'pie',
              radius: '50%',
              roseSort: false,
              data: list,
              insideLabel: {
                show: false
              },
              labelLineStyle: {
                stroke: '#fff'
              }
            },
            roseType: true
          }
        ],
        color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
      }
    },
    randomExtend (minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10)
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
      }
              outsideLabel: {
                formatter: '{name} {percent}%',
                labelLineEndLength: 20,
                style: {
                  fill: '#fff'
                },
                labelLineStyle: {
                  stroke: '#fff'
                }
              },
              roseType: true
            }
          ],
          color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
        }
        this.sum = sum;
      })
    }
  },
  mounted () {
    const { createData } = this

    createData()

    setInterval(createData, 30000)
  mounted() {
    const { httpData } = this
    httpData()
   
    setInterval(httpData, 30000)
  }
}
</script>