原文：https://www.xncoding.com/2016/06/22/web/echarts.html

ECharts是一款由百度前端技術(shù)部開發(fā)的，基于JAVAscript的數(shù)據(jù)可視化圖表庫，提供直觀，生動， 可交互，可個性化定制的數(shù)據(jù)可視化圖表。

提供大量常用的數(shù)據(jù)可視化圖表，底層基于ZRender（一個全新的輕量級canvas類庫），創(chuàng)建了坐標(biāo)系，圖例，提示， 工具箱等基礎(chǔ)組件，并在此上構(gòu)建出折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、餅圖（環(huán)形圖）、K線圖、地圖、 力導(dǎo)向布局圖以及和弦圖，同時(shí)支持任意維度的堆積和多圖表混合展現(xiàn)。

二維折線圖

二維折線圖是最常見的用法，這里我畫的是最基礎(chǔ)的二維折線圖。

首先引入最新js依賴echarts.min.js

<script type="text/JavaScript" src="../../js/jquery-1.12.4.min.js"></script>
<script src="./echarts.min.js"></script>

第二步，頁面定義圖表div，里面放的隱藏input是首頁加載時(shí)候從后臺傳入的_隔開數(shù)據(jù):

<!-- 為ECharts準(zhǔn)備一個具備大小（寬高）的Dom -->
<div id="main1" style="width: 800px;height:400px;"></div>
<hr/>

注意看js怎么寫:

$(function () {
 // 開始初始化echart數(shù)據(jù)
 x_data = ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"];
 y_data = [[5, 20, 36, 10, 10, 20], [6, 22, 13, 33, 12, 15]];
 // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
 var myChart1 = echarts.init(document.getElementById('main1'));
 var option1 = {
 title: {
 text: '服裝銷量表'
 },
 tooltip: {
 trigger: 'axis'
 },
 legend: {
 data: ['第一季度', '第二季度']
 },
 grid: {
 left: '3%',
 right: '4%',
 bottom: '3%',
 containLabel: true
 },
 toolbox: {},
 xAxis: {
 type: 'category',
 boundaryGap: false,
 data: x_data
 },
 yAxis: {
 type: 'value'
 },
 series: [
 {
 name: '第一季度',
 type: 'line',
 stack: '總量',
 data: y_data[0]
 },
 {
 name: '第二季度',
 type: 'line',
 stack: '總量',
 data: y_data[1]
 }
 ]
 };
 // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
 myChart1.setOption(option1);
});

我放了兩項(xiàng)紀(jì)錄，分別是第一季度和第二季度銷量，下面是效果圖: