需要实现的效果：

官网里面的demo显示数值，都是在拐点处：

【解决】

1、只显示类目

  1. 　　　　　<div id="mychart" style="width:300px;height:300px;margin:0 auto;"></div>
  2.         <script>
  3.             var arr1 = [60,73,85,40,60];
  4.             var arr2 = [23,90,23,32,67];
  5.             var mychart =  echarts.init(document.getElementById('mychart'));
  6.             var option = {
  7.                 radar: [
  8.                     {
  9.                         indicator: [
  10.                             {text: '品牌', max: 100},
  11.                             {text: '内容', max: 100},
  12.                             {text: '可用性', max: 100},
  13.                             {text: '功能', max: 100},
  14.                             {text: '屏幕', max: 100}
  15.                         ],
  16.                         center: ['50%','54%'],//调整雷达图的位置
  17.                         radius: 80,//半径，可放大放小雷达图
  18.                         axisLine: {//坐标轴线相关设置
  19.                             show: true,
  20.                             lineStyle: {
  21.                                 color: 'red'
  22.                             }
  23.                         },
  24.                         splitLine : {
  25.                             show : true,
  26.                             lineStyle : {
  27.                                 width : 1,
  28.                                 color : 'red' // 图表背景网格线的颜色
  29.                             }
  30.                         },
  31.                         splitArea: {
  32.                             show: false,
  33.                         },
  34.                         name: {
  35.                             rich: {
  36.                                 a: {
  37.                                     color: 'red',
  38.                                     lineHeight:
  39.                                 },
  40.                             },
  41.                             formatter: (a)=>{
  42.                                 return `{a|${a}}`
  43.                             }
  44.                         }
  45.                     },
  46.                 ],
  47.                 series: [
  48.                     {
  49.                         type: 'radar',
  50.                         symbol: 'none',//去掉拐点的圈
  51.                         data: [
  52.                             {
  53.                                 value: arr1,
  54.                                 name: '某软件',
  55.                                 areaStyle: {
  56.                                     normal: {
  57.                                         color: 'blue'
  58.                                     }
  59.                                 },
  60.                                 lineStyle: {
  61.                                     color:"rgba(255,255,255,0)"
  62.                                 },
  63.                             },{
  64.                                 value: arr2,
  65.                                 name:'jja',
  66.                                 areaStyle: {
  67.                                     normal: {
  68.                                         color: 'red' // 图表中各个图区域的颜色
  69.                                     }
  70.                                 },
  71.                                 lineStyle: {
  72.                                     color:"rgba(255,255,255,0)" // 图表中各个图区域的边框线颜色
  73.                                 },
  74.                             }
  75.                         ]
  76.                     },
  77.                 ]
  78.             };
  79.             mychart.setOption(option);
  80.         </script>

实现效果：

