echarts画仪表盘图，指针变为圆形，数字在指针中
2020-12-03 本文已影响0人
xiaogp
摘要: echarts，大数据可视化，js
效果预览
需要将机器学习预测的得分通过echarts展示出来，为了达到视觉效果将指针修改为圆形，将得分写在指针里面，效果如下
算法得分展示效果.png
html代码
核心是使用markPoint盖在原始指针上面，将数据输出在标记点上。
<!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/>{b} : {c}"
},
series : [
{
name:'业务指标',
type:'gauge',
detail : {formatter:'{value}'}, //仪表盘显示数据
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, // 每个分割线内的刻度线分为5份
lineStyle: {
//color: "auto",
width: 3,
color: [[0.6, '#32CD32'], [0.8, '#FFA500'], [1, '#FF0000']]
}
},
data:[{value: 92}],
markPoint:{
symbol:'circle',
symbolSize:100,
data:[
//跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
{value: 92 ,x:'center', y:'center', itemStyle:{color:'#FF9933'}}
],
itemStyle:{
normal:{
label:{
show: true,
color: '#FFF',//气泡中字体颜色
fontSize: 60
}
}
},
},
detail: { // 仪表盘详情，用于显示数据。(仪表盘的数值字体样式和显示位置)
show: true, // 是否显示详情,默认 true。
offsetCenter: [0,0],// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
color: "auto", // 文字的颜色,默认 auto。
fontSize: 15, // 文字的字体大小,默认 15。
formatter: "{value}", // 格式化函数或者字符串
},
pointer: { // 仪表盘指针。
show: true, // 是否显示指针,默认 true。
length: "50%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
width: 35, // 指针宽度,默认 8。
},
itemStyle: { // 仪表盘指针样式。
color: "#FF9933", // 指针颜色，默认(auto)取数值所在的区间的颜色
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", // 阴影颜色。支持的格式同color。
},
}
]
};
myChart.setOption(option);
</script>
</html>
