ECharts 是一個非常強大的 JavaScript 圖表庫，支持幾乎所有圖表類型。ECharts 可以通過 Json 數據格式引入數據，下面讓我們來看一下如何實現。

首先，在 HTML 頁面中引入 ECharts 的 JavaScript 庫。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

然后，我們需要創建一個 `div` 元素，并為其指定一個 ID 屬性，這將作為我們的圖表容器。

<div id="myChart" style="width: 600px;height:400px"></div>

接下來，在 JavaScript 文件中，我們可以使用 ECharts 的 `init` 函數來初始化圖表，并傳入容器的 ID。

// 初始化 ECharts 實例
var myChart = echarts.init(document.getElementById('myChart'));
// 繪制圖表
myChart.setOption({...})

然后，我們需要使用 Ajax 或其他方式獲取數據，并將其轉換為 Json 格式。

// 假設我們獲取到的數據為以下格式
var data = [
{name: '北京', value: 100},
{name: '上海', value: 50},
{name: '廣州', value: 80},
{name: '深圳', value: 70},
{name: '成都', value: 60}
];
// 將數據轉換為 ECharts 需要的 Json 格式
var json = {
tooltip: {},
visualMap: {
min: 0,
max: 100,
seriesIndex: 0,
inRange: {
color: ['#e0ffff', '#006edd']
}
},
series: [{
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: data
}]
};
// 使用 setOption 方法將數據渲染到圖表中
myChart.setOption(json);

最后，我們可以通過調用圖表實例的 `setOption` 方法來將數據渲染到圖表中。以上示例中，我們使用了 ECharts 圖表庫內置的地圖類型，將數據渲染成地圖分布圖。