2、实现最简单的数值在类目下

  1. <div id="mychart" style="width:300px;height:300px;margin:0 auto;"></div>
  2.         <script>
  3.             var arr1 = [60,73,85,40,60];
  4.             var arr2 = [23,90,23,32,67];
  5.             var mychart =  echarts.init(document.getElementById('mychart'));
  6.             var option = {
  7.                 radar: [
  8.                     {
  9.                         indicator: [
  10.                             {text: '品牌', max: 100},
  11.                             {text: '内容', max: 100},
  12.                             {text: '可用性', max: 100},
  13.                             {text: '功能', max: 100},
  14.                             {text: '屏幕', max: 100}
  15.                         ],
  16.                         center: ['50%','54%'],//调整雷达图的位置
  17.                         radius: 80,//半径，可放大放小雷达图
  18.                         axisLine: {//坐标轴线相关设置
  19.                             show: true,
  20.                             lineStyle: {
  21.                                 color: 'red'
  22.                             }
  23.                         },
  24.                         splitLine : {
  25.                             show : true,
  26.                             lineStyle : {
  27.                                 width : 1,
  28.                                 color : 'red' // 图表背景网格线的颜色
  29.                             }
  30.                         },
  31.                         splitArea: {
  32.                             show: false,
  33.                         },
  34.                         name: {
  35.                             rich: {
  36.                                 a: {
  37.                                     color: 'red',
  38.                                     lineHeight:
  39.                                 },
  40.                                 b: {
  41.                                     color: '#fff',
  42.                                     align: 'center',
  43.                                     backgroundColor: '#666',
  44.                                     padding: ,
  45.                                     borderRadius:
  46.                                 }
  47.                             },
  48.                             formatter: (a,b)=>{
  49.                                 return `{a|${a}}\n{b|}`
  50.                             }
  51.                         }
  52.                     },
  53.                 ],
  54.                 series: [
  55.                     {
  56.                         type: 'radar',
  57.                         symbol: 'none',//去掉拐点的圈
  58.                         data: [
  59.                             {
  60.                                 value: arr1,
  61.                                 name: '某软件',
  62.                                 areaStyle: {
  63.                                     normal: {
  64.                                         color: 'blue'
  65.                                     }
  66.                                 },
  67.                                 lineStyle: {
  68.                                     color:"rgba(255,255,255,0)"
  69.                                 },
  70.                             },{
  71.                                 value: arr2,
  72.                                 name:'jja',
  73.                                 areaStyle: {
  74.                                     normal: {
  75.                                         color: 'red' // 图表中各个图区域的颜色
  76.                                     }
  77.                                 },
  78.                                 lineStyle: {
  79.                                     color:"rgba(255,255,255,0)" // 图表中各个图区域的边框线颜色
  80.                                 },
  81.                             }
  82.                         ]
  83.                     },
  84.                 ]
  85.             };
  86.             mychart.setOption(option);
  87.         </script>

3、实现最终效果

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6.         <title></title>
  7.         <script src="js/jquery.min.js"></script>
  8.         <script src="js/echarts.js"></script>
  9.     </head>
  10.     <body>
  11.         <div id="mychart" style="width:300px;height:300px;margin:0 auto;"></div>
  12.         <script>
  13.             var arr1 = [,,,,];
  14.             var arr2 = [,,,,];
  15.             var mychart =  echarts.init(document.getElementById('mychart'));
  16.             var option = {
  17.                 radar: [
  18.                     {
  19.                         indicator: [
  20.                             {text: '品牌', max: 100},
  21.                             {text: '内容', max: 100},
  22.                             {text: '可用性', max: 100},
  23.                             {text: '功能', max: 100},
  24.                             {text: '屏幕', max: 100}
  25.                         ],
  26.                         center: ['50%','54%'],//调整雷达图的位置
  27.                         radius: 80,//半径，可放大放小雷达图
  28.                         axisLine: {//坐标轴线相关设置
  29.                             show: true,
  30.                             lineStyle: {
  31.                                 color: 'red'
  32.                             }
  33.                         },
  34.                         splitLine : {
  35.                             show : true,
  36.                             lineStyle : {
  37.                                 width : 1,
  38.                                 color : 'red' // 图表背景网格线的颜色
  39.                             }
  40.                         },
  41.                         splitArea: {
  42.                             show: false,
  43.                         },
  44.                     },
  45.                 ],
  46.                 series: [
  47.                     {
  48.                         type: 'radar',
  49.                         symbol: 'none',//去掉拐点的圈
  50.                         data: [
  51.                             {
  52.                                 value: arr1,
  53.                                 name: '某软件',
  54.                                 areaStyle: {
  55.                                     normal: {
  56.                                         color: 'blue'
  57.                                     }
  58.                                 },
  59.                                 lineStyle: {
  60.                                     color:"rgba(255,255,255,0)"
  61.                                 },
  62.                             },{
  63.                                 value: arr2,
  64.                                 name:'jja',
  65.                                 areaStyle: {
  66.                                     normal: {
  67.                                         color: 'red' // 图表中各个图区域的颜色
  68.                                     }
  69.                                 },
  70.                                 lineStyle: {
  71.                                     color:"rgba(255,255,255,0)" // 图表中各个图区域的边框线颜色
  72.                                 },
  73.                             }
  74.                         ]
  75.                     },
  76.                 ]
  77.             };
  78.             mychart.setOption(option);
  79.             var i = -1;
  80.             mychart.setOption({
  81.                   radar: [
  82.                     {
  83.                         name: {
  84.                             rich: {
  85.                                 a: {
  86.                                     color: 'red',
  87.                                     lineHeight:
  88.                                 },
  89.                                 b: {
  90.                                     color: '#fff',
  91.                                     align: 'center',
  92.                                     backgroundColor: '#666',
  93.                                     padding: ,
  94.                                     borderRadius:
  95.                                 }
  96.                             },
  97.                             formatter: (a,b)=>{
  98.                                 i++;
  99.                                 return `{a|${a}}\n{b|${arr1[i]}}`
  100.                             }
  101.                         }
  102.                     }
  103.                 ]
  104.             })
  105.         </script>
  106.     </body>
  107. </html>

