charts数据可翻页动态切换的的2D饼图

原创已于 2022-07-21 13:20:27 修改 · 441 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-04-25 11:43:15 首次发布

charts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用Echarts库实现数据的分页加载，通过自定义方法动态展示行业分布的饼图，当用户翻页时，仅加载并更新部分数据，提高了用户体验。

1.需求

在这里插入图片描述
echarts案例只提供所有数据一起加载，不能一部分一部分翻页显示，所以自己写了一个

2.实现

import Data from '@/assets/json/industryData.json' // 数据
const echarts = require('echarts/lib/echarts')
var industryDistrubute

  data() {
    return {
      IndustryDistrubuteChartsData: {},
      pageStart: 0,
      pageEnd: 9,
      pageSum: Data .RECORDS.length,
      
    }
  },

  methods: {
    toNotify(tip){
      this.$notify({
        message: tip,
        background:'red',
        duration: 1000
      })
    },
    getIndustryDistrubuteCharts() {
      this.IndustryDistrubuteChartsData = Data .RECORDS.slice(this.pageStart,this.pageEnd)
      if (
        // dom存在的时候先销毁，再生成
        industryDistrubute != null &&
        industryDistrubute != '' &&
        industryDistrubute != undefined
      ) {
        industryDistrubute.dispose() //销毁
      }
      industryDistrubute = echarts.init(
        document.getElementById('industryDistrubuteCharts')
      )
      const option = {
        color: ["#b3eff0", "#24ceda", "#1db6e6", "#4bbdff", '#b2efb0','#6ed597','#34bf6c','#f8be60','#f5e4a1'],
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{b} : </br> {c} 家  </br> (占比{d}%)',
          data:  this.IndustryDistrubuteChartsData,
          position: (point, params, dom, rect, size) => {
          // 鼠标坐标和提示框位置的参考坐标系是：
          // 以外层div的左上角那一点为原点，x轴向右，y轴向下

          // 提示框位
          let x = 0;
          let y = 0;

          // 当前鼠标位置
          let pointX = point[0]
          let pointY = point[1]

          // 提示框大小
          let boxWidth = size.contentSize[0];
          let boxHeight = size.contentSize[1];

          if (boxWidth > pointX) {
            x = 5
          } else {
            x = pointX = boxHeight
          }

          if (boxHeight > pointY) {
            y = 5;
          } else { // 上边放得下
            y = pointY - boxHeight;
          }
 
          return [x, y];

       }
        },
        legend: {
          align:'left',
          icon: "circle",
          type: 'scroll',
          orient: 'vertical',
          x: 'right',  
          textstyle: {
            fontsize: 8,
          },
          data: this.IndustryDistrubuteChartsData,          
          formatter: (name) => { return name.length > 10 ? name.slice(0, 7).padEnd(10, '.'): name.padEnd(10) }
          // (name) => {
          //   //图例后数字添加
          //   let singleData = this.IndustryDistrubuteChartsData.filter(
          //     (item) => {
          //       return item.name == name
          //     }
          //   )
          //   return name.length > 8 ? name.slice(0, 7).padEnd(10, '.') + singleData[0].value : name.padEnd(10) + singleData[0].value            
          // },
        },
        series: [
          {
            name: '数量占比： ',
            type: 'pie',
            size: '90%',
            center: ['28%', '50%'],
            data: this.IndustryDistrubuteChartsData,
            itemStyle: {
              normal: {
                //隐藏标注标签
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
          },
        ],
      }
      industryDistrubute.setOption(option)
    },
    
    // 翻页
    prev() {
      if (this.pageStart===0 && this.pageEnd === 9) {
        this.toNotify("你已经在第一页了！")
      } else{
        this.pageStart = this.pageStart - 9
        this.pageEnd = this.pageEnd - 9
        this.getIndustryDistrubuteCharts()  
      }
      console.log(this.pageStart, this.pageEnd);
    },
    next() {
      if (this.pageEnd >= Data.RECORDS.length) {
        this.toNotify("你已经在最后一页了！")
      } else{
        this.pageStart = this.pageStart + 9
        this.pageEnd = this.pageEnd + 9
        this.getIndustryDistrubuteCharts()  
      }
      console.log(this.pageStart, this.pageEnd);
    },
  },
}