求大神解答!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://bbs.csdn.net/topics/js/china.js"></script>
<script src="https://bbs.csdn.net/topics/js/echarts.min.js"></script>
<script src="https://bbs.csdn.net/topics/js/jquery-1.11.1.min.js"></script>
<body>
<div id="container" style="height: 305px;width:366px;"></div>
<script type="text/javascript">
// 全國省份串列
var dataMap = [{ name: '北京' ,value:15 }, { name: '天津' ,value:18 }, { name: '上海' ,value:15 },
{ name: '重慶' ,value:55 }, { name: '河北' ,value:88 }, { name: '河南' ,value:152 }, { name: '云南' ,value:154 },
{ name: '遼寧' ,value:1 }, { name: '黑龍江' ,value:57 }, { name: '湖南' ,value:188 }, { name: '安徽' ,value:45 },
{ name: '山東' ,value:78 }, { name: '新疆' ,value:44 }, { name: '江蘇' ,value:12 }, { name: '浙江' ,value:63 },
{ name: '江西' ,value:144}, { name: '湖北' ,value:111}, { name: '廣西' ,value:32 }, { name: '甘肅' ,value:21 },
{ name: '山西' ,value:92 }, { name: '內蒙古' ,value:222 }, { name: '陜西' ,value:77 }, { name: '吉林' ,value:24 },
{ name: '福建' ,value:151 }, { name: '貴州' ,value:17 }, { name: '廣東' ,value:66 }, { name: '青海' ,value:55 },
{ name: '西藏' ,value:44 }, { name: '四川' ,value:33 }, { name: '寧夏' ,value:22 }, { name: '海南' ,value:11 },
{ name: '臺灣' ,value:10 }, { name: '香港' ,value:17 }, { name: '澳門' ,value:18 }]
var option = {
tooltip: {
formatter: function (params) {
var info = '<p style="font-size:10px">' + params.name
+ '</p><p style="font-size:10px">確診:' + params.value + ' </p>'
return info;
},
fontSize:"12px",
backgroundColor: "rgba(55,55,55,0.8)",//提示標簽背景顏色
textStyle: { color: "#fff" }, //提示標簽字體顏色
/* triggerOn: 'click', */
enterable:true
},
series: [
{
name: '中國',
type: 'map',
mapType: 'china',
label: {
normal: {
show: true,//顯示省份標簽
textStyle:{ fontSize:8 }
},
emphasis: {
enterable:true,
// textStyle:{color:"#800080"}
}
},
itemStyle: {
normal: {
borderWidth: .15,//區域邊框寬度
// borderColor: '#009fe8',//區域邊框顏色
// areaColor:"#ffefd5",//區域顏色
color:function(params){
if(params.value >0 && params.value <100){
return "#FE8463";
}else if(params.value >=100 && params.value<=300 ){
return "#27727B";
}
return "#9BCA63";
}
},
emphasis: {
borderWidth: .5,
borderColor: "#FF0000",
areaColor: "#ffdead",
}
},
data: dataMap
}
]
};
var myChart = echarts.init(document.getElementById('container'));
myChart.setOption(option);
</script>
<div style="height: 20px; width:366px;">
<p><b>實時資料:</b></p>
</div>
<div style="height:10px; width:366px;"/>
<div id="container2" style="height:140px; width:366px;padding:10px 0px 15px 0px;">
<table>
<tr class="td1">
<td><b>現有確診</b></td>
<td><b>現有疑似</b></td>
<td><b>現有重癥</b></td>
</tr>
<tr class="td2">
<td style="color:#ff5555;">54927</td>
<td style="color:#888811;">5206</td>
<td style="color:#aaaa33;">11633</td>
</tr>
<tr class="td3">
<td>昨日-1335</td>
<td>昨日+1614</td>
<td>昨日-231</td>
</tr>
</table>
<table>
<tr class="td1">
<td>累計確診</td>
<td>累計治愈</td>
<td>累計死亡</td>
</tr>
<tr class="td2">
<td style="color:#2288ff;">75567</td>
<td style="color:#22bb88;">18401</td>
<td style="color:#990000;">2239</td>
</tr>
<tr class="td3">
<td>昨日+892</td>
<td>昨日+2109</td>
<td>昨日+118</td>
</tr>
</table>
</div>
</body>
</html>
uj5u.com熱心網友回復:
uj5u.com熱心網友回復:
你這個確診、治愈、死亡數字字體的顏色是怎么設定的,不是默認黑色的,怎么實作的轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/12169.html
標籤:Apache
上一篇:layui和vue的區別是什么
