echarts
柱状图
series中的type设置为bar
柱状图.png
柱状图 常见效果
最大值 最小值 平均值
- markPoint 最大值 最小值
markPoint: {
data: [
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最小值'
}
]
},
- martLine 平均值
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
数值的显示 柱宽度 横向柱状图
- label 数值的显示
label: {
show: true, //数值显示
rotate: 20, //旋转角度
position: 'inside' //显示位置
},
position参数可查官网Documentation - Apache ECharts
image.png
- barWidth 柱宽度
barWidth: '50%', //柱宽度
- 更改x轴和y轴的角色 横向柱状图
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: xDataArr
}
柱状图特点
- 柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，可以很清晰的看出每个分类数据的排名情况。
示例代码：
<!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 = ['张三', '李四', '王五', '大明', '小明', '大妞', '二妞', '大强']
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, //数值显示
rotate: 20, //旋转角度
position: 'inside' //显示位置
},
barWidth: '50%', //柱宽度
data: yDataArr
}
]
}
myCharts1.setOption(options1)
</script>
</body>
</html>
折线图
series中的type设置为line
折线图.png
折线图 常见效果
标记：最大值 最小值 平均值 标注区间
- markPoint 最大值 最小值、martLine 平均值 （使用同柱状图一样）
- 标注区间 markArea
使用方法如下代码：
markArea: {
data: [
[
{
xAxis: '1月'
},
{
xAxis: '3月'
}
],
[
{
xAxis: '5月'
},
{
xAxis: '7月'
}
],
]
},
image.png
线条控制：平滑 风格
- 平滑 smooth
smooth: true, //平滑
显示效果如下：
image.png
- 风格 lineStyle
lineStyle: {
color: 'green',
type: 'dashed' //dashed 虚线, dotted 点状线, solid 实线
}
image.png
填充风格 areaStyle
areaStyle: {
color: 'pink'
},
image.png
紧挨边缘 boundaryGap
- boundaryGap（ 让类别中的第一个元素紧挨y轴，设置给类目轴）
xAxis: {
type: 'category',
data: xDataArr,
boundaryGap: false //默认值为true,不紧挨
},
image.png
缩放：脱离0值比例 scale （ 设置给数值轴）
yAxis: {
type: 'value',
scale: true
},
image.png
堆叠图 stack
堆叠图是指多个系列的数据在同个类目轴上（同一X轴位置）进行叠加显示多系列数据和的柱状图或折线图（面积图）。堆叠图一般用在不追求突出两个或多个系列数据之间的差异性，而更关注于多系列数据的和在不同个类目轴上（不同X轴位置）的差异。
使用ECharts实现堆叠图非常简单容易，只需在配置信息series添加属性stack就可以实现堆叠图。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: '统一',
data: yDataArr2,
stack:'all',
areaStyle: {},
}
]
image.png
折线图特点
- 折线图常用来分析数据随时间的变化趋势
示例代码如下：
<!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 点状线, solid 实线
},
areaStyle: {
color: 'pink'
},
data: yDataArr1,
stack:'all'
},
{
type: 'line',
name: '统一',
data: yDataArr2,
stack:'all',
areaStyle: {},
}
]
}
myCharts.setOption(options)
</script>
</body>
</html>
