代码更新

surprise

2024-05-09 e897fc3d35f8e5dfa56d5f0c80a655ccf99202cf

 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,40 +48,15 @@
  },
  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 = []
      let  count = 0
      let count = 0
      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
@@ -90,7 +73,7 @@
        yellow: {
          color: "#ffc72b",
          fontSize: 18 * scale,
          padding: [5, 4],
          padding: [4, 4],
          align: "center",
        },
        total: {
@@ -102,7 +85,7 @@
          color: "#fff",
          align: "center",
          fontSize: 14 * scale,
          padding: [5, 0],
          padding: [4, 0],
        },
        blue: {
          color: "#49dff0",
@@ -122,9 +105,8 @@
          left: "1%", // 与容器左侧的距离
          right: "1%", // 与容器右侧的距离
          top: "1%", // 与容器顶部的距离
          bottom: "1%", // 与容器底部的距离
          bottom: "10%", // 与容器底部的距离
          containLabel: true,

        },
        title: {
          text: "总数",
@@ -145,7 +127,7 @@
            fontFamily: "YouSheBiaoTiHei",
          },
        },
        

        // legend: {
        //   selectedMode: false,
        //   formatter: function (name) {
@@ -177,9 +159,15 @@
              "#034079",
              "#6f81da",
              "#00ffb4",
              "#3087d6",
              "#f6ce54",
              "#4be1ff",
              "#b6e9ff",
              "#18edc9",
              "#6ac5fa",
            ],
            minAngle: 30, //最小角度
            startAngle: 270, //起始角度
            minAngle: 15,
            startAngle: 270,
            label: {
              normal: {
                formatter: function (params, ticket, callback) {
@@ -194,7 +182,7 @@
                    params.name +
                    "}\n{hr|}\n{yellow|" +
                    params.value +
                    "}\n{blue|" +
                    "} {blue|" +
                    percent +
                    "%}"
                  )
@@ -204,7 +192,7 @@
            },
            labelLine: {
              normal: {
                length: 55 * scale,
                length: 30,
                length2: 0,
                lineStyle: {
                  color: "#0b5263",
@@ -228,6 +216,7 @@
    },
    project: {
      deep: true,
      immediate: true,
      handler(newVal) {
        let requsetFn = null
        switch (newVal) {
@@ -237,17 +226,28 @@
          case "全国项目":
            requsetFn = countProvinceDimension
            break
          case "全球管网图":
            requsetFn = countProvinceDimension
            break
          case "全国管网图":
            requsetFn = countProvinceDimension
            break

          default:
            requsetFn = countProjectStorage

            break
        }
        this.initData(requsetFn)
        requsetFn && this.initData(requsetFn)

        this.setOptions(this.option)
      },
    },
  },
  created() {
    // this.initData()
  },
  mounted() {
    this.initData()
    this.initChart()
    if (this.autoResize) {
      window.addEventListener("resize", this.resizeHandler)
@@ -265,7 +265,7 @@
  },
  methods: {
    resizeHandler() {
      this.chart.resize()
      this.chart && this.chart.resize()
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart, "", {
@@ -283,6 +283,7 @@
      if (this.chart) {
        this.chart.setOption(option)
      }
      
    },
    refresh() {
      this.setOptions(this.option)
@@ -290,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)
@@ -304,6 +305,6 @@
<style lang="scss" scoped>
.piechar {
  width: 100%;
  height: 100%;
  height: 85%;
}
</style>