echarts 雷达图

最新推荐文章于 2024-04-03 09:05:56 发布

qq_37302855

最新推荐文章于 2024-04-03 09:05:56 发布

阅读量376

点赞数

本文链接：https://blog.csdn.net/qq_37302855/article/details/86519001

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title>雷达图例子</title>
       <script src="js/echarts-all.js"></script>
   </head>
   <style>
       #lei {
           width: 500px;
           height: 500px;

       }
   </style>

   <body>
       <div id="lei"></div>
       <script>
           var option = {
               color: ["#379EFC", "#3ECDC3"],
               title: {
                   text: '雷达图例子',
                   subtext: '纯属虚构'
               },
               tooltip: {
                   trigger: 'axis',
                   formatter:function(parms){//改变悬浮框内容
                   console.log(parms)

                       var str="";
                       str+="<div style='text-align: center;'>"+parms[0].indicator+"</div>"
                       for(var i=0;i<parms.length;i++){
                           str+="<div>"+parms[i].name+"/"+parms[i].value+"</div>"
                       }
                           return str;
                   }
               },
               legend: {//图例
                   orient: 'vertical',
                   x: 'right',
                   y: 'bottom',
                   data: ['预算分配', '实际开销']
               },
               polar: [{ //雷达指标列表
                   indicator: [{
                           text: '销售',
                           max: 6000
                       },
                       {
                           text: '管理',
                           max: 16000
                       },
                       {
                           text: '信息技术',
                           max: 30000
                       },
                       {
                           text: '客服',
                           max: 38000
                       },
                       {
                           text: '研发',
                           max: 52000
                       },
                       {
                           text: '市场',
                           max: 25000
                       }
                   ]
               }],
               calculable: false,//是否启用拖拽重计算特性
               series: [{           //雷达图里面的数据
                   name: '例子',
                   type: 'radar',
                   data: [{
                           value: [4300, 10000, 28000, 35000, 50000, 19000],
                           name: '预算分配'
                       },
                       {
                           value: [5000, 14000, 28000, 31000, 42000, 21000],
                           name: '实际开销'
                       }
                   ]
               }]
           };
           var myEcharts=echarts.init(document.getElementById("lei"))
           myEcharts.setOption(option)
       </script>
   </body>

</html>

以上就是解决echarts 3.0版本鼠标移动到雷达图的X轴坐标显示不了的方案

以下是实现后的样子

qq_37302855

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts 雷达图

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;雷达图例子&lt;/title&gt; &lt;script src="js/echarts-all.js"&gt;&
复制链接

扫一扫