引言：
ECharts是一款基于JavaScript的資料可視化圖表庫，提供直觀，生動，可互動，可個性化定制的資料可視化圖表，ECharts最初由百度團隊開源，并于2018年初捐贈給Apache基金會，成為ASF范訓級專案，
每篇博客都會強調的事情，學習ECharts最直接、最有效的方式就是去看官網，官網上有你想要的一切，官網地址：https://echarts.apache.org/en/index.html
當然了，在下不才，寫了幾篇拙文，若大家有興趣的可以瞅一瞅，有幫助的話給個贊，款哥還是會很開心的
| 標題 | 地址 |
|---|---|
| ECharts初體驗 | 傳送門 |
| ECharts通用配置 | 傳送門 |
| 柱狀圖 | 傳送門 |
| ECharts官網 | 傳送門 |
折線圖
我們都知道，要想使用echarts來進行資料展示，需要以下五步
步驟1：引入echarts.js檔案
步驟2：準備一個呈現圖表的盒子（這個盒子要給予寬高）
步驟3：初始化echarts實體物件（這個script標簽要記得放在呈現圖表的盒子之后，或者window.onload）
步驟4：準備配置項（使用ECharts創建不同的表格，只有配置項會變化，其他代碼都是固定）
步驟5：將配置項配置給echarts實體物件
————————————————
基本實作
由于折線圖的基礎結構搭建方面與柱狀圖并無太大差別，所以下面我就把一個完整的案例代碼貼上
差別在于series中的型別也就是type，柱狀圖是bar，折線圖是line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折線圖</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var oDiv = document.querySelector('div');
var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
yDataArr = [2000,1000,2500,1550,1800,1300,1400,2800,1200,950,1100,2000];
var mCharts = echarts.init(oDiv);
var option = {
type: 'line',
name: '銷量',
xAxis:{
type: 'category',
data: xDataArr
},
yAxis:{
type: 'value'
},
series: {
name: '白象方便面銷量',
type: 'line',
data: yDataArr
}
}
mCharts.setOption(option)
</script>
</body>
</html>
對以上代碼有疑惑的，可以在文章開始的傳送門里去看看之前的幾篇文章，
上面的代碼在瀏覽器上運行出來，效果是這樣的
風格樣式
同樣的，折線圖也有對應的最大值、最小值，平均值等樣式，并且方法也與柱狀圖一致，這里就不再過多的敘述，
柱狀圖可以去看資料可視化—ECharts—柱狀圖
這里主要說一下折線圖，不同于柱狀圖的地方
標記區域（markArea）
在series里面寫下這段代碼，注意：
- markArea的值必須是一個物件
- markArea里面有一個屬性data，它的值是一個陣列
- 陣列里的兩個陣列，實際上就是標記區間
- 兩個物件相當于是X軸坐標
markArea: {
data: [
[
{xAxis:'1月'},
{xAxis:'2月'}
],
[
{xAxis:'7月'},
{xAxis:'10月'}
]
]
}
平滑曲線（smooth）
在series里面寫下這段代碼，這行代碼是與markArea，markPoint等平級的
// 是否為平滑的曲線，默認為false
smooth: true,
線的樣式（lineStyle）
這里可一去對折線的樣式去進行設定，包括虛實線、顏色、粗細等；
lineStyle: {
color: 'green',
// dashed 虛線 dotted 點線 solid 實線
type: 'solid'
}
填充樣式（areaStyle）
在series里寫下這行代碼
areaStyle: {
color: 'yellow'
}
這時候在瀏覽器中是這樣的
忘了下面這哥倆了：
縮放，脫離0值比例 scale: true------這個要寫在數值軸的配置上坐標軸兩邊留白策略,false 不留白
boundaryGap: false---------這個寫在類目軸即可
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折線圖</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var oDiv = document.querySelector('div');
var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
// yDataArr = [2000,1000,2500,1550,1800,1300,1400,2800,1200,950,1100,2000];
yDataArr = [2480,2496,2500,2488,2487,2480,2490,2486,2485,2482,2490,2481];
var mCharts = echarts.init(oDiv);
var option = {
xAxis:{
type: 'category',
data: xDataArr,
//坐標軸兩邊留白策略,false 不留白
boundaryGap: false
},
yAxis:{
type: 'value',
// boundaryGap: true
// 縮放，脫離0值比例
scale: true
},
series: {
name: '白象方便面銷量',
type: 'line',
data: yDataArr,
// 最大值，最小值
markPoint: {
data: [
{
type: 'max',name: '最大值'
},
{
type: 'min',name: '最小值'
}
]
},
// 平均值
markLine: {
data: [
{type: 'average',name: '平均值'}
]
},
// 標記區域
markArea: {
data: [
[
{xAxis:'1月'},
{xAxis:'2月'}
],
[
{xAxis:'7月'},
{xAxis:'10月'}
]
]
},
// 是否為平滑的曲線
smooth: true,
// 線的樣式
lineStyle: {
color: 'green',
// dashed 虛線 dotted 點線 solid 實線
type: 'solid'
},
// 填充風格
areaStyle: {
color: 'yellow'
}
}
}
mCharts.setOption(option)
</script>
</body>
</html>
堆疊圖
其實我們在作業中常用的是一種叫做堆疊圖的圖表，它其實就是一種變了樣的折線圖
這里的關鍵就是在同個類目軸上系列配置相同的stack值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>堆疊圖</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<!--
資料堆疊，同個類目軸上系列配置相同的stack值后，后一個系列的值會在前一個系列的值上相加，
-->
<div style="width: 600px;height: 400px;"></div>
<script>
var oDiv = document.querySelector('div');
var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
yDataArr = [2000,1000,2500,1550,1800,1300,1400,2800,1200,950,1800,2000],
yDataArr2 = [2480,1496,1500,2400,2480,2680,2490,2000,1500,1600,2000,1200];
var mCharts = echarts.init(oDiv);
var option = {
xAxis:{
type: 'category',
data: xDataArr
},
yAxis:{
type: 'value'
},
series: [
{
name: '白象方便面銷量',
type: 'line',
data: yDataArr,
// 堆疊圖主要是靠stack屬性，series中每個物件的stack值要保持一直
stack: 'all',
areaStyle: {}
},
{
name: '統一方便面銷量',
type: 'line',
data: yDataArr2,
stack: 'all',
areaStyle: {}
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
效果就是下面這樣
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/291357.html
標籤：其他