vue ehcarts小组件

 

var perChart = {
  props: ['charts'],
  data() {
    return {
      name: '',
      clanId: '',
      nums: '',
      formatterDataList: [],
      myecharts: '', //实例
      option: {
        color: ['#5793f3', '#d14a61', '#675bba'],
        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['排名', '观众数']
        },

        grid: {
          top: 50,
          bottom: 50
        },
        xAxis: [{
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: '#d14a61'
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return '观众数  ' + params.value +
                    (params.seriesData.length ? ', ' + (params.seriesData[0].data > 0 ? '增加' + params.seriesData[0].data : '减少' + params.seriesData[0].data) : '');
                }
              }
            },
            data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
          },
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: '#5793f3',
              }
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return '排名  ' + params.value +
                    (params.seriesData.length ? ', ' + (params.seriesData[0].data > 0 ? '上升' + params.seriesData[0].data : '下降' + params.seriesData[0].data) : '');
                }
              }
            },
            data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
          }
        ],
        yAxis: [{
          show: false,
          type: 'value'
        }],
        series: [{
            name: '排名',
            type: 'line',
            xAxisIndex: 1,
            smooth: true,
            symbolSize: 1,
            itemStyle: {
              normal: {
                color: '#5793f3',
                lineStyle: {
                  width: 1,
                }
              }
            },

            data: ''
          },
          {
            name: '观众数',
            type: 'line',
            smooth: true,
            symbolSize: 1,
            itemStyle: {
              normal: {
                color: '#d14a61',
                lineStyle: {
                  width: 1,
                }
              }
            },
            data: ''

          }
        ]
      }
    }
  },
  methods: {
    getBeforeData(date, cmd) {
      axios.get(`url`, {
          params: {
            rdate: date,
            cmd: cmd
          }
        })
        .then(data => {
          let perList = [];
          let totalRoomidArr = new Set(data.data.map(items => items.roomId));
          let perRoomidArr = Array.from(totalRoomidArr)
          for (let i = 0, len = perRoomidArr.length; i < len; i++) {
            const perRoomid = perRoomidArr[i];
            perList.push(data.data.filter(items => items.roomId == perRoomid))
          }
          let perLenArr = perList.map(items => items.length)
          let maxLen = Math.max(...perLenArr)
          let maxArr = perList.filter(items => items.length == maxLen)
          maxArr[0].sort((a, b) => a.id - b.id)
          console.log(maxArr)
          this.name = maxArr[0][0].anchorName
          this.clanId = maxArr[0][0].clanId
          this.nums = maxArr[0][0].nums

          let orderArr = maxArr[0].map(items => items.comparId) //排名变化
          let seeArr = maxArr[0].map(items => items.comparSum) //观众数变化
          let totalOrderId = maxArr[0].map(items => items.orderId) //具体排名
          let totalSum = maxArr[0].map(items => items.sum) //观众人数

          console.log(this.option.series)
          console.log(orderArr)
          console.log(seeArr)
          this.option.xAxis[0].data = totalSum
          this.option.xAxis[1].data = totalOrderId

          this.option.series[0].data = orderArr
          this.option.series[1].data = seeArr
          this.myecharts.setOption(this.option, true)

        })

    }
  },
  watch: {
    charts(newval) {
      // console.log(newval)
    }
  },
  created() {
    this.getBeforeData(1, this.charts.cmd)
  },
  mounted() {
    this.myecharts = echarts.init(this.$refs.fuck)
    this.myecharts.setOption(this.option, true)
    const that = this
    window.addEventListener('resize', function () {
      that.myecharts.resize()
    })
  },
  template: `
  <div style="padding: 20px 0px;">
  <div style="text-align: center;">{{charts.msg}}</div>
  <div style="display:flex; justify-content:space-around;font-size: 14px;">
  <span>主播昵称:{{this.name}}</span>
  <span>工会ID:{{this.clanId}}</span>
  <span>上榜次数:{{this.nums}}</span>
  </div>
  <div ref="fuck" class="my-chart"></div>
  </div>
  `
}