ECharts入門指南：如何使用ECharts-js教程-PHP中文網

ECharts入門指南：如何使用ECharts

ECharts入門指南：如何使用ECharts，需要具體程式碼範例

ECharts是一款基於JavaScript的資料視覺化程式庫，透過使用ECharts，使用者可以輕鬆地展示各種各樣的圖表，如折線圖、長條圖、圓餅圖等等。本文將為您介紹如何使用ECharts，並提供詳細的程式碼範例。

安裝ECharts

要使用ECharts，您首先需要安裝它。您可以從ECharts官網https://echarts.apache.org/zh/index.html下載ECharts，或使用npm安裝。如果您選擇使用npm，您可以透過以下命令進行安裝：

npm install echarts --save

登入後複製

新建一個ECharts頁面

在新建ECharts頁面之前，您需要一個HTML頁面來承載ECharts。在HTML中，您需要引入ECharts的JavaScript檔案。您可以透過以下方式引入：

登入後複製

一旦您引入了ECharts的JavaScript文件，您就可以開始建立您的第一個ECharts實例了。我們建議您在此之前在頁面中新增一個div元素，以便您將圖表渲染到頁面中。您可以在HTML中新增一個類似以下的div元素：

登入後複製

建立您的第一個ECharts圖表

在HTML中建立了ECharts所需的基本元素後，接下來您需要編寫程式碼來實現您的ECharts圖表。下面是一個非常簡單的折線圖的例子：

// 1. 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 2. 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'line', data: [5, 20, 36, 10, 10, 20] }] }; // 3. 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

登入後複製

在這裡，我們首先透過使用ECharts的init函數來初始化了一個新的ECharts實例，並將這個實例儲存到一個變數myChart中。我們引入了一些配置項和數據，其中包括一個標題、一個提示框、一個圖例、一個x軸、一個y軸和一個資料系列。在這個例子中，我們使用了一個折線圖的資料系列。最後，我們透過呼叫setOption方法將這些配置項應用於我們的ECharts圖表。

建立其他類型的圖表

除了折線圖，ECharts也支援許多其他類型的圖表，如長條圖、圓餅圖、散佈圖、雷達圖等等。下面是長條圖和圓餅圖的範例程式碼：

長條圖：

// 1. 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 2. 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 3. 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

登入後複製

餅圖：

// 1. 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 2. 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例', subtext: '饼图示例' }, tooltip: { trigger: 'item', formatter: "{a} 
{b}: {c} ({d}%)" }, legend: { orient: 'vertical', x: 'left', data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, series: [ { name:'访问来源', type:'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] }; // 3. 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

登入後複製

###使用ECharts建立圖表是一項相對簡單的任務，只要您有一些基本的JavaScript知識。在本文中，我們為您提供了一個入門教程，可以幫助您開始使用ECharts。如果您需要更多的資料和程式碼範例，您可以造訪ECharts官網https://echarts.apache.org/zh/index.html。 ###

以上是ECharts入門指南：如何使用ECharts的詳細內容。更多資訊請關注PHP中文網其他相關文章！