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

我們首先需要引入ECharts庫：

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

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

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

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

var jsonData = JSON.stringify(data);

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

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

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