JavaScript圖表庫ECharts使用二維折線圖

發布時間：2023-07-03 17:25:50 作者：網友整理

JavaScript圖表庫ECharts使用

原文：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準備一個具備大小（寬高）的Dom -->
<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);
});

我放了兩項紀錄，分別是第一季度和第二季度銷量，下面是效果圖: