webapp / GreenwayWeb

<template>
  <!-- 分布统计 -->
  <div class="distributionChart">
    <div
      v-for="(item, index) in charts"
      :key="index"
      :ref="item.name"
      class="pieChart"
    />
  </div>
</template>

<script>
import ChartOption from './module.js'
export default {
  props: {
    chartData: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      charts: [
        new ChartOption('chart1'),
        new ChartOption('chart2'),
        new ChartOption('chart3'),
        new ChartOption('chart4'),
      ]
    }
  },
  watch: {
    chartData: {
      handler (nVal, oVal) {
        console.log(nVal, 'watch')
        this.chartFns1(this.charts[0].chart, nVal.cityPeople)
        this.chartFns2(this.charts[1].chart, nVal.newOlds)
        this.chartFns3(this.charts[2].chart, nVal.terminals)
        this.chartFns4(this.charts[3].chart, nVal.newOlds)
      },
      deep: true
    }
  },
  mounted () {
    this.charts.forEach(item => {
      this.initChart(item)
    })
    this.chartFns1(this.charts[0].chart, this.chartData.cityPeople || [])
    this.chartFns2(this.charts[1].chart, this.chartData.newOlds || [])
    this.chartFns3(this.charts[2].chart, this.chartData.terminals || [])
    this.chartFns4(this.charts[3].chart, this.chartData.newOlds || [])
  },
  methods: {
    initChart (chartObj) {
      chartObj.chart = this.$echarts.init(this.$refs[chartObj.name][0])
      chartObj.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          normal: {
            length: 20,
            length2: 70,
            lineStyle: {
              color: '#333'
            }
          }
        },
      })
    },
    chartFns1 (chart, data) {
      if (!data || !data.length) {
        data = [{ name: '暂无数据', value: 0 }]
      }
      chart.setOption({
        title: {
          text: '省份分布',
          x: 'center',
          y: 'bottom'
        },
        color: ['#3A68F2', '#DDDDDD', '#48B9C1', '#A27DE2', '#32C0D6'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            // radius: ["50", "40"],
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -120],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data: data
          }
        ]
      })
    },
    chartFns2 (chart, data) {
      if (!data || !data.length) {
        data = [{ name: '暂无数据', value: 0 }]
      }
      chart.setOption({
        title: {
          text: '访问类型',
          x: 'center',
          y: 'bottom'
        },
        color: ['#3A68F2', '#DDDDDD'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -70],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data
          }
        ]
      })
    },
    chartFns3 (chart, data) {
      if (!data || !data.length) {
        data = [{ name: '暂无数据', value: 0 }]
      }
      chart.setOption({
        title: {
          text: '终端分布',
          x: 'center',
          y: 'bottom'
        },
        color: ['#3A68F2', '#DDDDDD'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -70],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data
          }
        ]
      })
    },
    chartFns4 (chart, data) {
      if (!data || !data.length) {
        data = [{ name: '暂无数据', value: 0 }]
      }
      chart.setOption({
        title: {
          text: '操作系统情况',
          x: 'center',
          y: 'bottom'
        },
        color: ['#3A68F2', '#DDDDDD'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -70],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data
          }
        ]
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.distributionChart{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .pieChart{
    width: 50%;
    height: 300px;
  }
}
</style>