testing

ruoyi-ui/src/components/xxtjEcharts/Echarts1/index.vue

@@ -0,0 +1,583 @@
+<template>
+  <div class="echarts">
+    <div class="echarts-title">
+      <div>
+        <span class="black-box"></span>
+        <span>{{ title }}</span>
+      </div>
+
+      <!-- 插入下拉多选框或者日期选择框 -->
+      <slot></slot>
+    </div>
+    <div class="echarts-radio" v-if="isPie">
+      <el-radio @change="changRadio(item)" v-model="radio" :label="item.prop" v-for="item in radioLabel"
+        :key="item.prop">{{ item.label }}</el-radio>
+    </div>
+    <div :id="echartsId" style="width: 1400px; height: 500px" ref="charts"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EchartsBox3',
+  props: {
+    echartsId: {
+      type: [String, Number, Object],
+      default: 'main'
+    },
+    tableList: {
+      type: Array,
+      default: () => [1, 2, 3, 4, 5]
+    },
+    labelKeys: {
+      type: Array,
+      default: () => [1]
+    },
+    unit: {
+      type: String,
+      default: '家'
+    },
+    type: {
+      type: String,
+      default: 'line'
+    },
+    isPie: {
+      type: Boolean,
+      default: true
+    },
+    // 判断x轴的是year 还是 szqh
+    xStr: {
+      type: String,
+      default: 'year'
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    isX: {
+      type: String,
+      default: 'category'
+    },
+    isY: {
+      type: String,
+      default: 'value'
+    },
+    isfftj: {
+      type: Boolean,
+      default: false
+    },
+    isTwoBar: {
+      type: String,
+      default: 'no'
+    },
+    // 老人留守统计使用的
+    yName: {
+      type: String,
+      default: 'total'
+    },
+    radioName: {
+      type: String,
+      default: 'total'
+    },
+    danwei: {
+      type: String,
+      default: '家'
+    },
+    hengzhu: {
+      type: String,
+      default: 'no'
+    },
+    // 消防设施配备情况表2
+    xfsspbqk: {
+      type: String,
+      default: 'no'
+    },
+    // 是否是入住率
+    ruzhulv: {
+      type: String,
+      default: 'no'
+    }
+  },
+  data() {
+    return {
+      radio: 'total',
+      newKeys: [],
+      newTableList: [],
+      newUnit: '',
+      // radioLabel: [],
+      x: [],
+      y: [],
+      // 消防设施表2
+      deepNewTableList: [],
+      deepNewKeys: [],
+      xfssbXZHOU: [],
+      xfssbYZHOU: [],
+      total: ''
+    }
+  },
+  computed: {
+    // 单选框的名字
+    radioLabel() {
+      return this.newKeys.filter((item) => item.type === 'select')
+    },
+    // 饼图全部的名字
+    all() {
+      return this.radioLabel[0].label
+    },
+    allNum() {
+      return this.newTableList[0] ? this.newTableList[0].total : 0;
+    },
+    hengzhuYData() {
+      let array = this.radioLabel.slice(1)
+      let newArr = []
+      array.forEach((item) => {
+        newArr.unshift(item.label)
+      })
+      return newArr
+    }
+  },
+  methods: {
+    // 改变table中X轴的数据的数据格式 参数是 x轴对应的数据名字，y轴对应的数据名字
+    setTable(xAxis, yAxis) {
+      // x轴
+      let arrX = []
+      let arrY = [[], [], []];
+      let temdata = [];
+      let zt = 0;
+      for (let i = 0; i < this.newKeys.length; i++) {
+        if (this.newKeys[i].prop == yAxis) {
+          if (this.newKeys[i].data) {
+            temdata = this.newKeys[i].data;
+            zt = 1;
+          }
+        }
+      }
+      this.newTableList.forEach((item) => {
+        if (this.xStr === 'hjqh') {
+          arrX.push(item[xAxis])
+          arrY.push(item[yAxis])
+        }
+        if (this.xStr === 'year') {
+          arrX.unshift(item[xAxis])
+          if (zt == 1) {
+            for (let i = 0; i < temdata.length; i++) {
+              arrY[i].unshift(item[temdata[i].prop])
+            }
+          }
+          else arrY.unshift(item[yAxis]);
+        }
+        if (this.hengzhu === 'yes') {
+          arrX.unshift(item[xAxis])
+          arrY.unshift(item[yAxis])
+        }
+        if (this.xStr === 'ssqh') {
+          arrX.push(item[xAxis])
+          if (zt == 1) {
+            for (let i = 0; i < temdata.length; i++) {
+              arrY[i].push(item[temdata[i].prop])
+            }
+          } else arrY.push(item[yAxis]);
+        }
+      })
+      this.x = arrX
+      this.y = arrY
+      if (this.isfftj === true) {
+        this.x = this.newKeys.filter((item) => item.type === 'select').map((item) => item.label)
+      }
+    },
+    // 单选框改变事件
+    changRadio(item) {
+      this.$emit('change-radio', this.radio)
+      this.setTable(this.xStr, item.prop)
+      this.echartsInit(this.echartsId, this.type, this.danwei, this.x, this.y, this.isX, this.isY)
+    },
+    // echarts 参数为：每个图表id，图表类型，单位,x轴数据，y轴数据,isX和isY是否是横向（value和category）
+    echartsInit(id, type, unit, xAxis, yData, isX, isY) {
+      // 是否显示xy轴
+      let yAxis = yData;
+      let seriesdata = [];
+
+      if (type === 'pie' || this.hengzhu === 'yes') {
+        let array = this.radioLabel.slice(1)
+        yAxis = array.map((item, index) => {
+          return { name: item.label, value: this.newTableList[0] ? this.newTableList[0][item.prop] : 0 }
+        })
+        seriesdata.push({
+          type,
+          data: yAxis,
+          barWidth: '40%',
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(180, 180, 180, 0.2)'
+          },
+          radius: ['50%', '75%'],
+          hoverAnimation: true,
+          avoidLabelOverlap: false,
+          itemStyle: {
+            normal: { color: '#288DEF' }
+          },
+          colorBy: 'series'
+        })
+      } else {
+        for (let i = 0; i < yAxis.length; i++) {
+          let colors = [{ color: '#288DEF' }, { color: '#efd428' }, { color: '#ef2895' }];
+          let names = ["总数", "公办", "民办"];
+          seriesdata.push({
+            type,
+            data: yAxis[i],
+            // barWidth: '40%',
+            name: names[i],
+            barGap: '100%',
+            symbol: 'emptydiamond',
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            radius: ['50%', '75%'],
+            hoverAnimation: true,
+            avoidLabelOverlap: false,
+            itemStyle: {
+              normal: colors[i]
+            },
+            colorBy: 'series'
+          })
+        }
+
+      }
+
+      var myChart = this.$echarts.init(document.getElementById(id))
+      var option = {
+        // color: ['#288DEF'],
+        title: {},
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {},
+        xAxis: {
+          type: 'category',
+          show: true,
+          data: xAxis,
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#000',
+              fontSize: '10',
+              itemSize: '',
+              rotate: -30
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          scale: true,
+          // inverse: true,
+          show: true,
+          name: '单位：' + unit,
+          nameTextStyle: {
+            color: '#000',
+            nameLocation: 'start'
+          },
+          data: xAxis
+        },
+        series: seriesdata
+      }
+      if (this.ruzhulv === 'yes') {
+        option.yAxis.name = ''
+      }
+      if (type === 'bar' || type === 'line') {
+        option.series[0].label = {
+          show: true,
+          color: '#000',
+          position: 'top',
+          distance: 15,
+          align: 'center',
+          verticalAlign: 'middle',
+          rotate: 0,
+          formatter: '{c}',
+          fontSize: 12,
+          rich: {
+            name: {}
+          }
+        }
+      }
+      if (type === 'pie') {
+        option.series[0].avoidLabelOverlap = true
+        option.series[0].label = {
+          show: true,
+          alignTo: 'edge',
+          minMargin: 5,
+          edgeDistance: 0,
+          lineHeight: 15,
+          formatter: function (params) {
+            return `${params.name}:${params.value}(${params.percent}%)`
+          },
+          fontSize: 16
+        }
+          ; (option.series[0].labelLine = {
+            length: 0,
+            length2: 0,
+            maxSurfaceAngle: 80
+          }),
+            (option.series[0].itemStyle = {
+              color: function (params) {
+                var colorList = ['#4B9BDB', '#44BEA3', '#8FB435', '#FEB019', '#19D4AE', '#FA6E86', '#FFB980', '#0067A6', '#C4B4E4', '#D87A80', '#9CBBFF', '#D26900', '	#BBFFFF']
+                return colorList[params.dataIndex]
+              }
+            })
+        option.graphic = {
+          type: 'group',
+          left: 'center',
+          top: 'center',
+          children: [
+            {
+              //图形中间⽂字
+              type: 'text',
+              left: 'center',
+              top: 'center',
+              style: {
+                text: this.all + '\n',
+                textAlign: 'center',
+                fill: '#492dcb',
+                fontSize: 30,
+                fontWeight: 'bold'
+              }
+            },
+            {
+              //图形中间⽂字
+              type: 'text',
+              left: 'center',
+              top: 'center',
+              style: {
+                text: '\n\n' + this.allNum + this.danwei,
+                textAlign: 'center',
+                fill: '#fad360',
+                fontSize: 30,
+                fontWeight: 'bold'
+              }
+            }
+          ]
+        }
+        option.xAxis = {
+          type: 'category',
+          show: false,
+          data: xAxis,
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#000',
+              fontSize: '10',
+              itemSize: '',
+              rotate: -30
+            }
+          }
+        }
+        option.yAxis = {
+          type: 'value',
+          scale: true,
+          // inverse: true,
+          show: false,
+          name: '单位：' + unit,
+          nameTextStyle: {
+            color: '#000',
+            nameLocation: 'start'
+          },
+          data: xAxis
+        }
+      }
+
+      if (this.hengzhu === 'yes') {
+        option.xAxis = {
+          type: 'value',
+          show: false,
+          // data: xAxis,
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#000',
+              fontSize: 40,
+              itemSize: '',
+              rotate: -30
+            },
+            formatter: function (value, index) { }
+          }
+        }
+        option.yAxis = {
+          type: 'category',
+          scale: true,
+          // inverse: true,
+          show: true,
+          nameTextStyle: {
+            color: '#000',
+            nameLocation: 'start'
+          },
+          axisLine: {
+            show: false //隐藏x轴线
+          },
+          axisTic: {
+            show: false //隐藏x轴刻度
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#000',
+              fontSize: 20,
+              itemSize: '',
+              rotate: -30
+            }
+          },
+          data: this.hengzhuYData
+        }
+        option.title = {
+          title: true,
+          text: `${this.all}：${this.allNum}(${this.danwei})`,
+          textStyle: {
+            fontSize: '20',
+            fontWeight: 'bold',
+            color: '#86AFDE'
+          },
+          top: 35
+        }
+        option.series[0].label = {
+          show: true,
+          position: 'right',
+          formatter: {},
+          fontSize: 16
+        }
+      }
+      if (this.xfsspbqk === 'yes') {
+        option.xAxis = {
+          type: 'category',
+          show: true,
+          data: this.xfssbXZHOU,
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#000',
+              fontSize: '10',
+              itemSize: '',
+              rotate: -30
+            }
+          }
+        }
+        option.series[0] = {
+          type,
+          data: this.xfssbYZHOU,
+          barWidth: '40%',
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(180, 180, 180, 0.2)'
+          },
+          radius: ['50%', '75%'],
+          hoverAnimation: true,
+          avoidLabelOverlap: false,
+          itemStyle: {
+            normal: { color: '#288DEF' }
+          },
+          colorBy: 'series',
+          label: {
+            show: true,
+            color: '#000',
+            position: 'top',
+            distance: 15,
+            align: 'center',
+            verticalAlign: 'middle',
+            rotate: 0,
+            formatter: '{c}',
+            fontSize: 12,
+            rich: {
+              name: {}
+            }
+          }
+        }
+      }
+
+      myChart.setOption(option)
+    },
+    resetRadio(val) {
+      if (val) {
+        this.radio = 'total'
+      }
+    }
+  },
+  mounted() {
+    this.$bus.$on('reset-radio', this.resetRadio)
+  },
+  watch: {
+    unit(newVal) {
+      this.newUnit = newVal
+    },
+    labelKeys(newVal) {
+      this.newKeys = newVal
+      this.deepNewKeys = this.deepCopy(this.newKeys)
+      this.deepNewKeys.splice(0, 2)
+      let array = this.deepNewKeys.map((item) => {
+        return item.label
+      })
+      this.xfssbXZHOU = array
+    },
+    tableList(newVal) {
+      if (newVal && newVal.length > 0) {
+        this.newTableList = newVal
+        this.deepNewTableList = this.deepCopy(this.newTableList)
+        let valueARR = Object.values(this.deepNewTableList[0])
+        valueARR.splice(0, 2)
+        this.xfssbYZHOU = valueARR
+        this.total = this.deepNewTableList[0].total
+      } else {
+        this.newTableList = []
+        this.xfssbYZHOU = [];
+        this.total = 0;
+      }
+      this.setTable(this.xStr, this.yName)
+      this.echartsInit(this.echartsId, this.type, this.danwei, this.x, this.y, this.isX, this.isY)
+    },
+    // 监听子组件中radio的变化
+    radio(newVal) {
+      this.radio = newVal
+    }
+  }
+}
+</script>
+
+<style scoped>
+.echarts {
+  padding: 20px;
+  width: 75%;
+}
+
+.echarts-title {
+  display: flex;
+  justify-content: space-between;
+}
+
+.echarts-title div:nth-child(1) {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+}
+
+.black-box {
+  width: 12px;
+  height: 12px;
+  background: #000;
+}
+
+.echarts-title div:nth-child(1) span:nth-child(2) {
+  margin-left: 10px;
+}
+
+.echarts-text,
+.echarts-radio,
+.xxtj-table {
+  margin-top: 15px;
+}
+
+.xxtj-table,
+.echarts,
+.ssqh {
+  border: 1px solid #dfe4ed;
+}
+</style>