echarts
柱狀圖
series中的type設(shè)置為bar
柱狀圖.png
柱狀圖 常見效果
最大值 最小值 平均值
- markPoint 最大值 最小值
markPoint: {
data: [
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
- martLine 平均值
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
數(shù)值的顯示 柱寬度 橫向柱狀圖
- label 數(shù)值的顯示
label: {
show: true, //數(shù)值顯示
rotate: 20, //旋轉(zhuǎn)角度
position: 'inside' //顯示位置
},
position參數(shù)可查官網(wǎng)Documentation - Apache ECharts
image.png
- barWidth 柱寬度
barWidth: '50%', //柱寬度
- 更改x軸和y軸的角色 橫向柱狀圖
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: xDataArr
}
柱狀圖特點(diǎn)
- 柱狀圖描述的是分類數(shù)據(jù)沛慢，呈現(xiàn)的是每一個(gè)分類中有多少，通過柱狀圖甸各，可以很清晰的看出每個(gè)分類數(shù)據(jù)的排名情況忽冻。
示例代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echarts</title>
<!-- 引入echarts.js文件 -->
<script src="lib/echarts.js"></script>
</head>
<body>
<div id="box1" style="width: 600px; height: 400px;"></div>
<script>
let myCharts1 = echarts.init(document.querySelector('#box1'))
let xDataArr = ['張三', '李四', '王五', '大明', '小明', '大妞', '二妞', '大強(qiáng)']
let yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
let options1 = {
yAxis: {
type: 'category',
data: xDataArr
},
xAxis: {
type: 'value'
},
series: [
{
name: '語文',
type: 'bar', //柱狀圖
// type: 'line', //折線圖
markPoint: {
data: [
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true, //數(shù)值顯示
rotate: 20, //旋轉(zhuǎn)角度
position: 'inside' //顯示位置
},
barWidth: '50%', //柱寬度
data: yDataArr
}
]
}
myCharts1.setOption(options1)
</script>
</body>
</html>
折線圖
series中的type設(shè)置為line
折線圖.png
折線圖 常見效果
標(biāo)記：最大值 最小值 平均值 標(biāo)注區(qū)間
- markPoint 最大值 最小值、martLine 平均值 （使用同柱狀圖一樣）
- 標(biāo)注區(qū)間 markArea
使用方法如下代碼：
markArea: {
data: [
[
{
xAxis: '1月'
},
{
xAxis: '3月'
}
],
[
{
xAxis: '5月'
},
{
xAxis: '7月'
}
],
]
},
image.png
線條控制：平滑 風(fēng)格
- 平滑 smooth
smooth: true, //平滑
顯示效果如下：
image.png
- 風(fēng)格 lineStyle
lineStyle: {
color: 'green',
type: 'dashed' //dashed 虛線, dotted 點(diǎn)狀線, solid 實(shí)線
}
image.png
填充風(fēng)格 areaStyle
areaStyle: {
color: 'pink'
},
image.png
緊挨邊緣 boundaryGap
- boundaryGap（ 讓類別中的第一個(gè)元素緊挨y軸雌团，設(shè)置給類目軸）
xAxis: {
type: 'category',
data: xDataArr,
boundaryGap: false //默認(rèn)值為true,不緊挨
},
image.png
縮放：脫離0值比例 scale （ 設(shè)置給數(shù)值軸）
yAxis: {
type: 'value',
scale: true
},
image.png
堆疊圖 stack
堆疊圖是指多個(gè)系列的數(shù)據(jù)在同個(gè)類目軸上（同一X軸位置）進(jìn)行疊加顯示多系列數(shù)據(jù)和的柱狀圖或折線圖（面積圖）燃领。堆疊圖一般用在不追求突出兩個(gè)或多個(gè)系列數(shù)據(jù)之間的差異性，而更關(guān)注于多系列數(shù)據(jù)的和在不同個(gè)類目軸上（不同X軸位置）的差異锦援。
使用ECharts實(shí)現(xiàn)堆疊圖非常簡(jiǎn)單容易猛蔽，只需在配置信息series添加屬性stack就可以實(shí)現(xiàn)堆疊圖。stack屬性值可以為任意字符串值灵寺，配置相同的stack值的系列可以堆疊放置曼库。
let yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86]
let yDataArr2 = [90, 85, 70, 75, 90, 85, 75, 80]
series: [
{
name: '白象',
type: 'line',
areaStyle: {
color: 'pink'
},
data: yDataArr1,
stack:'all'
},
{
type: 'line',
name: '統(tǒng)一',
data: yDataArr2,
stack:'all',
areaStyle: {},
}
]
image.png
折線圖特點(diǎn)
- 折線圖常用來分析數(shù)據(jù)隨時(shí)間的變化趨勢(shì)
示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折線圖</title>
<script src="lib/echarts.js"></script>
</head>
<body>
<div style="height: 400px; width: 600px"></div>
<script>
let myCharts = echarts.init(document.querySelector('div'))
let xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
let yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86]
let yDataArr2 = [90, 85, 70, 75, 90, 85, 75, 80]
let options = {
xAxis: {
type: 'category',
data: xDataArr,
boundaryGap: false
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
name: '康師傅',
type: 'line',
markPoint: {
data: [
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
markArea: {
data: [
[
{
xAxis: '1月'
},
{
xAxis: '3月'
}
],
[
{
xAxis: '5月'
},
{
xAxis: '7月'
}
],
]
},
smooth: true, //平滑
lineStyle: {
color: 'green', //線顏色
type: 'dashed' //dashed 虛線, dotted 點(diǎn)狀線, solid 實(shí)線
},
areaStyle: {
color: 'pink'
},
data: yDataArr1,
stack:'all'
},
{
type: 'line',
name: '統(tǒng)一',
data: yDataArr2,
stack:'all',
areaStyle: {},
}
]
}
myCharts.setOption(options)
</script>
</body>
</html>
