原文:https://www.xncoding.com/2016/06/22/web/echarts.html
ECharts是一款由百度前端技術部開發的,基于JAVAscript的數據可視化圖表庫,提供直觀,生動, 可交互,可個性化定制的數據可視化圖表。
提供大量常用的數據可視化圖表,底層基于ZRender(一個全新的輕量級canvas類庫),創建了坐標系,圖例,提示, 工具箱等基礎組件,并在此上構建出折線圖(區域圖)、柱狀圖(條狀圖)、散點圖(氣泡圖)、餅圖(環形圖)、K線圖、地圖、 力導向布局圖以及和弦圖,同時支持任意維度的堆積和多圖表混合展現。
二維折線圖
二維折線圖是最常見的用法,這里我畫的是最基礎的二維折線圖。
首先引入最新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是首頁加載時候從后臺傳入的_隔開數據:
<!-- 為ECharts準備一個具備大?。▽捀撸┑腄om --> <div id="main1" style="width: 800px;height:400px;"></div> <hr/>
注意看js怎么寫:
$(function () { // 開始初始化echart數據 x_data = ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]; y_data = [[5, 20, 36, 10, 10, 20], [6, 22, 13, 33, 12, 15]]; // 基于準備好的dom,初始化echarts實例 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] } ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart1.setOption(option1); });
我放了兩項紀錄,分別是第一季度和第二季度銷量,下面是效果圖: