echarts雷达图多条数据切换只展示一条数据

适合手机观看

​

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>·门·店·考·核·</title>
<html style="height: 100%;width: 100%;">
   <head>
       <meta charset="utf-8">
   </head>
   <style type="text/css">
    #top{
    background-color: #080135;
    width: 100%;
    color: white;
    font-size: 4em;
    font-weight: bold;
    margin: 0 auto;
    }
    #font{
    color:#ffff00;
    font-size: 100;
    margin-left:20%;
    }
    #tag{
    padding: 50px 50px 0 50px;
    }
    button{
    padding:5px 8px 10px 8px;
    background-color: #e32119;
    border: 2px solid #ffff00;
    border-radius:5px;
    font-size: 2.2em;
    color: white;
    margin: 0.5%;
    letter-spacing:2px;
    }
    .info-pho{
    display: block;
    position: absolute;
    width: 300px;
    height: 300px;
    overflow: hidden;
    }
    #table{
    width: 90%;
    margin-left: 5%;
    }
    #table1{
    width: 90%;
    margin-left: 5%;
    margin-bottom: 20px;
    }
    #table td{
    text-align: center;
    background-color: #13227a;
    }
    #table1 td{
    text-align: center;
    background-color: #1aaba8;
    }
    body{
    background: url("http://r.photo.store.qq.com/psb?/V129ilfv3emliO/RVjgkg6JvYTBw8WDY*Y3pXaZwc3NU.GAbXTOIISe1ho!/r/dL8AAAAAAAAA");
    background-attachment: fixed;
    }
</style>
<!--     <script type="text/javascript" src="http://echarts.baidu.com/build/dist/echarts.js"></script> -->
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
   <body style="height: 80%; margin: 0">
        <div id="top" align="center">·门·店·考·核·</div>
        <hr>
        <div>
            <p id="tag">
                <label style="font-size: 4em;color: white;">一鸣居(长泰广场店)一鸣居(长泰广场店)</label></br>
                <span>
                    <button>精品</button>
                    <button>忠诚度很高</button>
                    <button>精品</button>    
                    <button>精品</button>
                </span>
            </p>
        </div>
         <div>
            <img style="filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;width:40px;margin:20px 0 0 5%;padding-top: 10px;" 
            src="http://r.photo.store.qq.com/psb?/V129ilfv3emliO/xt1M8NZ949Ww.tDu7kHjA9J2gZ2or6o3rd.tJqSJIYE!/r/dLgAAAAAAAAA"/>
            <font style="font-size: 3em;color: #1296db;font-weight: bold">本月门店考核</font>
        </div>
       <div id="table1">
              <table style="width: 100%;">
                  <tr style="width: 50%;height: 400px;padding: 20px auto;">
                      <td style="padding: 20px auto;">
                          <div>
                              <img style="width: 30%;" src="http://r.photo.store.qq.com/psb?/V129ilfv3emliO/Y46b6ryJHNdRj7cPsrm6YDxTzA*iW5oyIqZon22wBD4!/r/dMMAAAAAAAAA"/>
                          </div>
                          <div style="font-size: 4em;color: white;font-family: '微软雅黑'">评级等级
                          </div>
                      </td>
