ECharts是一個非常流行的開源可視化庫，主要用于構建各種數學和數據圖表。它支持多種數據格式，其中JSON格式是最常用的一種。在本文中，我們將討論如何使用ECharts中的餅圖（Pie Chart）和JSON格式來展示數據。
首先，在HTML頁面的head標簽中包含ECharts的CDN鏈接：
<head> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head>
接著，在body標簽中創建一個div容器，用于在其中顯示餅圖：
<body> <div id="pie-chart" style="width: 600px; height: 400px;">然后，創建一個名為pieOption的JavaScript對象，并設置餅圖的相關屬性，例如標題、數據、顏色等。下面是一個樣例的pieOption對象：
var pieOption = { title : { text: '餅圖數據展示', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} (tfvrjj7%)" }, color:['#FF7070','#FFC870','#FFFF70','#80FF80','#80FFFF','#8080FF','#FF80C0','#FF0000','#FFBF00','#FFFF00','#00FF00','#00FFFF','#0000FF','#9B30FF'], series : [ { name: '數據展示', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:30, name:'數據項1'}, {value:20, name:'數據項2'}, {value:40, name:'數據項3'}, {value:10, name:'數據項4'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] };然后，將pieOption對象傳遞給ECharts實例，并將其綁定到我們在前面創建的div容器中：
var myChart = echarts.init(document.getElementById('pie-chart')); myChart.setOption(pieOption);最后，我們可以在瀏覽器中查看餅圖的完整效果。關于ECharts和餅圖的更多內容，可以在官方文檔中查找。
上一篇vue分開打包
下一篇vue函數后面.bind