const response = await fetch('https://tosv.byted.org/obj/bit-cloud/province.json');
const provinceData = await response.json();
VChart.registerMap('china', provinceData, {
type: 'geojson',
simplify: true,
});
const spec = {
"type": "common",
"color": {
"type": "linear",
"domain": [
0,
1
],
"range": [
"#D3E0F8",
"#2C6DDE"
],
"clamp": true
},
"region": [
{
"roam": true,
"coordinate": "geo",
"longitudeField": "lon",
"latitudeField": "lat",
"zoomLimit": {
"min": 1
}
}
],
"series": [
{
"type": "map",
"map": "china",
"nameField": "name",
"valueField": "value",
"seriesField": "name",
"nameProperty": "name",
"centroidProperty": "centroid",
"area": {
"style": {
"fill": "#f3f3f3"
}
}
},
{
"regionIndex": 0,
"type": "scatter",
"data": {
"values": [
{
"name": "佛山市",
"value": 420597.1133667062,
"lon": "113.1227",
"lat": "23.0287"
},
{
"name": "北京市",
"value": 135236.04995461597,
"lon": "116.4074",
"lat": "39.9042"
},
{
"name": "白城市",
"value": 218074.9607763632,
"lon": "122.8207",
"lat": "45.6227"
}
]
},
"xField": "name",
"yField": "value",
"shape": "circle",
"label": {
"visible": true,
"animation": {
"duration": 0
}
},
"point": {
"style": {
"fill": {
"field": "value",
"scale": "color",
"changeDomain": "replace"
}
},
"state": {
"hover": {
"style": {
"stroke": "rgba(0, 0, 0, 0.8)",
"lineWidth": 1
}
}
}
}
}
],
"tooltip": {
"visible": true,
"renderMode": "html"
},
"legends": [
{
"visible": true,
"type": "color",
"field": "value",
"padding": 0,
"orient": "bottom",
"position": "start",
"bottom": 0,
"handler": {
"style": {
"symbolType": "triangle",
"dy": 10,
"outerBorder": {
"lineWidth": 1
}
}
},
"handlerText": {
"style": {
"dy": 4
}
}
}
]
}
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
- OS:
- Browser:
- Framework:
Version
latest
Link to Minimal Reproduction
solar
Steps to Reproduce
Current Behavior
Expected Behavior
不报错
Environment
Any additional comments?
No response