ECharts 是百度開(kāi)源的數(shù)據(jù)可視化庫(kù),通過(guò)簡(jiǎn)單的 JavaScript 代碼即可實(shí)現(xiàn)出精美的數(shù)據(jù)圖表。其中,JSON 是 ECharts 的一種數(shù)據(jù)格式,可以方便地進(jìn)行數(shù)據(jù)處理和可視化操作。本文將介紹如何使用 ECharts 中的三亞市 JSON 數(shù)據(jù)進(jìn)行可視化。
{
"title": {
"text": "2018年三亞市人口分析",
"subtext": "數(shù)據(jù)來(lái)源:三亞市統(tǒng)計(jì)局",
"x": "center",
"textStyle": {
"fontWeight": "normal"
}
},
"tooltip": {
"trigger": "item",
"formatter": "{a}
: {c} (lvbfb7d%)"
},
"legend": {
"orient": "vertical",
"left": "left",
"data": ["男性", "女性"]
},
"series": [
{
"name": "人口統(tǒng)計(jì)",
"type": "pie",
"radius": ["50%", "70%"],
"avoidLabelOverlap": false,
"label": {
"show": false,
"position": "center"
},
"emphasis": {
"label": {
"show": true,
"fontSize": "30",
"fontWeight": "bold"
}
},
"labelLine": {
"show": false
},
"data": [
{"value": 303948, "name": "男性"},
{"value": 300630, "name": "女性"}
]
}
]
}
上述 JSON 數(shù)據(jù)中,包含了三亞市 2018 年的人口分析數(shù)據(jù)。其中,“title”字段表示了圖表的標(biāo)題和數(shù)據(jù)來(lái)源;“tooltip”字段表示了鼠標(biāo)懸停在圖表上時(shí)的提示信息;“l(fā)egend”字段表示了圖例的名稱;“series”字段表示了圖表中的數(shù)據(jù)和顯示方式。
通過(guò)將上述 JSON 數(shù)據(jù)傳入 ECharts 中,即可快速地生成一個(gè)餅圖,用于展示三亞市男女人口的比例。