<!--                        style="background-color: rgb(0,0,0,0);"设置无背景颜色 -->
                      <td>
                          <div >
                              <img src="http://r.photo.store.qq.com/psb?/V129ilfv3emliO/C5djqX1N4cN3MlVMFMk4BZXBdHW2eNnr1et5qLc5tEM!/r/dL8AAAAAAAAA"/>
                          </div>
                      </td>
                  </tr>
              </table>
       </div>
        <hr>
       <div>
            <img style="filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;width:40px;margin:20px 0 0 5%;padding-top: 10px;" 
            src="http://r.photo.store.qq.com/psb?/V129ilfv3emliO/T9Beyx*DOwFV3UTdNxOAL2CgiZvdTQ2vcT3Y2HLIJEU!/r/dL8AAAAAAAAA"/>
            <font style="font-size: 3em;color: #1296db;font-weight: bold">本月门店综合数据</font>
        </div>
       <div id="table">
              <table style="width: 100%;">
                  <tr>
                      <td style="width: 50%;height: 300px;padding: 20px auto;">
                          <div>
                              <img style="width: 150px;" src="http://r.photo.store.qq.com/psb?/V129ilfv3emliO/EB7ns5WkWe*Pspjs4cKQFeOvQKAHFB83G71R6*kaPqE!/r/dFMBAAAAAAAA"/>
                          </div>
                          <div style="font-size: 2em;color: white;font-family: '微软雅黑'">全国综合排名:
                              <font style="color: #08fe14;font-family: '黑体';font-weight: bolder;font-size: 2em;font-style:italic">2</font>
                          </div>
                      </td>
                      <td style="width: 50%;height: 300px;padding: 20px auto;">
                          <div>
                              <img style="width: 150px;" src="http://r.photo.store.qq.com/psb?/V129ilfv3emliO/s8925jWKuhYPBYb4nGCi7nuh8CxMXzU.5q.nVCxXnbY!/r/dE8BAAAAAAAA"/>
                          </div>
                          <div style="font-size: 2em;color: #1296db;font-family: '微软雅黑'">同比上月:
                              <i style="color: red">&#8595;<font style="font-family: '黑体';font-weight: bolder;font-size: 2em;font-style:italic">1</font></i>
                          </div>
                      </td>
                  </tr>
                  <tr>
                      <td style="width: 50%;height: 300px;padding: 20px auto;">
                          <div>
                              <img style="width: 150px;" src="http://r.photo.store.qq.com/psb?/V129ilfv3emliO/EB7ns5WkWe*Pspjs4cKQFeOvQKAHFB83G71R6*kaPqE!/r/dFMBAAAAAAAA"/>
                          </div>
                          <div style="font-size: 2em;color: white;font-family: '微软雅黑'">同城综合排名:
                              <font style="color: #08fe14;font-family: '黑体';font-weight: bolder;font-size: 2em;font-style:italic">1</font>
                          </div>
                      </td>
                      <td style="width: 50%;height: 300px;padding: 20px auto;">
                          <div>
                              <img style="width: 150px;" src="http://r.photo.store.qq.com/psb?/V129ilfv3emliO/s8925jWKuhYPBYb4nGCi7nuh8CxMXzU.5q.nVCxXnbY!/r/dE8BAAAAAAAA"/>
                          </div>
                          <div style="font-size: 2em;color: #1296db;font-family: '微软雅黑'">同比上月:
                              <i style="color: #08fe14"><font style="font-family: '黑体';font-weight: bolder;font-size: 2em;font-style:italic">0</font></i>
                          </div>
                      </td>
                  </tr>
              </table>
       </div>
        <div>
            <img style="filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;width:40px;margin:20px 0 0 5%;padding-top: 10px;" 
            src="http://r.photo.store.qq.com/psb?/V129ilfv3emliO/6Iw4pW6PNSwKofB4zkf2eeKP95GN6ZZASsbocMLrUG4!/r/dMMAAAAAAAAA"/>
            <font style="font-size: 3em;color: #1296db;font-weight: bold">本月雷达图展示</font>
        </div>
       <div id="container" style="height: 100%"></div>      
       <script type="text/javascript">
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            option= null;
            option = {
                legend: {
                    x : 'center',
                    y : 100,
                    padding: 10,                  // 图例内边距，单位px，默认各方向内边距为5，
                    itemGap: 30,//各个item之间的间隔，单位px，默认为10
                    itemWidth: 50,             // 图例图形宽度
                    itemHeight: 40,            // 图例图形高度
                    selectedMode: "single",//控制data只显示一条数据
                    data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
                    textStyle: {
                        color: '#fa5c06',          // 图例文字颜色
                        fontSize:45
                    },
                    
                },
                color:['#fa5c06'],
                radar: {
                    //shape: 'circle',//这是设置成圆形
                    name: {//设置字段背景颜色
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#17dacf',
                            borderRadius: 10,
                       }
                    },
                    axisLine: {//坐标轴线相关设置
                        show: true,
                        lineStyle: {
                            color: 'block'
                        }
                    },
                    splitLine : {
                        show : true,
                        lineStyle : {
                            width : 1,
                            color : 'block' // 图表背景网格线的颜色
                        }
                    },
                    
                    indicator: [
                       { name: '考核指标', max: 6},
                       { name: '门店资质', max: 6},
                       { name: '客群属性', max: 6},
                       { name: '交易质量', max: 6},
                       { name: '活动管控', max: 6},
                       { name: '风险评估', max: 6}
                    ],
                    
                },
                series: [{
                    type: 'radar',
                    areaStyle: {//区域填充样式
                        emphasis: {
                                opacity: 0.3,
                        },
                    },
                    data:[
                        {value :[5, 6, 4, 5, 6, 5],name : "1月"},
                        {value :[6, 5, 6, 5, 6, 5],name : "2月"},
                        {value :[4, 6, 5, 6, 5, 6],name : "3月"},
                        {value :[6, 6, 4, 5, 6, 5],name : "4月"},
                        {value :[5, 6, 6, 5, 6, 5],name : "5月"},    
                        {value :[5, 6, 4, 5, 6, 5],name : "6月"},
                        {value :[6, 5, 6, 5, 6, 5],name : "7月"},
                        {value :[4, 6, 5, 6, 5, 6],name : "8月"},
                        {value :[6, 6, 4, 5, 6, 5],name : "9月"},
                        {value :[5, 6, 6, 5, 6, 5],name : "10月"},
                        {value :[5, 6, 4, 5, 6, 5],name : "11月"},
                        {value :[6, 5, 6, 5, 6, 5],name : "12月"},
                    ]
                }]
            };;
            var arr = option.series[0].data[0].value;
            myChart.setOption(option);
            update();
            myChart.on('legendselectchanged', function (params) {//这里是点击切换雷达图边缘的数值
                   var key = params.name;
                   var map =option.series[0].data;
                   var length = map.length;
                   for(var j=0;j<length;j++){
                       console.log(map[j].name);
                       if(key==map[j].name){
                           arr=map[j].value;
                       }
                   }
            update();
          });
            function update(){
                var i = -1;
                myChart.setOption({
                      radar: [
                        {
                            name: {
                                rich: {
                                    a: {
                                        color: 'red',//节点名称显示
                                        lineHeight: 20,
                                        fontSize:25,
                                    },
                                    b: {//节点值数值部分
                                        color: '#fa5c06',
                                        fontSize:40,
                                        align: 'center',
                                        //backgroundColor: 'red',
                                        padding: 6,
                                        borderRadius: 2
                                    }
                                },
                                formatter: (a,b)=>{//节点数值转换成等级
                                    i++;
                                    var list = option.series[0].data;
                                    var length=list.length;
                                    if(arr[i]=='1'){
                                        arr[i]='F';
                                    }else if(arr[i]=='2'){
                                        arr[i]='E';
                                    }else if(arr[i]=='3'){
                                        arr[i]='D';
                                    }else if(arr[i]=='4'){
                                        arr[i]='C';
                                    }else if(arr[i]=='5'){
                                        arr[i]='B';
                                    }else if(arr[i]=='6'){
                                        arr[i]='A';
                                    }
                                    return `{a|${a}}{b|${arr[i]}}`
                                }
                            }
                        }
                    ]
                });
            }
       </script>
   </body>
   
</html>

​