echarts 雷达图

1、配置数据(1)配置各个边角极限值var dataMax=[{name:'名称',max:最大值, color:'标签颜色'}](2)配置展示数据var radaData=[{name:'数据名称',value:[对应各个边角值]}]2、配置radar坐标系和series同级配置radar:{indicator:dataMax,shape:'polygon',   设置雷达图显示形状,多边形|圆,'circle'center:[n,m],      配置位置},3、配置seriesseries:[{type:'radar',data:radaData,symbol:'circle', 设置与各个方向的轴线相交的标记点symbolSize,radarIndex:n,label:{  show:true  显示标签},legend:{show:true},areaStyle:{}  设置封闭区域阴影面积}],

效果图:

代码示例:

export default {name: 'App',mounted:async function(){var myMap=echarts.init(document.querySelector('.map'));var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']var yData1=[88,92,63,77,94,80,72,86];var yData2=[80,90,60,70,90,70,62,76];var pieData=[{name:'淘宝',value:'11231'},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]var radaData=[{name: '华为手机1',value: [80, 90, 80, 82, 90]},{name: '中兴手机1',value: [70, 82, 75, 70, 78]}]var dataMax = [{name: '易用性',max: 100},{name: '功能',max: 100},{name: '拍照',max: 100},{name: '跑分',max: 100},{name: '续航',max: 100}]var option = {radar:{indicator:dataMax,shape:'polygon',   //设置雷达图显示形状,多边形|圆,'circle'},series:[{type:'radar',data:radaData,label:{  show:true  //显示变钱},legend:{show:true},areaStyle:{}  //设置封闭区域阴影面积}],};myMap.setOption(option);}
}

echarts 雷达图相关推荐

在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
echarts雷达图详细参数配置说明
应项目需求需要实现以下效果(当然也是最终的实现): 接下来主要关于下面的几个参数进行设置雷达图的圈数雷达图支持绘制的类型:圆形和多角形雷达图在容器中的位置:center决定也就是雷达图中心在容器 ...
echarts 雷达图一些自我总结
最近在使用echarts雷达图的时候有一些新得想分享一下,话不多说直接看代码 var option={//title: { text:null }, // 隐藏图表标题legend: {show: t ...
echarts 雷达图_如何把Echarts用成在线数据可视化工具
今天虎哥给大家介绍个新工具,用于数据可视化,它是一个开源的插件,由JavaScript编写并实现的.可以流畅的运行在PC端和移动端,兼容绝大部分浏览器.Echarts具有强大的交互性,官网: http ...
ECharts 雷达图在类目值下面显示数值
需要实现的效果: 官网里面的demo显示数值,都是在拐点处: [解决] 1.只显示类目 <div id="mychart" style="width:300px;h ...
echarts 雷达图_【带着canvas去流浪】绘制雷达图
使用原生canvasAPI绘制雷达图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示雷达图绘制的看起来并不复杂,无非就是一些路径点的连线,其中的难点都在于一些细 ...
设置echarts雷达图label标签出现的位置聚拢或发散
目标效果: 用echarts画出雷达图后出现这样的情况在官网上label标签的 position属性只支持:top / left / right / bottom / inside / inside ...
微信小程序使用echarts雷达图遇到的坑
最近一个医院的小程序需要使用雷达图来展示,简单总结一下. 1:使用场景:在详情页,根据测试的题目得分画成雷达图,测试的题目会得到2种结果,高危和低危.一种雷达图,但是样式不一样.如果是标题文字颜色不用 ...
echarts雷达图样式配置
雷达图背景颜色雷达图网格颜色 indicator文字颜色数据区域边框颜色雷达图内部射线颜色雷达图的圈数雷达图每圈具体数值的显示具体数值拐点样式 function getRadarChart ...

echarts 雷达图

echarts 雷达图相关推荐

最新文章

热门文章