适合手机观看
<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">↓<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>
