Closed
Description
spec
const spec = {
"type": "gauge",
"padding": 0,
"categoryField": "name",
"valueField": "current",
"startAngle": -225,
"endAngle": 45,
"outerRadius": 0.75,
"innerRadius": 0.525,
"min": 0,
"max": 16068954.132933617,
"roundCap": true,
"data": [
{
"id": "data",
"values": [
{
"current": 16068954.132933617,
"name": "销售额",
"emptyName": "",
"progress": 1
}
]
},
{
"id": "sections",
"values": [
{
"gaugeColorKey": 0,
"current": 33,
},
{
"gaugeColorKey": 1,
"current": 66,
},
{
"gaugeColorKey": 2,
"current": 16068954.132933617,
}
]
}
],
"axes": [
{
"visible": false,
"type": "linear",
"orient": "angle",
"inside": true,
"min": 0,
"max": 16068954.132933617,
"innerRadius": 0.5075,
"label": {
"fontFamily": "Byte Number,-apple-system,\"Helvetica Neue\",\"PingFang SC\",\"Microsoft YaHei\",\"Hiragino Sans GB\",Helvetica,Arial,sans-serif,\"apple color emoji\",\"segoe ui emoji\",\"segoe ui\",\"segoe ui symbol\"",
"visible": false,
"inside": false,
"space": 0,
"style": {
"fill": "#808080",
"fontSize": 14
}
},
"tick": {
"visible": true,
"tickSize": 4,
"tickStep": 3213790.8265867233,
"style": {
"stroke": "#D1D5DA",
"lineWidth": 1,
"lineCap": "round"
}
},
"subTick": {
"visible": true,
"tickSize": 4,
"tickCount": 6,
"style": {
"stroke": "#D1D5DA",
"lineCap": "round"
}
},
"grid": {
"visible": false
},
"subGrid": {
"visible": false
}
}
],
"color": {
"type": "ordinal",
"range": [
"#d04d5b",
"#f5cb53",
"#579E78"
],
"domain": [
0,
1,
2
],
"field": "gaugeColorKey"
},
"gauge": {
"type": "gauge",
"seriesField": "gaugeColorKey",
"categoryField": "gaugeColorKey",
"valueField": "current",
"dataIndex": 1,
"label": {
"visible": true,
"position": "inside-outer",
"offsetRadius": 10,
"style": {}
},
"animation": false
},
"pointer": {
"visible": true,
"interactive": false,
"style": {
"fill": "#59595e"
}
},
"pin": {
"visible": true,
"interactive": false,
"width": 0.025,
"height": 0.025,
"style": {
"fill": "#d5d6de"
}
},
"pinBackground": {
"visible": true,
"width": 0.08,
"height": 0.08,
"style": {
"fill": "#d5d6de"
}
},
"indicator": {
"visible": true,
"fixed": true,
"title": {
"space": 8,
"style": {
"text": "",
"fontSize": 16,
"fill": "#666666",
"fontWeight": 500
}
},
"content": [
{
"space": 5,
"style": {
"text": "16,068,954.13",
"fontSize": 30,
"fill": "#161616",
"fontWeight": 400,
"fontFamily": "Byte Number,-apple-system,\"Helvetica Neue\",\"PingFang SC\",\"Microsoft YaHei\",\"Hiragino Sans GB\",Helvetica,Arial,sans-serif,\"apple color emoji\",\"segoe ui emoji\",\"segoe ui\",\"segoe ui symbol\""
}
}
],
"offsetY": "60%"
},
"extensionMark": [],
"tooltip": {
"handler": {}
},
"region": [
{
"clip": true
}
],
"background": "rgba(255, 255, 255, 0)",
"animation": false,
"hash": "c6ab63f01ab0f4e52ce54096e12f3d1f"
}
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();
// Just for the convenience of console debugging, do not copy
window['vchart'] = vchart;