效果：

ECharts 雷达图怎么在类目值下面显示数值的更多相关文章

  1. echarts雷达图

    用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  2. echarts 雷达图的个性化设置

    echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...

  3. echarts雷达图点击事件

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...

  4. echarts雷达图点击事件 包含（2.x，3.85，4.02）测试

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...

  5. ECharts雷达图详细配置说明

    雷达图表配置说明: // 指定图表的配置项和数据 var option = { backgroundColor: 'rgba(204,204,204,0.7 )', // 背景色,默认无背景 rgba ...

  6. Java生鲜电商平台-生鲜电商中商品类目、属性、品牌、单位架构设计与实战

    Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战 说明:Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战经验分享 凡是涉及到购物,必然是建立在商品的基础 ...

  7. Echarts数据可视化series-radar雷达图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  8. 关于echarts生成雷达图的一些参数介绍

    export const industryFactorOption = { title: { text: '雷达图', textStyle: { color: 'rgba(221,221,221,1) ...

  9. 解决echarts的叠堆折线图数据出现坐标和值对不上的问题

    原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...

随机推荐

  1. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

  2. 2.Border Layout 自定义一个Layout来完成布局。

    目标: 1.添加控件的函数 void QLayout::addWidget ( QWidget * w ) 在这个例子里面我们重载这个函数 void addWidget ( QWidget * w, ...

  3. You-need-to-know-css

    半透明边框 背景知识: background-clip <div class="main"> <input id="pb" type=&quo ...

  4. servlet模板

    package ${enclosing_package};import java.io.IOException;import javax.servlet.ServletException;import ...

  5. Python基础入门-实现计算器多种姿势

    在Python中,虽然定义一个函数只需要def关键字,但是他能实现多种功能和用途,比如今天我们讲解的这几种方式.如何使用函数实现一个计算器的功能呢?当然,实现计算器的方式有很多种,我们举几个比较典型的 ...

  6. datetime 2017-10-21 10:09:02.560 转年月日的时间类型

    sql语句时间转年月日格式: 适用于多种时间格式 select  REPLACE(STUFF(CONVERT(char(10), REPLACE(CONVERT(varchar(10),'2017-1 ...

  7. （转）菜鸟去重复之Sql

    原文地址:http://www.cnblogs.com/fatbird/p/Sql-Remove-duplicate.html 前言 本文主要是总结平时工作学习中遇到的使用Sql Server的去除重 ...

  8. C# 可变参数

    class Program { static void Main(string[] args) { //常规使用方法 Console.WriteLine(Add(, , , , , , , , })) ...

  9. Go语言最佳实践——面向对象

    对于接口,应使用组合而非继承的方式扩展: 对于结构体,应定义独立的结构体,而非用嵌套模拟继承. 值接收者和指针接收者: 1.对于不可变类型创建只接受值接收者的方法,而为可变的类型创建接受指针接收者的方 ...

  10. xp 专业版组策略只有系统组件

    想要不显示任务栏的提示消息,需要在组策略里面设置,(在"开始→运行"中输入"GPEDIT.MSC"打开组策略,然后依次选择"用户配置→管理模板→任务栏 ...