<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雷达图案例</title>
<!-- 引入 ECharts 文件 -->
<script src="lib/echarts.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/jquery.js"></script>
</head>
<body>
<div id="btn">
<button id="previous">Previous</button>
<button id="next">Next</button>
</div>
<!-- 为 ECharts 准备一个具备大小（宽高）的 容器 -->
<div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 1px solid black;"></div>
</body>
</html>
<script type="text/javascript">
// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
var chart1 = echarts.init(document.getElementById("chart1"));
// 指定图表的配置项和数据
var sex=['COL_3542'];
//sexP是从服务期上获取的男还是女
var sexP=Math.floor(Math.random()*2);
console.log(sexP);
var nameList_sy=['COL_3532','COL_3534','COL_3536','COL_3538','COL_3548','COL_3539','COL_3540','COL_3541'];
var nameList=[];//是从服务期上获取的字段得到的值
// for(let i=0;i<nameList_sy.length;i++){
// nameList.push()
// }
// var nameList=[78,108,113,'true','false','true','true','true'];
var women=[];
var men=[];
var per;
var s=[];
var r=[];
var rx=[];
var sWomen=[];
var rWomen=[];
var rxWomen=[];
var centerOffset=[20,50,75];
var t=[];
var tWomen=[];
var name=["年龄","未治疗收缩压","治疗后收缩压","糖尿病","吸烟","心血管疾病","心房纤颤","左心室肥厚"];
var nameArr=name.split(',');
// var colorArr=['#e03134','#eea345','#ffd104', '#43a546'];
var menIndicater=[{name: '年龄', max: 10 , color:'#333'},{name: '未治疗收缩压', max: 10
}, {name: '治疗后收缩压', max: 10}, {name: '糖尿病', max:2}, {name: '吸烟', max: 3}, {name: '心血管疾病', max: 4}, {
name: '心房纤颤', max: 4}, {name: '左心室肥厚', max:5}];
var menIndicaterNone=[{max: 10 , color:'#333'},{ max: 10}, { max: 10}, { max:2}, {max: 3}, { max: 4}, {max: 4}, { max:5}];
var womenIndicaterNone=[{max: 10 , color:'#333'},{ max: 10}, { max: 10}, { max:3}, { max: 3}, { max: 2}, {max: 6}, { max: 4}];
var womenIndicater=[{name: '年龄', max: 10 , color:'#333'},{name: '未治疗收缩压', max: 10
}, {name: '治疗后收缩压', max: 10}, {name: '糖尿病', max:3}, {name: '吸烟', max: 3}, {name: '心血管疾病', max: 2}, {
name: '心房纤颤', max: 6}, {name: '左心室肥厚', max: 4}];
function sum(arr) {
var k=0;
for(let i=0;i<arr.length;i++){
k=k+arr[i];
}
return k
}
function menPercent(sum) {
var score=[];
var percent=[3,3,4,4,5,5,6,7,8,10,11,13,15,17,20,22,26,29,33,37,42,47,52,57,63,68,74,79,84,88];
for(let i=1;i<=30;i++){
score.push(i);
}
for(let i=0;i<score.length;i++){
if(sum==score[i]){
per=percent[i];
}
}
if(sum>30){
per=100;
}
return per;
}
function womenPercent(sum) {
var score=[];
var percent=[1,1,2,2,2,3,4,4,5,6,8,9,11,13,16,19,23,27,32,37,43,50,57,64,71,78,84];
for(let i=1;i<=27;i++){
score.push(i);
}
for(let i=0;i<score.length;i++){
if(sum==score[i]){
per=percent[i]
}
}
if(sum>27){
per=100;
}
return per;
}
function tooltipColorChoose(womensP,nameArr,res,nameList_sy,i) {
for(let j=0;j<nameList_sy.length;j++){
if(parseFloat(womensP[i][j])<=parseFloat("10%") && parseFloat(womensP[i][j])>=parseFloat("0%")){
res = res+'<div style="background-color:#43a546;line-height:20px;height: 20px;margin:5px 0px;">'+nameArr[j]+'：'+womensP[i][j]+'</div>';
}else if(parseFloat(womensP[i][j])>parseFloat("10%") && parseFloat(womensP[i][j])<=parseFloat("18%")){
res = res+'<div style="background-color:#ffd104;line-height:20px;height: 20px;margin:5px 0px;">'+nameArr[j]+'：'+womensP[i][j]+'</div>';
}else if(parseFloat(womensP[i][j])>parseFloat("18%") && parseFloat(womensP[i][j])<=parseFloat("25%")){
res = res+'<div style="background-color:#eea345;line-height:20px;height: 20px;margin:5px 0px;">'+nameArr[j]+'：'+womensP[i][j]+'</div>';
}else{
res = res+'<div style="background-color:#e03134;line-height:20px;height: 20px;margin:5px 0px;">'+nameArr[j]+'：'+womensP[i][j]+'</div>';
}
}
return res;
}
Date.prototype.format = function (format) {
var args = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds()
};
if (/(y+)/.test(format))
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var i in args) {
var n = args[i];
if (new RegExp("(" + i + ")").test(format))
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? n : ("00" + n).substr(("" + n).length));
}
return format;
};
function timestampToTime(timestamp) {
var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
Y = date.getFullYear() + '-';
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
D = date.getDate() + ' ';
return Y+M+D;
}
var mens=[];
var mensSum=[];
var mensPer=[];
var womens=[];
var womensSum=[];
var womensPer=[];
var time;
var menIndicaters;
var womenIndicaters;
var menP=[];
var mensP=[];
var womenP=[];
var womensP=[];
var date=new Date();
var dates=[date.format("yyyy-MM-dd")];
function randomDate(date) {
var num=Math.floor(Math.random()*10+1);
for(let i=1;i<num;i++){
var d=timestampToTime((date.getTime()-2592000000*i)/1000);
dates.push(d);
}
return dates.reverse();
}
var times=randomDate(date);
console.log(times);
var time_=times.length;
var pageSum=Math.ceil(parseFloat((time_-1)/2));
time=3;
var btn_index=1;
var times_new=[];
var tit;
if(time_<4){
$('#next').addClass('disabled');
$('#previous').addClass('disabled');
time=time_;
tit=[{text:times[0],left:"20%"},{text:times[1],left:"50%"},{text:times[2],left:"70%"}];
for(let j=0;j<time;j++){
men=[];
women=[];
menP=[];
womenP=[];
for(let i=0;i<nameList_sy.length;i++){
if(i<3){
men.push(Math.floor(Math.random()*11));
}else if(i==3){
var k3=Math.floor(Math.random()*3);
if(k3>=1){k3=2;}
men.push(k3);
}else if(i==4){
var k4=Math.floor(Math.random()*4);
if(k4>1){k4=3;}else{k4=0;}
men.push(k4);
}else if(i==5){
var k5=Math.floor(Math.random()*5);
if(k5<=2){k5=0;}else{k6=4;}
men.push(k5);
}else if(i==6){
var k6=Math.floor(Math.random()*5);
if(k6<=2){k6=0;}else{k6=4;}
men.push(k6);
}else{
var k7=Math.floor(Math.random()*6);
if(k7<=3){k7=0;}elsecharts雷达图 不带翻页功能的 有颜色判断的
最新推荐文章于 2024-02-20 10:46:58 发布
本文介绍如何在Echarts中创建不带翻页功能的雷达图，并实现根据数据值进行颜色判断的功能，帮助读者理解如何自定义Echarts图表的颜色表现。
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
