echarts 雷达图 骑猪看日落 2021-07-24 19:32 779阅读 0赞 1、配置数据 (1)配置各个边角极限值 var dataMax=[{name:'名称',max:最大值}] (2)配置展示数据 var radaData=[{name:'数据名称',value:[对应各个边角值]}] 2、配置radar 和series同级配置 radar:{ indicator:dataMax, shape:'polygon', 设置雷达图显示形状,多边形|圆,'circle' }, 3、配置series series:[ { type:'radar', data:radaData, label:{ show:true 显示标签 }, legend:{ show:true }, areaStyle:{} 设置封闭区域阴影面积 } ], 效果图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center] 代码示例: 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); } } [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/5a386c01e49440e39e55f863b2b4f912.png
还没有评论,来说两句吧...