echarts 自动滚动以及label做超过1w小数显示，不足时显示本身处理

小李同学i
168 阅读1分钟

echarts图表自动滚动

效果图

1667802935883.png

获取数据，对数据做处理 达到1w以小数显示，不到显示本身

async getMapChart(val) {
      try {
        const params = {
          areaCode: this.level === '3' ? this.areaCode : '',
          regionId: this.level === '1' ? -1 : this.regionId,
        }
        const res = await this.$api.screenData.getCityBusiness(params)
        const res={
            status:0,
            data:[{
              "name": "成都",
              "total": 75,
              "countInHall": 46,
              "countInOutdoor": 29,
              "outdoorPercent": 38
            }]
        }
        if (res.status === 0) {
          let { data } = res
          let arr = data.reverse()
          let yData4 = []   
          let yData5 = []
          arr.forEach(item => {    //数据处理超1w显示小数，不足保留本身
            if (item.countInHall >= 10000) {
              yData4.push(Math.round((item.countInHall / 10000) * 10) / 10 + 'W')
            } else {
              yData4.push(item.countInHall)
            }
            if (item.countInOutdoor >= 10000) {
              yData5.push(Math.round((item.countInOutdoor / 10000) * 10) / 10 + 'W')
            } else {
              yData5.push(item.countInOutdoor)
            }
          })
          this.renderMapChart(arr, yData4, yData5)

        }
      } catch (error) {
        console.log(error)
      }
    },

