摘要: echarts，大數(shù)據(jù)可視化，js
效果預(yù)覽
需要將機(jī)器學(xué)習(xí)預(yù)測的得分通過echarts展示出來，為了達(dá)到視覺效果將指針修改為圓形，將得分寫在指針里面，效果如下
算法得分展示效果.png
html代碼
核心是使用markPoint蓋在原始指針上面，將數(shù)據(jù)輸出在標(biāo)記點(diǎn)上。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>這是一個圓形指針的儀表盤圖</title>
<script src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
option = {
tooltip : {
formatter: "{a} <br/> : {c}"
},
series : [
{
name:'業(yè)務(wù)指標(biāo)',
type:'gauge',
detail : {formatter:'{value}'}, //儀表盤顯示數(shù)據(jù)
axisLine: { //儀表盤軸線樣式
lineStyle: {
width: 20,
color: [[0.6, '#32CD32'], [0.8, '#FFA500'], [1, '#FF0000']],
opacity: 0.4, //盤的顏色變成透明
width: 15
}
},
splitLine: { //分割線樣式,是大分割線
length: 20,
width: 3,
},
// 刻度線
axisTick: {
show: true,
length: 25,
splitNumber: 5, // 每個分割線內(nèi)的刻度線分為5份
lineStyle: {
//color: "auto",
width: 3,
color: [[0.6, '#32CD32'], [0.8, '#FFA500'], [1, '#FF0000']]
}
},
data:[{value: 92}],
markPoint:{
symbol:'circle',
symbolSize:100,
data:[
//跟你的儀表盤的中心位置對應(yīng)上，顏色可以和畫板底色一樣
{value: 92 ,x:'center', y:'center', itemStyle:{color:'#FF9933'}}
],
itemStyle:{
normal:{
label:{
show: true,
color: '#FFF',//氣泡中字體顏色
fontSize: 60
}
}
},
},
detail: { // 儀表盤詳情，用于顯示數(shù)據(jù)。(儀表盤的數(shù)值字體樣式和顯示位置)
show: true, // 是否顯示詳情,默認(rèn) true。
offsetCenter: [0,0],// 相對于儀表盤中心的偏移位置，數(shù)組第一項(xiàng)是水平方向的偏移，第二項(xiàng)是垂直方向的偏移?？梢允墙^對的數(shù)值，也可以是相對于儀表盤半徑的百分比。
color: "auto", // 文字的顏色,默認(rèn) auto。
fontSize: 15, // 文字的字體大小,默認(rèn) 15。
formatter: "{value}", // 格式化函數(shù)或者字符串
},
pointer: { // 儀表盤指針。
show: true, // 是否顯示指針,默認(rèn) true。
length: "50%", // 指針長度，可以是絕對數(shù)值，也可以是相對于半徑的百分比,默認(rèn) 80%。
width: 35, // 指針寬度,默認(rèn) 8。
},
itemStyle: { // 儀表盤指針樣式。
color: "#FF9933", // 指針顏色，默認(rèn)(auto)取數(shù)值所在的區(qū)間的顏色
opacity: 1, // 圖形透明度。支持從 0 到 1 的數(shù)字，為 0 時不繪制該圖形。
borderWidth: 0, // 描邊線寬,默認(rèn) 0。為 0 時無描邊。
borderType: "solid", // 柱條的描邊類型，默認(rèn)為實(shí)線，支持 'solid', 'dashed', 'dotted'。
borderColor: "#000", // 圖形的描邊顏色,默認(rèn) "#000"。支持的顏色格式同 color，不支持回調(diào)函數(shù)。
shadowBlur: 10, // (發(fā)光效果)圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設(shè)置圖形的陰影效果。
shadowColor: "#fff", // 陰影顏色。支持的格式同color。
},
}
]
};
myChart.setOption(option);
</script>
</html>
