echarts饼状图数据过多时，数据叠加(问题篇)

1、问题如下图所示

2、解决办法

1. 先给data中声明两个变量

 seriesData: [], //决定图表中显示的个数
 selected: {}, // 决定图表中显示的个数

2. 处理后台取到的数据

// 假设这是后台取到的数据
      let optionData = [
        { value: 1048, name: "搜索引擎" },
        { value: 735, name: "直接访问" },
        { value: 580, name: "邮件营销" },
        { value: 484, name: "联盟广告" },
        { value: 300, name: "视频广告" },
        { value: 452, name: "行尸走肉" },
        { value: 300, name: "风雨交加" },
        { value: 568, name: "笃志好学" },
        { value: 562, name: "非分之想" },
        { value: 741, name: "风雨同舟" },
        { value: 814, name: "大方之家" },
        { value: 108, name: "蚌鹬相持" },
        { value: 851, name: "登堂入室" },
        { value: 421, name: "风餐露宿" },
        { value: 235, name: "逍遥法外" },
        { value: 561, name: "皆大欢喜" },
        { value: 412, name: "掌上明珠" },
        { value: 354, name: "八仙过海" },
        { value: 444, name: "天上人间" },
        { value: 555, name: "霸王别姬" },
        { value: 787, name: "背水一战" },
      ];
      // 处理数据
      for (let i = 0; i < optionData.length; i++) {
        let name = optionData[i].name;
        this.seriesData.push({
          name: optionData[i].name.substring(0, 10),
          value: optionData[i].value,
        });
        this.selected[name] = i < 10; //限制图表中起始显示10个，这里必须保证 name 不为空
      }

3. 给option配置项legend属性添加type,selected

    legend: {
          orient: "vertical",
          left: "right",
          right: 20,
          top: 0,
          bottom: 20,

          type: "scroll", // 数据过多时，分页显示
          selected: this.selected, //这里默认显示数组中前十个，如果不设置，则所有的数据都会显示在图表上
        },

4. 将将处理好的值赋值给data

series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: this.seriesData, //将处理好的值赋值给ecart
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],

3、这样初始显示的数据就为10条，其它的数据则默认不显示，效果如下图

4、饼状图数据过多问题，就解决了