Echarts-柱状图
- 步骤1 ECharts 最基本的代码结构
<!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')) // 初始化echarts实例对象
var option = {}
mCharts.setOption(option)
</script>
</body>
</html>
- 步骤2 准备x轴的数据
var xDataArr = ['张三','李四','王五','闰土','小明','茅台','二妞','大强',] // 准备x轴数据
- 步骤3 准备 y 轴的数据
var yDataArr = [88, 92, 63, 75, 94, 80, 70, 86]
- 步骤4 准备 option , 将 series 中的 type 的值设置为: bar
var option = {
xAxis: {
type: 'category',
data: xDataArr,
},
yAxis: {
type: 'value',
},
series: [
{
name: '语文',
type: 'bar',
data: yDataArr,
},
],
}
- 注意:
- 坐标轴 xAxis 或者 yAxis 中的配置, type 的值主要有两种:category 和 value ,
- 如果 type属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现.
- 如果 type 属性配置为 value ,那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制
效果如图:
image-20201128214257855
需求:设置柱状图的最大最小值
- 在series中设置markPoint
var option = {
xAxis: {
type: 'category',
data: xDataArr,
},
yAxis: {
type: 'value',
},
series: [
{
name: '语文',
type: 'bar',
markPoint: {
// 标记点
data: [
{
type: 'max',
name: '最大值',
},
{
type: 'min',
name: '最小值',
},
],
},
data: yDataArr,
},
],
}
效果:
image-20201128214636751
需求: 设置图标的平均值
- 在series中设置markLine
var option = {
xAxis: {
type: 'category',
data: xDataArr,
},
yAxis: {
type: 'value',
},
series: [
{
name: '语文',
type: 'bar',
markLine: {
// 标记线
data: [
{
type: 'average',
name: '平均值',
},
],
},
data: yDataArr,
},
],
}
效果
image-20201128215100362
需求: 设置柱状图的每个柱状图的值
- 在series中设置label
var option = {
xAxis: {
type: 'category',
data: xDataArr,
},
yAxis: {
type: 'value',
},
series: [
{
name: '语文',
type: 'bar',
markLine: {
// 标记线
data: [
{
type: 'average',
name: '平均值',
},
],
},
label: {
// 柱状图上的文字设置
show: true, // 是否显示
rotate: 60, // 旋转角度
position: 'top', // 显示位置
},
// barWidth: '30%', // 柱的宽度
data: yDataArr,
},
],
}
效果
image-20201128215335043
需求:横向柱状图
- 所谓的横向柱状图, 只需要让x轴的角色和y轴的角色互换一下即可. 既 xAxis 的 type 设置为value , yAxis 的 type 设置为 category , 并且设置 data 即可
var option = {
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: xDataArr,
},
series: [
{
name: '语文',
type: 'bar',
markPoint: {
// 标记点
data: [
{
type: 'max',
name: '最大值',
},
{
type: 'min',
name: '最小值',
},
],
},
markLine: {
// 标记线
data: [
{
type: 'average',
name: '平均值',
},
],
},
label: {
// 柱状图上的文字设置
show: true, // 是否显示
rotate: 60, // 旋转角度
position: 'top', // 显示位置
},
barWidth: '30%', // 柱的宽度
data: yDataArr,
},
],
}
效果
image-20201128215716224
Echarts通用配置
设置图标的标题样式title
<!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 = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var option = {
title: { // 标题设置
text: '成绩展示', // 标题文字
textStyle: { // 标题文字样式设置
color: 'red'
},
link: 'http://www.baidu.com', // 标题超链接
borderWidth: 5, // 标题边框宽度
borderColor: 'blue', // 标题边框颜色
borderRadius: 5, // 标题边框圆角
left: 50, // 标题距离左边的距离
top: 10 // 标题距离顶部的距离
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: yDataArr
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
效果:
image-20201128221013591
设置提示框 tooltip
- tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框
tooltip: { // 工具提示
// trigger: 'item' 工具提示的类型 item代表的是每个柱本身, axis代表的是坐标轴
trigger: 'axis',
triggerOn: 'click', // 触发时机, click代表点击, mouseOver代表鼠标移过
// formatter: '{b} 的成绩是 {c}'
formatter: function(arg){ // 文字格式化
return arg[0].name + '的分数是:' + arg[0].data
}
},
- formatter格式化配置
image-20201128221841175
效果如图
image-20201128221938095
配置图标的工具箱toolbox
- 在option中设置toolbox
var option = {
title: {
text: '成绩展示',
textStyle: {
color: 'red'
},
borderWidth: 5,
borderColor: 'blue',
borderRadius: 5,
left: 50,
top: 10
},
tooltip: {
// trigger: 'item'
trigger: 'axis',
triggerOn: 'click',
// formatter: '{b} 的成绩是 {c}'
formatter: function(arg){
return arg[0].name + '的分数是:' + arg[0].data
}
},
toolbox: { // 工具箱按钮
feature: {
saveAsImage: {}, // 导出图片
dataView: {}, // 数据视图
restore: {}, // 重置
dataZoom: {}, // 区域缩放
magicType: {
type: ['bar', 'line']
} // 动态图表类型的切换
}
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: yDataArr
}
]
}
效果
image-20201128222353614
设置图例 legend
- legend是图例,用于筛选类别,需要和series配合使用
- legend中的data是一个数组
- legend中data的值需要和series数组中某组数据的name一致
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
var yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86]
var yDataArr2 = [93, 60, 61, 62, 85, 79, 92, 30]
var option = {
title: {
text: '成绩展示',
textStyle: {
color: 'red'
},
borderWidth: 5,
borderColor: 'blue',
borderRadius: 5,
left: 50,
top: 10
},
tooltip: {
// trigger: 'item'
trigger: 'axis',
triggerOn: 'click',
// formatter: '{b} 的成绩是 {c}'
formatter: function(arg){
return arg[0].name + '的分数是:' + arg[0].data
}
},
toolbox: {
feature: {
saveAsImage: {}, // 导出图片
dataView: {}, // 数据视图
restore: {}, // 重置
dataZoom: {}, // 区域缩放
magicType: {
type: ['bar', 'line']
} // 动态图表类型的切换
}
},
legend: { // 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选
data: ['语文', '数学']
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: yDataArr1
},
{
name: '数学',
type: 'bar',
data: yDataArr2
}
]
}
效果:
image-20201128222820506
