ECharts 是由百度開源的可視化庫，主要用于 Web 端數據可視化。其中，json 交互可以讓用戶通過前端頁面輸入數據，從而動態生成圖表。

在使用 ECharts 進行 json 交互時，需要先引入 echarts.js 文件，并在 HTML 中定義一個 div 容器，容器的寬高需要設置，如下所示：

<script src="echarts.js"></script>
<div id="main" style="height:400px; width:100%;"></div>

接下來，在 JavaScript 中定義數據，并使用 setOption() 方法進行圖表的渲染，如下所示：

var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '柱狀圖'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);

最后，我們可以通過輸入框獲取用戶輸入的數據，然后動態生成圖表：

<input type="text" id="dataInput">
<button onclick="updateChart();">生成圖表</button>
function updateChart() {
var data = document.getElementById("dataInput").value.split(",");
var option = {
xAxis: {
data: data
},
series: [{
data: data
}]
};
myChart.setOption(option);
}

上面的代碼中，我們定義了一個輸入框和一個按鈕，當用戶點擊按鈕時，會調用 updateChart() 函數，將輸入的數據分割成數組，并在 option 中更新 xAxis 和 series，然后通過 setOption() 方法重新渲染圖表。