修改基础数据

TreeWish

2023-02-27 fb212223fdc2f692896da5483ba2b1a8aec22d5f

 src/components/chart/BaseBarChart.vue

@@ -4,20 +4,20 @@

<script>
import * as echarts from "echarts"
import { countCountryDimension } from "@/api/screen.js"
import { countCountryDimension, countProvinceDimension } from "@/api/screen.js"
export default {
  props: {
    width: {
      type: String,
      default: '100%'
      default: "100%",
    },
    height: {
      type: String,
      default: '100%'
      default: "100%",
    },
    autoResize: {
      type: Boolean,
      default: true
      default: true,
    },
    // option: {
    //   type: Object,
@@ -25,13 +25,17 @@
    // },
    type: {
      type: String,
      default: 'canvas'
    }
      default: "canvas",
    },
    project: {
      type: String,
      default: "全国项目",
    },
  },
  data() {
    return {
      chart: null,
      dataList: []
      dataList: [],
    }
  },
  computed: {
@@ -89,7 +93,8 @@
        data = this.dataList
      }
      data.forEach(item => {
        xAxisData.push(item.country)
        let name = item.province || item.country
        xAxisData.push(name)
        yAxisData.push(item.count)
      })
      let option = {
@@ -234,28 +239,42 @@
          },
        ],
      }

      return option
    }
    },
  },
  watch: {
    // option: {
    //   deep: true,
    //   handler(newVal) {
    //     this.setOptions(newVal)
    //   }
    // },
    currentProject: {
    option: {
      deep: true,
      handler(newVal) {
        this.initData()
        this.setOptions(newVal)
      },
    },
    project: {
      deep: true,
      handler(newVal) {
        let requsetFn = null
        switch (newVal) {
          case "全球项目":
            requsetFn = countCountryDimension
            break
          case "全国项目":
            requsetFn = countProvinceDimension
            break

          default:
            break
        }
        requsetFn && this.initData(requsetFn)
        this.setOptions(this.option)
      }
    }
      },
    },
  },
  mounted() {
    this.initData()
    this.initChart()
    if (this.autoResize) {
      window.addEventListener('resize', this.resizeHandler)
      window.addEventListener("resize", this.resizeHandler)
    }
  },
  beforeDestroy() {
@@ -263,7 +282,7 @@
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.resizeHandler)
      window.removeEventListener("resize", this.resizeHandler)
    }
    this.chart.dispose()
    this.chart = null
@@ -273,14 +292,14 @@
      this.chart.resize()
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart, '', {
        renderer: this.type
      this.chart = echarts.init(this.$refs.chart, "", {
        renderer: this.type,
      })
      this.chart.setOption(this.option)
      this.chart.on('click', this.handleClick)
      this.chart.on("click", this.handleClick)
    },
    handleClick(params) {
      this.$emit('click', params)
      this.$emit("click", params)
    },
    setOptions(option) {
      this.clearChart()
@@ -294,12 +313,13 @@
    },
    clearChart() {
      this.chart && this.chart.clear()
    }
  },
  methods: {
    async initData() {


    },
    async initData(requsetFn = countCountryDimension) {
      const res = await requsetFn()
      if (res.code == 200) {
        this.dataList = res.result
        console.log("requsetFn", res)
      }
    },
  },
}