1.将如下数据转换为柱状图，并且标记最大值和最小值以及平均值。
效果图：
代码展示：
案例分析：
- 准备x轴和y轴的数据（xAxis为x轴角色，yAxis为y轴角色）
- 将series中的type设置为bar
- 标记点：最大值、最小值（markPoint）
- 标记线: 平均值(markLine)
- 数值显示：label
- 调节柱子的宽度：barWidth
配置选项对照视图：
如果我们需要横向柱状图只需要如此：更换xAxis和yAxis轴角色即可实现。
xAxis:{ //X轴
type:'value' //数值轴
},
yAxis:{
type:'category', //类目名称
data: this.xDataArr
},
柱状图特点：柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图可以清晰地看出每个分类数据的排名情况。
图表通用配置：任何图表皆可使用的配置（常用四类）
- title:图表标题组件，显示大字标题、
- tooltip:提示框组件，增强用户体验，增加用户提示，当用户鼠标滑至或点击图表时弹出显示库，显示出阅读帮助信息。
- toolbox:工具按钮组件
- legend：图例组件
1.title标题组件：
控制文字样式：textStyle
控制文字标题位置：left-top-bottom-right
控制标题边框：borderColor-borderRadius-borderWidth
以下内容皆配置在option对象下
//标题组件
title:{
text: '成绩展示',
textStyle:{ //标题样式
color: 'green'
},
borderColor: '#ee3' ,//边框颜色
borderRadius: 5, //边框圆角
borderWidth: 5 ,//边框宽度
left:100,
top:10
},
2.tooltip提示框组件：
- 触发类型：trigger
item：鼠标必须要移入到每条柱子上才显示提示信息。
axis：鼠标只要移入坐标轴就显示提示信息。
tooltip:{
//trigger:'axis'
trigger:'item'
},
item 和 axis
值得注意的是：提示框里面的“语文”字样展示的是在series配置里的name属性
- 触发时机：triggerOn
click:用户点击柱子的时候才显示提示框内容
mouseover:默认方式，用户鼠标滑过时显示提示框内容
tooltip:{
trigger:'item',
triggerOn: 'click'
},
- 格式化数据展示：formatter（在提示框中个性化展示你想输出给用户看的数据，一般搭配字符串模板进行使用，也可以用函数的形式）
但新手看了让人很懵，完全不知道说啥，谁替换谁分不清。
abc三个模板分别对应代码中的位置
abc三个模板分别对应图标视图中的位置
案例演示：
tooltip:{
trigger:'item',
triggerOn: 'click',
formatter: '{b}的成绩是{c}分'
},
以回调函数输出格式化字符串：
tooltip:{
trigger:'item',
triggerOn: 'click',
// formatter: '{b}的成绩是{c}分',
formatter:(argv) => {
console.log(argv) //打印出一个数组
return `${argv.name}的成绩是${argv.data}`
}
},
打印出argv的参数
3.toolbox工具栏组件：由echarts官方提供，内置有导出图片（下载到本地）、数据视图（查看和修改原生数据）、动态类型图表的切换、数据区域显示缩放与还原、数据还原重置等五个工具供用户使用。
toolbox:{
//显示工具栏按钮
feature:{
saveAsImage:{} ,//开启下载功能，将图表以图片的形式下载下来存储到本地
dataView:{}, //开启视图展示功能，方便查看原生数据和修改原生数据
restore:{}, //开启重置视图功能，恢复
dataZoom:{}, //开启视图缩放功能以及恢复功能，选中图表进行缩放
magicType:{ //开启图表的动态类型转换功能
type:['bar','line'] //柱状图与折线图的切换
}
}
},
功能展示：
图片下载
数据视图修改与重置
区域缩放与还原
动态图表切换
4.legend：图例组件，用于筛选series系列数组里面的对象，legend组件需要搭配series使用
legend中的data是一个数组，legend中的data的值必须要和series数组中的某组数据的name值保持一致，不然无法显示图例组件
效果图：
图例展示
完整代码：