管道基础大数据平台系统开发-【前端】-新系統界面
TreeWish
2023-02-28 234409bb4a612c5b69b78b1e844492f0a7122521
src/components/chart/BasePieChart .vue
@@ -4,7 +4,11 @@
<script>
import * as echarts from "echarts"
import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
import {
  countCountryDimension,
  countProvinceDimension,
  countProjectStorage,
} from "@/api/screen.js"
export default {
  props: {
    width: {
@@ -31,6 +35,10 @@
      type: String,
      default: "全国项目",
    },
    params: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {
@@ -40,32 +48,7 @@
  },
  computed: {
    option() {
      let echartData = [
        {
          value: 2154,
          name: "曲阜师范大学",
        },
        {
          value: 3854,
          name: "潍坊学院",
        },
        {
          value: 3515,
          name: "青岛职业技术学院",
        },
        {
          value: 3515,
          name: "淄博师范高等专科",
        },
        {
          value: 3854,
          name: "鲁东大学",
        },
        {
          value: 2154,
          name: "山东师范大学",
        },
      ]
      let echartData = []
      let data = []
      let xAxisData = []
      let yAxisData = []
@@ -73,7 +56,7 @@
      if (this.dataList) {
        data = this.dataList
        echartData = data.map(item => {
          let name = item.province || item.country
          let name = item.province || item.country || item.name
          // xAxisData.push(name)
          // yAxisData.push(item.count)
          count += item.count
@@ -183,8 +166,8 @@
              "#18edc9",
              "#6ac5fa",
            ],
            // minAngle: 15,
            // startAngle: 270,
            minAngle: 15,
            startAngle: 270,
            label: {
              normal: {
                formatter: function (params, ticket, callback) {
@@ -209,7 +192,7 @@
            },
            labelLine: {
              normal: {
                length: 55 * scale,
                length: 30,
                length2: 0,
                lineStyle: {
                  color: "#0b5263",
@@ -233,6 +216,7 @@
    },
    project: {
      deep: true,
      immediate: true,
      handler(newVal) {
        let requsetFn = null
        switch (newVal) {
@@ -242,17 +226,28 @@
          case "全国项目":
            requsetFn = countProvinceDimension
            break
          case "全球管网图":
            requsetFn = countProvinceDimension
            break
          case "全国管网图":
            requsetFn = countProvinceDimension
            break
          default:
            requsetFn = countProjectStorage
            break
        }
        requsetFn && this.initData(requsetFn)
        this.setOptions(this.option)
      },
    },
  },
  created() {
    // this.initData()
  },
  mounted() {
    this.initData()
    this.initChart()
    if (this.autoResize) {
      window.addEventListener("resize", this.resizeHandler)
@@ -270,7 +265,7 @@
  },
  methods: {
    resizeHandler() {
      this.chart.resize()
      this.chart && this.chart.resize()
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart, "", {
@@ -288,6 +283,7 @@
      if (this.chart) {
        this.chart.setOption(option)
      }
    },
    refresh() {
      this.setOptions(this.option)
@@ -295,8 +291,8 @@
    clearChart() {
      this.chart && this.chart.clear()
    },
    async initData(requsetFn = countCountryDimension) {
      const res = await requsetFn()
    async initData(requsetFn) {
      const res = await requsetFn(this.params)
      if (res.code == 200) {
        this.dataList = res.result
        console.log("requsetFn", res)