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

1、问题如下图所示

2、解决办法

先给data中声明两个变量

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

处理后台取到的数据

// 假设这是后台取到的数据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 不为空}

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

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

将将处理好的值赋值给data

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

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

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

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

实现在echart饼状图上显示百分比,数据
最近业务用到了echart,用来展示分析数据挺方便的,这里做一些小笔记. 正文: 要实现在echart饼状图上显示百分比,数据,只需要添加一些属性即可(在series里添加label标签),用法如下: ...
ECharts饼状图lable显示Value所占百分比
ECharts饼状图lable显示Value所占百分比以及legend显示Value所占百分比简单的实现可以参考: export default {data() {return {}},mounte ...
去掉Echarts饼状图的引导线
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>五分钟 ...
echars ajax 饼状图,echarts饼状图实现方法
当前位置:我的异常网» Web前端 » echarts饼状图实现方法 echarts饼状图实现方法 www.myexceptions.net 网友分享于:2015-09-27 浏览:0次 echa ...
echarts饼状图引导线加圆点
实现echarts饼状图引导线加圆点实现思路: 1.首先我们在series里设置三个饼状图,设置共有的数据来防止页面交互显示错位问题设置minAngle 最小区域扇面角度防止多个数据为0时候引导线会 ...
echarts饼状图的使用
echarts饼状图的使用地址:https://echarts.apache.org/zh/index.html 第一步: 通过 npm 获取 echarts, npm install echart ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
Echarts饼状图数据动态获取
首先肯定是引入echarts的相关jar包,地址:https://www.echartsjs.com/zh/download.html 你可以引入在线定制生成的jar包,如下图所示: 然后接下来就自己 ...
echarts 饼状图（数据为0或很小的扇形显示问题、扇形间隔）
series: [{name: '概况',type: 'pie',label:{formatter: '{b}({d}%)',color:'#555555'},radius: ['30%', '50% ...

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

1、问题如下图所示

2、解决办法

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

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

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

最新文章

热门文章