echarts 玫瑰图比例太小显示优化

1.效果图
2.实现思路
3.代码

选择了 echarts 做大数据统计，但是由于统计数据的差异太大，数据特别小的时候，使用玫瑰图展示会造成看不清楚扇区的问题，用户体验着实不好！如果使用普通饼图就不会有这种情况发生，但会让项目看着很单调！我从网上找解决方法，关于这个问题的解答实在太少了，一直都没找到，终于，今天想到了合适的方法并解决这个bug！：）具体如下。

1.效果图

数据中，最小值为 1 ，最大值为 17400
如果不做处理，相信 1 的那一块扇区肯定不能正常显示！！！

2.实现思路

思路其实很简单，就是把原始的数据放大！

计算原始数据的总和 sum ，并找出最大数值 max ;
设计数据放大规则，我这里是斜体样式先将最大值 max 放大 20% 取随机数得到 number，然后在原始数据的基础上，每条数据的 value 再加上 number，形成新的饼图数据数组 showData
数据放大后玫瑰图就不会出现扇区太小的问题，但是记得把 tooltip 中的 formatter 还原成原始数据

3.代码

var pieData =[{value:1, name:'直接访问-1'},{value:100, name:'邮件营销-100'},{value:2740, name:'联盟广告-2740'},{value:1235, name:'视频广告-1235'},{value:5500, name:'搜索引擎-5500'},{value:10, name:'直接访问-10'},{value:130, name:'邮件营销-130'},{value:17400, name:'联盟广告-17400'},{value:1235, name:'视频广告-1235'},{value:5400, name:'搜索引擎-5400'}
]
var showData =[]
var sum = 0, max = 0;pieData.forEach(item => {sum += item.valueif(item.value >= max) max = item.value
})// 放大规则
var number = Math.round(max * 0.5)showData = pieData.map(item => {return {value: number + item.value,name: item.name}
})option = {backgroundColor: '#2c343c',tooltip : {trigger: 'item',formatter: function (param){return param.name +': '+ (param.value - number) + ' ' + (((param.value - number) / sum) * 100).toFixed(4) + '%'}},visualMap: {show: false,min: 0,max: 50,inRange: {colorLightness: [0, 0.5]}},series : [{name:'访问来源',type:'pie',radius : ['10%', '55%'],center: ['50%', '50%'],data: showData,roseType: 'radius',label: {normal: {textStyle: {color: 'rgba(255, 255, 255, 0.3)'}}},labelLine: {normal: {lineStyle: {color: 'rgba(255, 255, 255, 0.3)'},smooth: 0.2,length: 10,length2: 20}},itemStyle: {normal: {shadowBlur: 200,shadowColor: 'rgba(0, 0, 0, 0.5)'}},animationType: 'scale',animationEasing: 'elasticOut',animationDelay: function (idx) {return Math.random() * 200}}]
}

echarts 玫瑰图比例太小显示优化相关推荐

vue echarts 折线图多Y轴显示，加动态配置Y轴颜色
1.效果图 2.引入依赖 npm install echarts --save 3.在mian.js中引入 import * as echarts from 'echarts'; Vue.protot ...
echarts 折线图数据太多会导致卡顿_重新定义数据图表，还有比这个更厉害的吗？...
现在很多大厂都有各自的开源项目,有很多已经被用到生产环境中 ,今天分享一个我觉得很有用的开源项目. ECharts 百度开源的项目,一个使用 JavaScript 实现的开源可视化库,可以流畅的运 ...
echarts折线图，纵坐标数值显示不准确的问题解决
问题如图: 问题解决:将stack去掉或注释如下图: 转载于:https://www.cnblogs.com/telwanggs/p/10844290.html
vue echarts 玫瑰图
实现效果: <template><div class="AppealHotline"><div id="AppealHotlineChart ...
Echarts 雷达图鼠标移入标签名显示悬浮框
const that = this;this.category.on("mouseover", function (params) {that.toolProportion = & ...
echarts折线图堆叠怎么设置_ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
echart 圆饼图显示单位_玩转ECharts之实现“1/2圆的玫瑰图”
前言玩转ECharts系列,主要为大家讲解我们基于ECharts如何实现企业级大屏项目中较为常用的各种奇奇怪怪的图表,接下来我们将通过几篇文章从基础图表开始为大家详细讲解实现这些图表样式的一些&qu ...
echarts力导向图节点连线动画_D3.js 力导向图的显示优化（二）- 自定义功能
摘要: 在本文中,我们将借助 D3.js 的灵活性这一优势,去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能:Nebula Graph 图探索的删除节点和缩放功能前言在上篇文章中(D ...
d3 svg path添加文本_D3.js 力导向图的显示优化
D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...

echarts 玫瑰图比例太小显示优化

echarts 玫瑰图比例太小显示优化

1.效果图

2.实现思路

3.代码

echarts 玫瑰图比例太小显示优化相关推荐

最新文章

热门文章