3.2.1.折線圖的實現步驟
07.折線圖的實現.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
<script>
//1. ECharts最基本的代碼結構
//2. x軸數據:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
//3. y軸數據:[3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
//4. 將type的值設置為line
var mCharts = echarts.init(document.querySelector('div'))
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '康師傅',
data: yDataArr,
type: 'line' // 設置圖表類型為 折線圖
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
3.2.2.折線圖的常見效果
08.折線圖的常見效果.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
<script>
//1. ECharts最基本的代碼結構
//2. x軸數據:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
//3. y軸數據:[3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
//4. 將type的值設置為line
var mCharts = echarts.init(document.querySelector('div'))
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '康師傅',
data: yDataArr,
type: 'line',
markPoint: { // 標記點
data: [
{ type: 'max' },
{ type: 'min' }
]
},
markLine: { // 標記線
data: [
{ type: 'average' }
]
},
markArea: { // 標記區域
data: [
[
{ xAxis: '1月' },
{ xAxis: '2月' }
],
[
{ xAxis: '7月' },
{ xAxis: '8月' }
]
]
},
smooth: true, // 是否為平滑線
lineStyle: { // 線的樣式設置
color: 'green',
type: 'solid' // dashed dotted solid
},
areaStyle: { // 線和x軸形成的區域設置
color: 'pink'
}
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
- 緊挨邊緣 boundaryGap
- 縮放, 脫離0值比例
09.折線圖的常見效果.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'))
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
// var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
var yDataArr = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005, 3004, 3001, 3009]
var option = {
xAxis: {
type: 'category',
data: xDataArr,
boundaryGap: false // x軸的第1個元素是否與y軸有距離 【設置給x軸】
},
yAxis: {
type: 'value',
scale: true // 縮放, 脫離0值比例 【設置給y軸】
},
series: [
{
name: '康師傅',
data: yDataArr,
type: 'line'
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
- 堆疊圖
10.折線圖的常見效果_堆疊圖.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
var yDataArr2 = [2000, 3800, 1900, 500, 900, 1700, 2400, 300, 1900, 1500, 1800, 200]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value',
},
series: [
{
type: 'line',
data: yDataArr,
stack: 'all', // 堆疊圖的設置 【堆疊圖的stack的值要一樣】
areaStyle: {}
},
{
type: 'line',
data: yDataArr2,
stack: 'all', // 堆疊圖的設置 【堆疊圖的stack的值要一樣】
areaStyle: {}
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
