echarts

<template>
  <div>
    <div class="income" />
  </div>
</template>

<script>
import echarts from 'echarts'
// import { start } from 'nprogress'
export default {
  name: 'Income',

  data() {
    return {
      //   currentRole: "adminDashboard",

      mCharts: null,
      screenWidth: null,
      xDataArr: [],
      engineIncome: [],
      maintainIncome: [],
      tableData3: [],
      averageEngine: 0,
      averageMaintain: 0,
      currentPage: 1,
      totalPage: 0
    }
  },
  mounted() {
    this.mCharts = echarts.init(document.querySelector('.income'), 'light')

    // this.initData();
    this.getInfo()
    const that = this
    window.addEventListener('resize', function(i) {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    })
  },
  destroyed() {
    clearInterval(this.timerId)
    // 在组件销毁的时候, 需要将监听器取消掉
    // window.removeEventListener('resize')
  },
  methods: {
    startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId)
      }
      this.timerId = setInterval(() => {
        this.currentPage++
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1
        }
        this.initData()
      }, 3000)
    },
    getInfo() {
      this.xDataArr = []
      this.engineIncome = []
      this.maintainIncome = []
      // this.mCharts.showLoading(
      //   {
      //     text: 'loading',
      // color: 'red',
      // textColor: 'red',
      // maskColor: 'rgba(255, 255, 255, 0.2)',
      // zlevel: 0,
      //   }
      // ); // 在获取数据之前, 显示加载动画
      this.xDataArr = []
      this.echarts = []
      this.maintainIncome = []
      // const loadingRequestCount = 5
      this.$http
        .get(
          'woas/census/chargeCensus?page=1&pageSize=10' +
            '&area=' +
            '' +
            '&timeStart=' +
            '' +
            '&timeEnd=' +
            '',
          {
            headers: {
              isLoading: true
            }
          }
        )
        .then((response) => {
          if (response.data.code === 200) {
            this.mCharts.clear()
            // this.mCharts.hideLoading();
            var res = JSON.parse(JSON.stringify(response.data.result))
            this.tableData3 = res
            this.totalPage =
              this.tableData3.length % 6 === 0
                ? this.tableData3.length / 6
                : this.tableData3.length / 6 + 1
            this.startInterval()
            var index
            for (index = 0; index < this.tableData3.length; index++) {
              if (this.tableData3[index].maintainIncome === '') {
                this.tableData3[index].maintainIncome = 0
              }
              if (this.tableData3[index].engineIncome === '') {
                this.tableData3[index].engineIncome = 0
              }
              if (this.tableData3[index].maintainIncome === '') {
                this.tableData3[index].maintainIncome = 0
              }
              if (this.tableData3[index].engineIncome === '') {
                this.tableData3[index].engineIncome = 0
              }
              this.xDataArr.push(this.tableData3[index].month + '月')
              this.engineIncome.push(this.tableData3[index].engineIncome)
              this.maintainIncome.push(this.tableData3[index].maintainIncome)
            }
            var engineAll = 0
            for (let index = 0; index < this.engineIncome.length; index++) {
              engineAll += this.engineIncome[index]
            }

            this.averageEngine = engineAll / this.engineIncome.length
            var maintainAll = 0
            for (let index = 0; index < this.maintainIncome.length; index++) {
              maintainAll += this.maintainIncome[index]
            }
            this.averageMaintain = maintainAll / this.maintainIncome.length
            this.initData()
          }
        })
        .catch((reason) => {
          console.log(reason)
          // this.$message({
          //   showClose: true,
          //   message: reason,
          //   type: 'error'
          // })
        })
    },
    initData() {
      // var mcharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
      // var xDataArr = [
      //   "张三",
      //   "李四",
      //   "王五",
      //   "闰土",
      //   "小明",
      //   "茅台",
      //   "二妞",
      //   "大强",
      // ]; // 准备x轴数据
      const start = (this.currentPage - 1) * 6
      const end = this.currentPage * 6
      const showData = this.tableData3.slice(start, end)
      const month = showData.map((item) => {
        return item.month + '月'
      })
      const engineIncome = showData.map((item) => {
        return item.engineIncome
      })
      const maintainIncome = showData.map((item) => {
        return item.maintainIncome
      })
      // var yDataArr = [77, 94, 80, 72, 88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据
      var option = {
        // //       animationDuration: function(arg){
        // //   return 2000 * arg
        // // },
        // animationEasing: "elasticOut", // 缓动动画
        // animationThreshold: 7, // 动画元素的阈值
        title: {
          text: '★  收入统计',
          top: '10',
          left: '10',
          textStyle: {
            color: 'white',
            fontSize: '12'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} {a}'
        },
        grid: {
          left: 50,
          // top: 90,
          height: '55%'
        },
        dataZoom: [
          {
            type: 'inside'
            // yAxisIndex: [0],
          }
        ],
        legend: {
          top: 10,
          right: 10,
          z: 100,
          show: true,
          // data:xDataArr
          textStyle: {
            // 图例文字的样式
            color: '#ccc',
            fontSize: 10
          }
        },
        xAxis: {
          type: 'category',
          data: month,
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              // color: '#c3dbff',  //更改坐标轴文字颜色
              color: (value, index) => {
                if (
                  this.engineIncome[index] > this.averageEngine &&
                  this.maintainIncome[index] > this.averageMaintain
                ) {
                  return 'white'
                } else {
                  return 'red'
                }
              },
              fontSize: 10 // 更改坐标轴文字大小
            }
          }
        },
        yAxis: {
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontSize: 10
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            animation: true, // 控制动画是否开启
            animationDuration: 3000, // 动画的时长, 它是以毫秒为单位
            name: '维保收入',
            type: 'bar',
            // label: {
            //   show: true,
            //   position: "top",
            //   textStyle: {
            //     color: "white",
            //   },
            // },
            itemStyle: {
              normal: {
                barBorderRadius: [15, 15, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#06B5D7' }, // 柱图渐变色
                  // {offset: 0.5, color: '#44C0C1'},                 //柱图渐变色
                  { offset: 1, color: '#71C8B1' } // 柱图渐变色
                ])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#71C8B1' }, // 柱图高亮渐变色
                  { offset: 0.7, color: '#44C0C1' }, // 柱图高亮渐变色
                  { offset: 1, color: '#06B5D7' } // 柱图高亮渐变色
                ])
              }
            },
            data: maintainIncome,
            markPoint: {
              symbolSize: '30',
              label: {
                fontSize: 10
              },
              // 标记点
              data: [
                {
                  type: 'max',
                  name: '最大值'
                },
                {
                  type: 'min',
                  name: '最小值'
                }
              ],
              symbol: 'pin'
            },

            markLine: {
              // 标记线
              data: [
                {
                  type: 'average',
                  name: '平均值'
                }
              ],
              label: {
                show: false
              },
              itemStyle: {
                normal: {
                  show: false,
                  lineStyle: { type: 'solid' }
                }
              }
            }
          },

          {
            name: '工程收入',
            type: 'bar',
            // label: {
            //   show: true,
            //   position: "top",
            //   textStyle: {
            //     color: "white",
            //   },
            // },
            itemStyle: {
              normal: {
                barBorderRadius: [15, 15, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#5052EE' }, // 柱图渐变色
                  // {offset: 0.5, color: '#44C0C1'},                 //柱图渐变色
                  { offset: 1, color: '#AB6EE5' } // 柱图渐变色
                ])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#71C8B1' }, // 柱图高亮渐变色
                  { offset: 0.7, color: '#44C0C1' }, // 柱图高亮渐变色
                  { offset: 1, color: '#06B5D7' } // 柱图高亮渐变色
                ])
              }
            },
            // itemStyle: {
            //   normal: {
            //     //这里是重点
            //     color: function (params) {
            //       //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
            //       var colorList = [
            //         "#c23531",
            //         "#2f4554",
            //         "#61a0a8",
            //         "#d48265",
            //         "#91c7ae",
            //         "#749f83",
            //         "#ca8622",
            //       ];
            //       return colorList[params.dataIndex];
            //     },
            //   },
            // },
            markPoint: {
              symbolSize: '30',
              label: {
                fontSize: 10
              },
              // 标记点
              data: [
                {
                  type: 'max',
                  name: '最大值'
                },
                {
                  type: 'min',
                  name: '最小值'
                }
              ]
            },

            markLine: {
              // 标记线
              data: [
                {
                  type: 'average',
                  name: '平均值'
                }
              ],
              label: {
                show: false
              },

              itemStyle: {
                normal: {
                  show: false,
                  lineStyle: { type: 'solid' }
                }
              }
            },
            data: engineIncome,
            // showBackground: true,
            backgroundStyle: {
              color: 'rgba(51, 255, 0, 1)'
            }
          }
        ]
      }
      this.mCharts.on('mouseover', () => {
        clearInterval(this.timerId)
      })
      this.mCharts.on('mouseout', () => {
        this.startInterval()
      })
      this.mCharts.setOption(option)
      //  这种方式监听屏幕宽度有时候不生效
      window.onresize = () => {
      }
    }
  }
}
</script>
<style scoped lang="less">
.income {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 33vh;
  //    overflow: scroll;
}
</style>