关于菜鸟实战中遇到的项目问题-第一期

1. query传参的确可以拿到值，但是如果传过来的值是非字符串的，页面回退或者刷新，数据就会没得 解决方法：小主你忘记了页面存储 localStorage,localStorage可以在不同的页面使用。 这边借鉴了一些其他金主的教程：

具体见这篇文章：juejin.cn/post/703374… 强烈安利

2. echarts操蛋的配置,过分抠细节的甲方 样图与代码放在下面 2-1 柱状图（名字在左侧，只需要把x轴和y轴的数据变化下即可）

   {
     "en-US":{
        "export":"export",
        "useTimes":"useTimes"
     },
     "zh-CN":{
        "export":"导出Excel",
        "useTimes":"使用次数"
      }
   }
</i18n>
<template>
  <!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
  <div id="chart" ref="chart"></div>
</template>

<script>
import echarts from 'echarts/lib/echarts' // 引入基本模板
// import { COLOR_VAL } from '@/enums/baseColorVal'
import { yzSYInfo } from '@/api/decision-making.js'

export default {
  data() {
    return {
      resultInfo: [],
      dataZoom: [],
    }
  },
  props: {
    conditions: {
      type: Object,
    },
  },
  computed: {},
  watch: {},
  methods: {
    // 获取印章总数
    async yzSYInfo() {
      const {
        data: { code, data },
      } = await yzSYInfo(this.conditions)
      if (code === 0) {
        let xAxis = []
        let lineData = []
        if (data) {
          this.resultInfo = data
          this.$emit('complate', data)
          for (let index = 0; index < this.resultInfo.length; index++) {
            xAxis[index] = this.resultInfo[index].sealName
            lineData[index] = this.resultInfo[index].totalSealUsedCount
          }
        }
        if (xAxis.length > 10) {
          this.dataZoom = [
            {
              show: true,
              realtime: true,
              start: 65,
              end: 85,
            },
          ]
        } else {
          this.dataZoom = []
        }
        this.writeChart(xAxis, lineData)
      }
    },
    writeChart(xAxis, lineData) {
      // [3] 基于准备好的 DOM，初始化 Echarts 实例
      // 使用 ref 访问 DOM, 也可以使用 document.getElementById('chart')
      //   const { r, g, b } = COLOR_VAL()
      const chart = echarts.init(this.$refs.chart, 'light')
      // [4] 设置 Echarts 图表数据
      chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: params => {
            if (params && params[0]) {
              return `${this.$t('useTimes')}<br/> <i class="power_class"></i>${
                params[0].name
              } ${params[0].value}`
            } else {
              return `${this.$t('useTimes')}<br/> <i class="power_class"></i>${
                params[0].name
              } ${0}
                `
            }
          },
        },
        title: {
          show: Object.keys(lineData).length === 0,
          textStyle: {
            color: '#999',
            fontSize: 16,
          },
          text: this.$t('noDataTips'),
          left: 'center',
          top: 'center',
        },

        series: [
          {
            name: this.$t('sealTimes'),
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  // 给出颜色组
                  let colorList = [
                    '#759aa0',
                    '#e69d87',
                    '#8dc1a9',
                    '#ea7e53',
                    '#eedd78',
                    '#73a373',
                    '#73b9bc',
                    '#7289ab',
                    '#91ca8c',
                    '#f49f42',
                  ]
                  //循环调用
                  return colorList[params.dataIndex % colorList.length]
                },
              },
            },
            data: lineData,
            // encode: {
            //   x: 'amount',
            //   y: 'sealName',
            // },
            label: {
              show: true,
              position: 'right',
            },
          },
        ],
        xAxis: {
          type: 'value',
          axisPointer: {
            type: 'shadow',
          },
          axisLabel: {
            interval: 0,
            // formatter: function (value) {
            //   let valueTxt = ''
            //   if (value.length > 10) {
            //     valueTxt = `${value.slice(0, 10)}...`
            //   } else {
            //     valueTxt = value
            //   }
            //   return valueTxt
            // },
          },
        },
        dataZoom: this.dataZoom,
        grid: {
          left: 375,
        },
        yAxis: {
          data: xAxis,
          type: 'category',
          splitLine: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              let newParamsName = '' // 最终拼接成的字符串
              let paramsNameNumber = value.length // 实际标签的个数
              let provideNumber = 30 // 每行能显示的字的个数
              let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (let p = 0; p < rowNumber; p++) {
                  let tempStr = '' // 表示每一次截取的字符串
                  let start = p * provideNumber // 开始截取的位置
                  let end = start + provideNumber // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = value.substring(start, paramsNameNumber)
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = `${value.substring(start, end)}\n`
                  }
                  newParamsName += tempStr // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = value
              }
              //将最终的字符串返回
              return newParamsName
            },
          },
        },
      })
      //图表自适应窗口大小
      window.onresize = chart.resize
      this.$once('hook:beforeDestroy', () => {
        window.onresize = null
        echarts.dispose(chart)
      })
    },
    // draw() {
    //   const chart = echarts.init(this.$refs.chart, 'light')
    //   window.addEventListener('resize', function () {
    //     chart.resize()
    //   })
    // },
  },
  mounted() {
    // this.draw()
    this.yzSYInfo()
  },
}
</script>

