ECharts是一款基于JavaScript的開(kāi)源可視化庫(kù)，可以通過(guò)傳遞JSON數(shù)據(jù)來(lái)生成各種圖表。在使用ECharts時(shí)，對(duì)于數(shù)據(jù)的傳值是非常關(guān)鍵的，本文將講解如何使用JSON傳值來(lái)生成ECharts圖表。

我們首先需要引入ECharts庫(kù)：

接下來(lái)定義一個(gè)DOM元素，用于存放圖表：

然后定義數(shù)據(jù)：

var data = [
{value: 335, name: '直接訪問(wèn)'},
{value: 310, name: '郵件營(yíng)銷'},
{value: 234, name: '聯(lián)盟廣告'},
{value: 135, name: '視頻廣告'},
{value: 1548, name: '搜索引擎'}
];

接下來(lái)就是傳值的關(guān)鍵，我們需要將data數(shù)據(jù)轉(zhuǎn)換為JSON格式：

var jsonData = JSON.stringify(data);

最后將jsonData傳遞給ECharts的option配置項(xiàng)中的data屬性即可：

// 使用ECharts畫(huà)一個(gè)餅圖
var myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption({
title:{
text:'ECharts餅圖示例'
},
tooltip:{
trigger:'item',
formatter:'{a}
{b}: {c} (7d5xfvn%)'
},
legend:{
orient:'vertical',
left:10,
data:['直接訪問(wèn)','郵件營(yíng)銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
},
series:[
{
name:'訪問(wèn)來(lái)源',
type:'pie',
radius:'50%',
data:jsonData,
label:{
formatter:'{b}: {c} (ddjrv7r%)'
},
emphasis:{
itemStyle:{
shadowBlur:10,
shadowOffsetX:0,
shadowColor:'rgba(0,0,0,.5)'
}
}
}
]
});

我們將jsonData作為data屬性的值傳遞給了series配置項(xiàng)中的pie類型圖表，這樣就成功地使用JSON傳值生成了一個(gè)ECharts餅圖。