欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

echart 餅圖數據用json表示

劉柏宏2年前8瀏覽0評論

Echart 餅圖可以非常方便地展示和分析數據占比,而這些數據通常是用 JSON 格式表示的。下面是一個示例 JSON 數據,以及如何在 Echart 中使用它來繪制餅圖。

{
"legend": {
"data": ["類別1", "類別2", "類別3"]
},
"series": [
{
"name": "數據名稱",
"type": "pie",
"radius": "55%",
"center": ["50%", "50%"],
"data": [
{"value": 335, "name": "類別1"},
{"value": 310, "name": "類別2"},
{"value": 234, "name": "類別3"}
],
"itemStyle": {
"emphasis": {
"shadowBlur": 10,
"shadowOffsetX": 0,
"shadowColor": "rgba(0, 0, 0, 0.5)"
}
}
}
]
}

上面的 JSON 數據包含了一個餅圖所需的所有信息:

  • legend - 圖例數據,用于顯示每個數據點的標簽
  • series - 數據系列,用于指定各個數據點的值和名稱,以及餅圖的樣式
  • name - 數據系列的名稱
  • type - 指定數據系列為餅圖
  • radius - 指定餅圖的半徑大小
  • center - 指定餅圖的中心位置,一般為屏幕的中心
  • data - 指定各個數據點的值和名稱
  • itemStyle - 指定數據點的樣式,例如陰影效果等

在 Echart 中使用上述 JSON 數據非常簡單,只需要將數據傳遞給 Echart 對象的 setOption() 方法即可:

var chart = echarts.init(document.getElementById('chart'));
var option = {
// 上面的 JSON 數據
};
chart.setOption(option);

上面的代碼假定頁面中已經有一個 id 為 “chart” 的元素,用于顯示餅圖。