<style lang="scss" scoped>
#chart {
  width: 95%;
  height: 80rem;
  box-sizing: border-box;
  margin: -3rem 5rem 0.5rem 0.5rem;
}
</style>

2-2 柱状图（名字在下侧，但是需要倾斜，注意倾斜角度不能过大，否则或导致名字遮盖的问题，别问我怎么知道的）

   {
     "en-US":{
        "export":"export",
        "useTimes":"useTimes"
     },
     "zh-CN":{
        "export":"导出Excel",
        "useTimes":"使用次数"
      }
   }
</i18n>
<template>
  <!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
  <div id="chart" ref="chart"></div>
</template>

<script>
import echarts from 'echarts/lib/echarts' // 引入基本模板
import { deptSYInfo } from '@/api/decision-making.js'

export default {
  data() {
    return {
      resultInfo: [],
      dataZoom: [],
    }
  },
  props: {
    conditions: {
      type: Object,
    },
  },
  computed: {},
  watch: {},
  methods: {
    // 获取申请次数
    async deptSYInfo() {
      const {
        data: { code, data },
      } = await deptSYInfo(this.conditions)
      if (code === 0) {
        let xAxis = []
        let lineData = []
        if (data) {
          this.resultInfo = data
          this.$emit('complate', data)
          for (let index = 0; index < this.resultInfo.length; index++) {
            xAxis[index] = this.resultInfo[index].deptName
            lineData[index] = this.resultInfo[index].totalSealUsedCount
          }
        }
        if (xAxis.length > 20) {
          this.dataZoom = [
            {
              show: true,
              realtime: true,
              start: 65,
              end: 85,
            },
          ]
        } else {
          this.dataZoom = []
        }
        this.writeChart(xAxis, lineData)
      }
    },
    writeChart(xAxis, lineData) {
      // [3] 基于准备好的 DOM，初始化 Echarts 实例
      // 使用 ref 访问 DOM, 也可以使用 document.getElementById('chart')
      //   const { r, g, b } = COLOR_VAL()
      const chart = echarts.init(this.$refs.chart, 'light')
      // [4] 设置 Echarts 图表数据
      chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: params => {
            if (params && params[0]) {
              return `${this.$t('useTimes')}<br/> <i class="power_class"></i>${
                params[0].name
              } ${params[0].value}`
            } else {
              return `${this.$t('useTimes')}<br/> <i class="power_class"></i>${
                params[0].name
              } ${0}
                `
            }
          },
        },
        title: {
          show: Object.keys(lineData).length === 0,
          textStyle: {
            color: '#999',
            fontSize: 16,
          },
          text: this.$t('noDataTips'),
          left: 'center',
          top: 'center',
        },

        series: [
          {
            name: this.$t('sealTimes'),
            type: 'bar',
            itemStyle: {
              normal: {
                color: function (params) {
                  // 给出颜色组
                  let colorList = [
                    '#759aa0',
                    '#e69d87',
                    '#8dc1a9',
                    '#ea7e53',
                    '#eedd78',
                    '#73a373',
                    '#73b9bc',
                    '#7289ab',
                    '#91ca8c',
                    '#f49f42',
                  ]
                  //循环调用
                  return colorList[params.dataIndex % colorList.length]
                },
              },
            },
            data: lineData,
            label: {
              show: true,
              position: 'top',
            },
          },
        ],
        xAxis: {
          data: xAxis,
          type: 'category',
          axisPointer: {
            type: 'shadow',
          },
          axisLabel: {
            interval: 0, //横轴信息全部显示
            formatter: function (value) {
              let newParamsName = '' // 最终拼接成的字符串
              let paramsNameNumber = value.length // 实际标签的个数
              let provideNumber = 12 // 每行能显示的字的个数
              let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (let p = 0; p < rowNumber; p++) {
                  let tempStr = '' // 表示每一次截取的字符串
                  let start = p * provideNumber // 开始截取的位置
                  let end = start + provideNumber // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = value.substring(start, paramsNameNumber)
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = `${value.substring(start, end)}\n`
                  }
                  newParamsName += tempStr // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = value
              }
              //将最终的字符串返回
              return newParamsName
            },
            rotate: 20,
          },
        },

        dataZoom: this.dataZoom,
        grid: {
          bottom: 100,
        },

        yAxis: {
          type: 'value',
          splitLine: {
            show: false,
          },
        },
      })
      //图表自适应窗口大小
      window.onresize = chart.resize
      this.$once('hook:beforeDestroy', () => {
        window.onresize = null
        echarts.dispose(chart)
      })
    },
    // draw() {
    //   const chart = echarts.init(this.$refs.chart, 'light')
    //   window.addEventListener('resize', function () {
    //     chart.resize()
    //   })
    // },
  },

  mounted() {
    // this.draw()
    this.deptSYInfo()
  },
}
</script>

