使用ECharts实现HTML页面中的多表联动雷达图示例
目录
1.效果图
2.代码
1.效果图
解析：用到了多表联动与html的图插入，图用的是float 浮动效果
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
<style>
.container {
display: flex;
}
.chart {
margin: 0px;
}
.a1{
background-color: pink;
}
.a2{
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="a1" style="width: 100%;height: 960px;">
<div class="a2" style="width: 400px;height: 300px;">
<img src="image卡比兽.jpg" >
</div>
<div class="container">
<div id="my1" class="chart" style="width: 400px;height: 300px;"></div>
<div id="my2" class="chart" style="width: 400px;height: 300px;"></div>
</div>
</div>
<script type="text/javascript">
var myChar1=echarts.init(document.getElementById("my1"));
var myChar2=echarts.init(document.getElementById("my2"));
var option1={
backgroundColor:'rgba(204,204,204,0.7)',
title: {
text: '外观',
top: '10',
textStyle: {
color: 'pink',
fontSize: 50,
},
},
tooltip: { toolip: { show: true }, },
radar:[
{
center:['60%','56%'],
radius:120,
startAngle:90,
name:{
formatter:'{value}',
textStyle:{
fontSize:15,
color:'#000'
}
},
nameGap:2,
splitNumber:4,
axisLine:{
lineStyle:{
color:'#fff',
width:1,
type:'solid',
}
},
splitLine:{
lineStyle:{
color:'#fff',
width:1,
}
},
splitArea:{
show:true,
areaStyle:{
color:['#abc','#abc','#abc','#abc',]
}
},
indicator:[
{
name:'帅气',
max:100,
color:'green',
}, {
name:'美丽',
max:100,
color:'orange'
}, {
name:'可爱',
max:100,
color:'purple'
}, {
name:'聪明',
max:100,
color:'blue'
},{
name:'强壮',
max:100,
color:'yellow'
}
]
}
],
series:[
{
name:'外观',
type:'radar',
data:[{
value:[70,10,60,40,80],
symbolSize:5,
itemStyle:{
normal:{
borderColor:'blue',
borderWidth:3
}
},
lineStyle:{
normal:{
color:'red',
width:1,
opacity:0.9
}
},
},]
}
]
};
var option2={
backgroundColor:'rgba(204,204,204,0.7)',
title: {
text: '种族值',
top: '10',
textStyle: {
color: 'pink',
fontSize: 50,
},
},
tooltip: { toolip: { show: true }, },
radar:[
{
center:['60%','56%'],
radius:120,
startAngle:90,
name:{
formatter:'{value}',
textStyle:{
fontSize:15,
color:'#000'
}
},
nameGap:2,
splitNumber:4,
axisLine:{
lineStyle:{
color:'#fff',
width:1,
type:'solid',
}
},
splitLine:{
lineStyle:{
color:'#fff',
width:1,
}
},
splitArea:{
show:true,
areaStyle:{
color:['#abc','#abc','#abc','#abc',]
}
},
indicator:[
{
name:'HP',
max:200,
color:'green',
}, {
name:'攻击',
max:200,
color:'orange'
}, {
name:'防御',
max:200,
color:'purple'
}, {
name:'特攻',
max:200,
color:'blue'
},{
name:'特防',
max:200,
color:'yellow'
},{
name:'速度',
max:200,
color:'pink'
}
]
}
],
series:[
{
name:'种族值',
type:'radar',
data:[{
value:[160,110,65,65,110,30],
symbolSize:5,
itemStyle:{
normal:{
borderColor:'blue',
borderWidth:3
}
},
lineStyle:{
normal:{
color:'red',
width:1,
opacity:0.9
}
},
},]
}
]
};
myChar1.setOption(option1)
myChar2.setOption(option2)
echarts.connect([myChar2,myChar1]);
</script>
</body>
</html>
相关知识
使用HTML制作静态宠物网站——蓝色版爱宠之家(HTML+CSS)
java宠物机器人的单词库被病毒感染了，第一种感染方式是括号内的内容没有被破坏，但是括号外面加入了一些奇怪数字， 例如“(Mary)”变成了“253(Mary)5”；
宠物怎么可以起英文名不报错
HTML宠物网站设计：萌宠有家
学院类简单html页面资源
夜市萌宠交友派对简单介绍
数据库做一个宠物的表，要有编号，宠物名字，品种，年龄，性别，体重，主人名字要代码
HTML期末大作业~ 蓝色版爱宠之家(5个页面)带留言板宠物 学生网页设计作业源码(HTML+CSS+JS)
HTML做一个简单漂亮的宠物网页（纯html代码）
制作一个简单HTML宠物猫网页（HTML+CSS）
网址: 使用ECharts实现HTML页面中的多表联动雷达图示例 https://m.mcbbbk.com/newsview944517.html
| 上一篇: 宠物动态图片 |
下一篇: 宠物动态数字X射线影像系统DR： |
