注：本系列教程需要對應 JavaScript 、html、css 基礎，否則將會導致閱讀時困難，本教程將會從 ECharts 的官方示例出發，詳解每一個示例實現，從中學習 ECharts 。
ECharts 官方示例：https://echarts.apache.org/examples/zh/index.html
一、折線圖
我們打開 ECharts 的示例界面，找到折線圖中的基礎折線圖：
打開折線圖后，左側則是對應的代碼，右側則是對應的折線圖演示：
本系列文字將會以 JavaScript 代碼為講解代碼。
二、 基礎折線圖
我們先從基礎折線圖開始了解，再逐步深入學習多種不同的數據可視化的方式。我們此時找到完整代碼：
此時忽略 import 代碼，直接查看初始化代碼：
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
以上代碼中 var chartDom = document.getElementById('main'); 為通過 js 的 document 獲取 id 為 main 的元素作為圖標顯示的區域（節點），此時我們還無法查看 html，這個不用在意，等下我們逐步開始講解。
找到對應的節點元素后，我們通過 echarts.init() 初始化這個節點，這一步是必要的，初始化完畢后就得到一個 echarts 數據可視化的對象，這個對象，最后創建一個配置項 var option; 。
以上所述的這一部分是一個 echarts 可視化的基礎 JavaScript 代碼，這一部分代碼是通用的。在使用 echarts 進行可視化數據開發時，重要的是其 option 的編寫，通過給與 option 不同的配置，可以使我們的可視化數據展現得更加豐富。
那么接下來我們開始 option 的配置解析。
三、ECharts 可視化數據的配置項
在官方示例中，option 的代碼如下：
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};
我們直接查看 option 中的內容；其中 xAxis 是表示直角坐標系上的 x 軸，在此處是放置在 option 中，那么則表示 xAxis 在此處配置 x 軸的配置項。其實 ECharts 已經提供了配置項文檔給我們查閱，地址是 https://echarts.apache.org/zh/option.html，有興趣不怕麻煩的可以去自行學習。
type
此時我們已經知道了對應的配置項文檔，我們可以直接通過配置項文檔查看在官方示例中 xAxis 下的 type 是指什么類型。我們打開文檔后，找到 xAxis 列：
在其中我們查看到了 type 配置項：
再次我們可以看到 type 指的就是坐標軸類型。在示例代碼中，我們使用的配置是 type: 'category', 此時就表示當前的坐標軸類型是 類目軸。
data
接著我們繼續查找 data 配置項，在 data 配置項中后面的值是 data 所擁有的值，在手冊中我們可以看到相關的解釋：
在文檔中有指出：
類目數據，在類目軸
（type: 'category'）中有效。
如果沒有設置type，但是設置了axis.data，則認為type是'category'。
如果設置了type是'category'，但沒有設置axis.data，則axis.data的內容會自動從series.data中獲取，這會比較方便。
簡單點來說，文檔中所述指你沒設置類目軸（type: 'category'）那么只要設置了 axis.data 則默認當前設置是類目軸，若設置類目軸，但沒設置數據（axis.data）那么數據就是 series.data 所設置的數據（series.data 接下來會講）。
yAxis
yAxis 表示當前折線圖在 y 軸上的設置，可以在配置文檔中找到對應的說明：
一般來說 y 軸在垂直方向上最多只能放兩個，也就是左右兩邊，并不允許同個位置的多個 y 軸產生重疊。
在配置 y 軸時，type 表示配置坐標軸的類型：
期值若等于 value 則表示事數值值，也就是當前圖標所顯示的數值進行自動適配后產生 y 軸的標注，最終效果可以查看本片最下部分的示例截圖。
series 系列
在 ECharts 中，series 表示由數據形成的圖標，也就是最終我們所呈現的可視化數據。
在官方示例中，series 中 data 給予了如下數值：
data: [150, 230, 224, 218, 135, 147, 260]
這些數值就是即將要生成的可視化數據，而 type: 'line' 則表示這個數據所呈現的可視化圖標是折線圖。
四、應用
基本上我們已經了解了 ECharts 官方示例中的 JavaScript 代碼，那么此時我們可以打開 ECharts 的官方入門手冊：https://echarts.apache.org/handbook/zh/get-started/，在其中我們可以看到快速入門下有一個示例：
完整代碼為：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><!-- 引入剛剛下載的 ECharts 文件 --><script src="echarts.js"></script></head><body><!-- 為 ECharts 準備一個定義了寬高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data: ['銷量']},xAxis: {data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項和數據顯示圖表。myChart.setOption(option);</script></body>
</html>
把代碼復制到自己新建的 html 文件之中，我們可以將本地引入的 echarts.js 文件 <script src="echarts.js"></script> 改成 cdn 引入（當然你下載了直接引入都可以）： <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
最后我們可以看到示例之中 body 下有一個 div 作為了顯示圖標的容器：<div id="main" style="width: 600px;height:400px;"></div>
這個容器的 id 為 main，那么在通過 js 初始化的時候，就需要獲取當前元素進行初始化，則示例代碼寫成了：var myChart = echarts.init(document.getElementById('main'));
接著我們可以把配置項換成我們理解的基礎折線圖的配置項：
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]
};
最后查看一句 JavaScript 代碼：
myChart.setOption(option);
這段代碼則是表示 ECharts 對象使用 option 配置項生成數據。
打開網頁，顯示如下：
