文章图片
严正声明：南海是我国固有领土，此处只是隐藏！
Map body{
position: relative;
background-color: #000000;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,li{
list-style: none;
}
.clear:after{
display: block;
content: "";
clear:both;
}#mainleft,#mainright{
float:left;
height: 85%;
margin-top: -60px;
}
#mainleft{
width:63%;
}
#mapchart{
width: 100%;
height: 100%;
}/*悬浮框*/
#plan{
margin: 10px;
background-color: #011C31;
border-top: 1px solid #27BFC4;
border-left: 1px solid #27BFC4;
font-size: 12px;
color: #fff;
width: 200px;
}
#plan li{
height: 20px;
padding-left: 10px;
border-bottom: 1px solid #27BFC4;
}
#plan li:first-child{
font-size: 14px;
height: 22px;
}
#plan li:first-child img{
width: 10px;
display: inline-block;
margin:4px 4px 0 -4px;
}
#plan li span{
display: inline-block;
}
#plan li span:first-child{
width: 70px;
}
#plan li span:nth-child(2){
width: 60px;
}
#plan li span:nth-child(3){
width: 50px;
}
/*排行榜*/
#mainright{
width: 37%;
}
#mainright{
padding: 10px;
}
#rank{
background-color: rgba(119,119,119,.3);
width:98%;
height: 94%;
color: white;
position: relative;
}
#rank li p{
float: left;
}
/*四个角*/
#rank>li.corner>p{
width: 16px;
height: 16px;
}
#rank>li:first-child>p:first-child{
float: left;
border-top: 1px solid #27BFC4;
border-left: 1px solid #27BFC4;
}
#rank>li:first-child>p:last-child{
float: right;
border-top: 1px solid #27BFC4;
border-right: 1px solid #27BFC4;
}
#rank>li.corner:last-child{
position: absolute;
bottom:0;
width: 100%;
}
#rank>li:last-child>p:first-child{
float: left;
border-bottom: 1px solid #27BFC4;
border-left: 1px solid #27BFC4;
}
#rank>li:last-child>p:last-child{
float: right;
border-bottom: 1px solid #27BFC4;
border-right: 1px solid #27BFC4;
}
/*排行榜主体*/
#rank>li.thead{
margin-bottom: 8px;
}
#rank>li.tobdy:hover{
background-color: rgba(255,255,255,.2);
}
#rank>li.tobdy{
height: 9.3%;
padding-top: 10px;
}
#rank>li.tobdy>p:first-child{
width: 20%;
}
#rank>li.tobdy>p:first-child span{
display: block;
width:20px;
height: 20px;
text-align: center;
background-color: #27BFC4;
margin:auto;
}
#rank>li.tobdy>p:nth-child(2){
width: 25%;
}/*进度条区域*/
#rank>li.tobdy>div{
float: left;
width: 51%;
height: 100%;
}
#rank>li.tobdy>div>ul li:first-child{
float: left;
}
#rank>li.tobdy>div>ul li:last-child{
float: right;
}
#rank p.prog-bg,#rank p.prog-on{
height: 4px;
border-radius:4px;
}
#rank p.prog-bg {
width: 100%;
margin-top: 4px;
background-color: rgba(119,119,119,.5);
}
#rank p.prog-on{
background-color: #95BA2E;
margin-top: -4px;
}
- 排行
地区
销量
完成率
- 1
江苏
- 8920台
- 180%
- 2
浙江
- 8588台
- 137%
- 3
四川
- 8215台
- 110%
- 4
广东
- 7586台
- 88%
- 5
山东
- 6324台
- 78%
- 6
福建
- 6112台
- 72%
- 【echarts中国地图+自定义tooltip样式+dispatchAction()方法实现联动】7
湖南
- 5989台
- 60%
- 8
广西
- 5448台
- 55%
- 9
辽宁
- 4994台
- 38%
- 10
江西
- 4528台
- 22%
推荐阅读
- Echarts 学习
- echarts|vue 使用 Echarts 隐藏后显示变得非常小
- echarts地图跟柱图结合
- ECharts折线图+联动+dataZoom
- Echarts合并柱状图与折线图+dataZoom
- echarts 折线图鼠标放上去显示X轴和Y轴的数据信息
- 技术文章转载|JAVA开发人员画图表总结（ECHARTS）