【每日积累】玫瑰图加雷达图的制作 echarts实现

需求点如下：

具体实现：

对应的数值在formatter里配置，下面是详细代码！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=s, initial-scale=1.0"><title>玫瑰图+雷达图</title><script src="https://lib.baomitu.com/echarts/5.3.0/echarts.js"></script>
</head><body><div id="app" style="width:500px;height:500px"></div><script>let app = echarts.init(document.getElementById('app'));const sourceData = [{name: '小学',value: 129}, {name: '中学',value: 224}, {name: '高中',value: 384}, {name: '大专',value: 420}, {name: '本科',value: 558}, {name: '研究生',value: 238}];// 数据总数const total = sourceData.reduce((num, item) => {num += item.valuereturn num}, 0)// 间隔距离const inSplitWidth = 3;// 为了实现内环间隔距离，需要额外插入的数值。200 只是个系数，值越大，单位间隔的距离越小。const inSplitValue = Math.floor(total / (200 / inSplitWidth));const SplitWidth = inSplitWidth;const SplitValue = Math.floor(total / (200 / SplitWidth));// 内环数据的总数const valueTotal = total + inSplitValue * sourceData.length;function getTextAngle(currentAngle, angle) {currentAngle = currentAngle + angleconsole.log('currentAngle', currentAngle)if (currentAngle <= 90) {return -currentAngle;} else if (currentAngle <= 180 && currentAngle > 90) {return 180 - currentAngle;} else if (currentAngle < 270 && currentAngle > 180) {return 180 - currentAngle;} else if (currentAngle < 360 && currentAngle >= 270) {return 360 - currentAngle;}}// 在原数据的后面添加间隔数据const valueData = sourceData.reduce((arr, item) => {const currentTotal = arr.reduce((total, item) => {total += item.valuereturn total}, 0)const currentAngle = 360 * (currentTotal / valueTotal)const angle = 360 * (item.value / valueTotal) / 2console.log('current  angle', currentAngle)arr.push({name: item.name,value: item.value,itemStyle: {},label: {lineHeight: 80,rotate: getTextAngle(currentAngle, angle)}}, {name: '',value: inSplitValue,// itemStyle: {//     color: 'transparent',//     opacity: 0// },label: {show: false},labelLine: {show: false}})return arr}, [])// 指定图表的配置项和数据var option = {title: {text: '玫瑰雷达图'},legend: {show: false,top: 'bottom'},radar: [{indicator: [{text: ''}, {text: ''}, {text: ''}, {text: ''}, {text: ''}],center: ['50%', '50%'],radius: '65%',startAngle: 90,splitNumber: 10,shape: 'circle',name: {formatter: '',textStyle: {color: '#72ACD1'}},splitArea: {areaStyle: {color: '#ffffff',shadowBlur: 10}},axisLine: {show: false,lineStyle: {color: '#d4d4d4'}},splitLine: {lineStyle: {color: '#d4d4d4'}}},],toolbox: {show: false,},series: [{name: '内环数据展示',radius: ['0%', '58%'],type: 'pie',roseType: 'area',itemStyle: {　 //去除饼图的指示折线labelnormal: {label: {show: true,},labelLine: {show: false,}},},data: valueData}]};// 使用刚指定的配置项和数据显示图表。app.setOption(option);</script>
</body></html>

【每日积累】玫瑰图加雷达图的制作 echarts实现相关推荐

ppt扇形图怎么显示数据_前方高能！多维数据分析的神器雷达图PPT制作教程来啦！...
数据的可视化呈现,是最近几年的一个热门词,尤其是在各种PPT的制作中,观看者越来越希望通过简单直接的方式了解到数据背后的深刻含义,因此,之前我们也专门为大家分享了为什么要在PPT里去做数据的可视化呈现 ...
多维度雷达图怎么做_前方高能！多维数据分析的神器雷达图PPT制作教程来啦！...
数据的可视化呈现,是最近几年的一个热门词,尤其是在各种PPT的制作中,观看者越来越希望通过简单直接的方式了解到数据背后的深刻含义,因此,之前我们也专门为大家分享了什么是雷达图雷达图又被称为蜘蛛网图 ...
php雷达图,如何制作雷达图mac.docx
如何制作雷达图mac 如何制作雷达图mac 导语: 说到雷达图,可能很多办公人士第一反应就是用Excel.Excel拥有强大的制图功能,能很好的满足我们平时处理数据的需求.但是想要在Excel中绘制出 ...
python制作雷达图_python制作雷达图
雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法,雷达图通常用于综合分析多个指标,具有完整,清晰和直观的优点. 下面以实际例子给大家讲解一下雷达图的应用场 ...
雷达图（用ECharts绘制）
目录雷达图可以从多个维度来对比不同数据之间的情况基本实现 ①ECharts最基本的代码结构:引入js文件.DOM容器.初始化对象.配置option ②定义各个维度的最大值,并在option的rad ...
python批量雷达图_python批量制作雷达图
老板要画雷达图,但是数据好多组怎么办?不能一个一个点excel去画吧,那么可以利用python进行批量制作,得到样式如下: 首先制作一个演示的excel,评分为excel随机数生成: 1 =INT(( ...
tableau度量值计算_Tableau可视化（雷达图）：漫威英雄能力值
工作簿在此:Tableau Public: Marvel_SuperHeros 这次主要挑战了一下Tableau制作雷(zhen)达(ma)图(fan)和放射条形图!!! 不过还是硬着头皮死磕到底.. ...
JS Echarts之雷达图 | 使用Excel画雷达图
文章目录第一部分:JS Echarts之雷达图 1. 什么是 Echarts 2. JS Echarts之雷达图 2.1 使用Echarts画雷达图 2.3 echarts雷达图中常用修改修改in ...
ArcGIS API + Echarts 实现动态雷达图
雷达图(Radar Chart),又可称为戴布拉图.蜘蛛网图(Spider Chart),常用语财务报表中,但不限于财务报表.使用雷达图能让使用者能一目了然的了解各项指标的变动情形及其好坏趋向. EC ...

【每日积累】玫瑰图加雷达图的制作 echarts实现

【每日积累】玫瑰图加雷达图的制作 echarts实现相关推荐

最新文章

热门文章