代码更新

surprise

2024-05-09 e897fc3d35f8e5dfa56d5f0c80a655ccf99202cf

 src/components/chart/BaseBarChart.vue

@@ -1,23 +1,28 @@
<template>
  <div class="barchar" ref="chart"></div>
  <div class="barchar"
       ref="chart"></div>
</template>

<script>
import * as echarts from "echarts"
import { countCountryDimension } from "@/api/screen.js"
import {
  countCountryDimension,
  countProvinceDimension,
  countZhPipeStations,
} 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,18 +30,26 @@
    // },
    type: {
      type: String,
      default: 'canvas'
    }
      default: "canvas",
    },
    project: {
      type: String,
      default: "全国项目",
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
  data () {
    return {
      chart: null,
      dataList: []
      dataList: [],
    }
  },
  computed: {
    option() {
      let data = [
    option () {
      let data=[
        {
          country: "苏丹",
          count: 1,
@@ -83,16 +96,52 @@
        },
      ]

      let xAxisData = []
      let yAxisData = []
      if (this.dataList) {
        data = this.dataList
      let xAxisData=[]
      let yAxisData=[]
      if(this.dataList) {
        data=this.dataList
      }
      let count=0
      let countVal=0

      const title=this.title
      data.forEach(item => {
        xAxisData.push(item.country)
        yAxisData.push(item.count)
        let name=item.province||item.country||item.输送介质
        let value=item.count||item.站场数量
        if(title=="站场座数"&&item.管道数量) {
          count+=item.管道数量
        } else {
          count+=item.count||0
        }

        // switch (title) {
        //   case "站场座数":
        //     countVal = item.管道数量
        //     break
        //   case "项目个数":
        //     countVal = item.count
        //     break
        // }

        xAxisData.push(name)
        yAxisData.push(value)
      })
      let option = {

      var obj=[];
      for(var i in xAxisData) {
        if(xAxisData[i]) {
          obj.push(xAxisData[i])
        } else {
          obj.push("其他")
        }
      }

      xAxisData=obj

      if(typeof count==="number") {
        this.$bus.$emit("changeCount",count)
      }
      let option={
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
@@ -123,21 +172,24 @@
              textStyle: {
                fontSize: 11,
              },
              formatter: function (value) {
              formatter: function(value) {
                //
                var ret = "" //拼接加\n返回的类目项
                var maxLength = 2 //每项显示文字个数
                var valLength = value.length //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
                if (rowN > 1) {
                var ret="" //拼接加\n返回的类目项
                var maxLength=2 //每项显示文字个数
                var valLength=value.length //X轴类目项的文字个数
                var rowN=Math.ceil(valLength/maxLength) //类目项需要换行的行数
                if(xAxisData.length<7) {
                  return value
                }
                if(rowN>1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = "" //每次截取的字符串
                    var start = i * maxLength //开始截取的位置
                    var end = start + maxLength //结束截取的位置
                  for(var i=0;i<rowN;i++) {
                    var temp="" //每次截取的字符串
                    var start=i*maxLength //开始截取的位置
                    var end=start+maxLength //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n"
                    ret += temp //凭借最终的字符串
                    temp=value.substring(start,end)+"\n"
                    ret+=temp //凭借最终的字符串
                  }
                  return ret
                } else {
@@ -165,6 +217,7 @@
        ],
        series: [
          {
            name: this.title,
            type: "bar",
            data: yAxisData,
            barWidth: "12px",
@@ -187,7 +240,7 @@
                  ],
                  false
                ),
                barBorderRadius: [20, 20, 0, 0],
                barBorderRadius: [20,20,0,0],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
@@ -200,11 +253,11 @@
                height: 14,
                backgroundColor: "rgba(0,160,221,0.1)",
                borderRadius: 200,
                position: ["-8", "-20"],
                position: ["-8","-20"],
                distance: 1,
                formatter: value => {
                  // console.log(value);
                  if (value.name == "中国") {
                  if(value.name=="中国") {
                    return [
                      `    {d|●}", " {a|${value.value}}     \n", "    {b|}`,
                    ].join(",")
@@ -234,72 +287,93 @@
          },
        ],
      }

      return option
    }
    },
  },
  watch: {
    // option: {
    //   deep: true,
    //   handler(newVal) {
    //     this.setOptions(newVal)
    //   }
    // },
    currentProject: {
    option: {
      deep: true,
      handler(newVal) {
        this.initData()
      handler (newVal) {
        this.setOptions(newVal)
      },
    },
    project: {
      deep: true,
      immediate: true,
      handler (newVal) {
        let requsetFn=null
        switch(newVal) {
          case "全球项目":
            requsetFn=countCountryDimension
            break
          case "全国项目":
            requsetFn=countProvinceDimension
            break
          case "全球管网图":
            requsetFn=countZhPipeStations
            break
          case "全国管网图":
            requsetFn=countZhPipeStations
            break
          default:
            break
        }
        requsetFn&&this.initData(requsetFn)
        this.setOptions(this.option)
      }
    }
      },
    },
  },
  mounted() {
  mounted () {
    // this.initData()
    this.initChart()
    if (this.autoResize) {
      window.addEventListener('resize', this.resizeHandler)
    if(this.autoResize) {
      window.addEventListener("resize",this.resizeHandler)
    }
  },
  beforeDestroy() {
    if (!this.chart) {
  beforeDestroy () {
    if(!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.resizeHandler)
    if(this.autoResize) {
      window.removeEventListener("resize",this.resizeHandler)
    }
    this.chart.dispose()
    this.chart = null
    this.chart=null
  },
  methods: {
    resizeHandler() {
      this.chart.resize()
    resizeHandler () {
      this.chart&&this.chart.resize()
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart, '', {
        renderer: this.type
    initChart () {
      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)
    handleClick (params) {
      this.$emit("click",params)
    },
    setOptions(option) {
    setOptions (option) {
      this.clearChart()
      this.resizeHandler()
      if (this.chart) {
      if(this.chart) {
        this.chart.setOption(option)
      }
    },
    refresh() {
    refresh () {
      this.setOptions(this.option)
    },
    clearChart() {
      this.chart && this.chart.clear()
    }
  },
  methods: {
    async initData() {


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