今天我們來聊一聊PHP中的Echart圖表。Echarts是百度公司開源的一個數據可視化的Javascript庫，它基于HTML5 Canvas技術實現，提供了各種類型的圖表展示，包括：折線圖、柱狀圖、散點圖、餅圖等等。使用Echarts，我們可以輕松地將數據可視化展示，更直觀地呈現數據之間的關系。
在使用PHP中的Echarts之前，我們需要先引入Echarts的相關文件，如下所示：
<!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
以上代碼我們可以放在HTML頁面的<head>標簽中，并將Echarts的JS文件傳入src屬性中。
接著，我們來看一個簡單的折線圖展示代碼，用于展示某地區溫度變化趨勢。
<!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script> <!-- 定義一個具有高度和寬度的div容器 --> <div id="main" style="height:400px;width:700px">以上代碼中，我們在HTML中定義了一個具有高度和寬度的
div容器，并用echarts.init()創建了一個Echarts實例myChart，在option中指定了圖表的配置項和數據，并在最后使用myChart.setOption(option)方法渲染出了我們的圖表。其中，xAxis配置項指定了data屬性，這里我們以數組形式給出了溫度變化的時間段，yAxis也是類似方式定義，series對象是一組數據系列，可以有多個，每個系列可以有自己的圖表類型類型和數據。接下來，我們來看一個餅狀圖的例子，用于展示某家公司不同業務部門占比。
<!-- 引入 ECharts 文件 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script> <!-- 定義一個具有高度和寬度的div容器 --> <div id="main" style="height:400px;width:700px"></div> <script> // 初始化 ECharts 實例 var myChart = echarts.init(document.getElementById('main')); // 配置項 var option = { title: { text: '某公司業務部門占比圖', x:'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} (hvzflzb%)" }, legend: { orient: 'vertical', left: 'left', data:['人力資源部門','財務部門','市場營銷部門','技術研發部門'] }, series: [ { name: '訪問來源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data:[ {value:335, name:'人力資源部門'}, {value:310, name:'財務部門'}, {value:234, name:'市場營銷部門'}, {value:135, name:'技術研發部門'} ] } ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script>以上代碼中，我們仍然是引入Echarts庫，并定義了一個具有高度和寬度的
div容器。在餅狀圖中，我們通過series進行配置，type配置為pie，data屬性是數據系列，一般由數據項構成，每個數據項都是一個Object，對象可以有name、value等屬性。當然，在餅狀圖中最重要的就是設置餅狀圖的radius了，這里我們的餅狀圖是由兩個同心圓構成的。總結一下，使用Echarts實現圖表的展示非常簡單，只需按照Echarts提供的API編寫對應的配置項和數據，就可以渲染出一個又一個好看的圖表。