data是整体数据, yData4和yData5是label位置和显示需要

 renderMapChart(data, yData4, yData5) {
      clearInterval(this.timer1)
      const xData = data.map(item => item.name)
      const yData1 = data.map(item => item.countInOutdoor)
      const yData2 = data.map(item => item.countInHall)
      const yData3 = data.map(item => item.outdoorPercent)
      let nameNum    //确定类目轴数量,避免类目轴数量少滚动报错问题
      if (xData.length >= 4) {
        nameNum = 3
      } else {
        nameNum = xData.length - 1
      }
      var option
      option = {
        dataset: {     //数据集方式  为了做label
          source: {
            xData: xData,
            yData2: yData2,
            yData1: yData1,
            yData3: yData3,
            yData4: yData4,
            yData5: yData5,
          },
        },
        tooltip: {
          show: true,
          trigger: 'axis'
          },
        },
        legend: {
          right: 0,
          top: 0,
          itemHeight: 10,
          textStyle: {
            // fontSize: 10,
            color: 'rgba(255, 255, 255, 1)',
          },
          data: [
            {
              name: '厅销量',
              icon: 'roundRect',
            },
            {
              name: '行销量',
              icon: 'roundRect',
            },
            {
              name: '行销占比',
              icon: 'roundRect',
              itemStyle: {
                itemWidth: 10,
                color: 'rgba(234, 92, 43, 1)',
                opacity: 1,
              },
            },
          ],
        },
        grid: {
          show: false,
          top: '12%',
          left: '3%',
          right: '15%',
          bottom: '3%',
          containLabel: true,
        },
        dataZoom: [
          {
            type: 'inside',
            yAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x轴
            startValue: 0, // 从头开始。
            endValue: nameNum, // 一次性展示4个
            zoomOnMouseWheel: false, // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
          },
        ],
        xAxis: {
          type: 'value',
          axisLabel: {
            color: 'rgba(255, 255, 255, 1)',
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 1)',
            },
          },
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisLabel: {
            interval: 0,
            color: 'rgba(255, 255, 255, 1)',
            margin: 10, //刻度标签与轴线之间的距离。
          },
          axisLine: {
            show: true,
            margin: 10, //刻度标签与轴线之间的距离。
            lineStyle: {
              color: 'rgba(255, 255, 255, 1)',
            },
          },
          axisTick: {
            show: false,
            // alignWithLabel: true,
          },
          boundaryGap: true,
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: '厅销量',
            type: 'bar',
            barWidth: 15,
            // barGap: '-100%', // 设置柱形重合的重要步骤
            z: 12,
            stack: 'total',  //堆叠
            emphasis: {
              focus: 'series',
            },
            itemStyle: {
              borderRadius: [15, 0, 0, 15],
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(66, 65, 245, 1)', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(149, 56, 216, 1)', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            // data: yData2,
          },
          {
            name: '行销量',
            type: 'bar',
            barWidth: 15,
            // barGap: '-100%', // 设置柱形重合的重要步骤
            stack: 'total',
            z: 12,
            // sampling: 'max',
            label: {
              show: true,
              position: 'right',
              // formatter: '{@[2]}',
              // fontSize: 11,
              // 生成rich label 通过宽度裁剪到柱右侧
              // distance: 1,
              formatter: '{hall|{@[4]}}   {row|{@[5]}}   {percentage|{@[3]}%}',
              rich: {
                hall: {
                  color: 'rgba(149, 56, 216, 1)',
                  // width: 1,
                },
                row: {
                  color: 'rgba(98, 104, 219, 1)',
                  // width: 1,
                },
                percentage: {
                  color: 'rgba(234, 92, 43, 1)',
                  // width: 1,
                  // padding: [0, 0, 0, 36],
                },
              },
              color: 'rgba(26, 219, 251, 1)',
            },
            emphasis: {
              focus: 'series',
            },
            itemStyle: {
              borderRadius: [0, 15, 15, 0],
              color: 'rgba(98, 104, 219, 1)',
            },
            // data: yData1,
          },
          {
            name: '行销占比',
            type: 'bar',
            barGap: '-100%', // 设置柱形重合的重要步骤
            barWidth: 15,
            z: 1,
            itemStyle: {
              borderRadius: 15,
              color: 'rgba(234, 92, 43, 1)',
              opacity: 0,
            },
          },
        ],
      }
      if (this.mapChart == null) {
        this.mapChart = this.$echarts.init(this.$refs.mapChart)
      }

      this.mapChart.clear()
      this.mapChart.setOption(option)
      this.mapChart.off('mouseover')
      this.mapChart.off('mouseout')
      this.mapChart.off('datazoom')
      if (xData.length > 4) {
        this.openTimer('timer1', option, xData, nameNum, 'mapChart')  //开启定时器滚动事件
      }

      this.mapChart.on('mouseover', () => {
        if (xData.length > 4) {
          clearInterval(this.timer1)  //关闭定时器，停止滚动
        }
      })
      this.mapChart.on('mouseout', () => {
        if (xData.length > 4) {
          this.$utils.throttle(this.openTimer('timer1', option, xData, nameNum, 'mapChart'), 2000)
        }
      })
      this.mapChart.on('datazoom', () => {
      //获取手动滚动后的开始结束value，从当前手动位置开始滚动
        let { s, e } = this.editZoomValue(this.mapChart.getOption())   
        option.dataZoom[0].startValue = s
        option.dataZoom[0].endValue = e
        if (xData.length > 4) {
          clearInterval(this.timer1)
          this.$utils.throttle(() => { //这是封装的防抖函数
            this.openTimer('timer1', option, xData, nameNum, 'mapChart')
          }, 2000)
        }
      })
    },

确保手动滚动图表后，自动滚动以手动滚动的位置继续滚动

 editZoomValue(option) {
      const dz = option.dataZoom[0]
      const s = dz.startValue
      const e = dz.endValue
      return { s, e }
    },

开始定时器自动滚动的函数

//timer定时器存放名称,option配置项,xData类目轴数组，nameNum是endValue值，canvas图表存放的名称
openTimer(timer, option, xData, nameNum, canvas) {
      this[timer] = setInterval(() => {
        // 每次向后滚动一个，最后一个从头开始。
        // console.log(option, 'option')
        if (option.dataZoom[0].endValue >= xData.length - 1) {
          option.dataZoom[0].endValue = nameNum
          option.dataZoom[0].startValue = 0
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
        }
        this[canvas].setOption(option)
      }, 5000)
    },
avatar
文章
阅读
粉丝