<style lang="scss" scoped>
#chart {
  width: 71%;
  height: 80rem;
  box-sizing: border-box;
  margin: -3rem 5rem 0.5rem auto;
}
</style>

2-3 饼图-百分比

   {
     "en-US":{
        "export":"export",
        "useTimes":"useTimes"
     },
     "zh-CN":{
        "export":"导出Excel",
        "useTimes":"申请流程次数"
      }
   }
</i18n>
<template>
  <!-- [1] 为 ECharts 准备一个具备大小 (宽高) 的 DOM -->
  <div id="chart" ref="chart" style="height: 50rem"></div>
</template>

<script>
import echarts from 'echarts/lib/echarts' // 引入基本模板
import { sealInfo } from '@/api/decision-making.js'
export default {
  data() {
    return {
      dataZoom: [],
    }
  },
  props: {
    conditions: {
      type: Object,
    },
  },
  methods: {
    // 获取申请次数
    async sealInfo() {
      const {
        data: { code, data },
      } = await sealInfo(this.conditions)
      if (code === 0) {
        if (data.percent) {
          this.dataZoom = data.percent.map(item => {
            if (item) {
              return {
                value: item.sealCount,
                name: item.name,
              }
            }
          })
        }
        this.writeChart(this.dataZoom)
      }
    },
    writeChart(data) {
      const chart = echarts.init(this.$refs.chart, 'light')
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
        },

        // formatter: params => {
        //   debugger
        //   if (params && params[0]) {
        //     return `${this.$t('useTimes')}<br/> <i class="power_class"></i>${
        //       params[0].name
        //     } ${params[0].value}`
        //   } else {
        //     return `${this.$t('useTimes')}<br/> <i class="power_class"></i>${
        //       params[0].name
        //     } ${0}
        //         `
        //   }
        // },
        title: [
          {
            left: '30%',
            top: '45%',
            textAlign: 'center',
          },
        ],
        series: [
          {
            type: 'pie',
            radius: window.window.screen.width > 1300 ? '50%' : '40%',
            center: ['50%', '50%'],
            data: data,
            label: {
              position: 'outer',
              alignTo: 'none',
              // formatter: '{b} : {c} ({d}%)',
              formatter(v) {
                let text = `${v.name}:${v.percent.toFixed(2)}%`
                if (text.length <= 8) {
                  return text
                } else if (text.length > 8 && text.length <= 16) {
                  return (text = `${text.slice(0, 8)}\n${text.slice(8)}`)
                } else if (text.length > 16 && text.length <= 24) {
                  return (text = `${text.slice(0, 8)}\n${text.slice(
                    8,
                    16
                  )}\n${text.slice(16)}`)
                } else if (text.length > 24 && text.length <= 30) {
                  return (text = `${text.slice(0, 8)}\n${text.slice(
                    8,
                    16
                  )}\n${text.slice(16, 24)}\n${text.slice(24)}`)
                } else if (text.length > 30) {
                  return (text = `${text.slice(0, 8)}\n${text.slice(
                    8,
                    16
                  )}\n${text.slice(16, 24)}\n${text.slice(
                    24,
                    30
                  )}\n${text.slice(30)}`)
                }
              },
              bleedMargin: 5,
              textStyle: {
                fontSize: window.window.screen.width * 0.008,
              },
            },
            left: '50%',
            right: 0,
            top: 0,
            bottom: 0,
          },
        ],
      }
      chart.setOption(option)
      //图表自适应窗口大小
      window.onresize = chart.resize
      this.$once('hook:beforeDestroy', () => {
        window.onresize = null
        echarts.dispose(chart)
      })
    },
    // draw() {
    //   const chart = echarts.init(this.$refs.chart, 'light')
    //   window.addEventListener('resize', function () {
    //     chart.resize()
    //   })
    // },
  },

  mounted() {
    // this.draw()
    this.sealInfo()
  },
}
</script>

<style lang="scss" scoped>
#chart {
  width: 90%;
  height: 40rem;
  box-sizing: border-box;
  margin: 0 auto;
}
</style>

3.e-table添加表格线，border不生效 加入下样式即可 /deep/.el-table td { border-bottom: 1px solid #ebeef5; }