Echarts柱状图基本实现和常见效果

3.2Echarts图表相关配置项学习目标Echarts5.0图表常用配置项Echarts5.0柱状图常用配置项132知识思政技能能主动查阅Echarts5.0官方文档解决绘制中的问题能熟练使用图表常用配置项数据兴农的责任民族自豪感一、图表相关配置项相关配置：xAxis:直角坐标系中的X轴yAxis:直角坐标系中的y轴series:系列列表。每个系列通过type决定图表类型一、图表相关配置项var

options={

title:{//标题

text:"大数据可视化成绩",

textStyle:{

color:'red',

fontSize:14

},

subtext:'大数据2302班',

subtextStyle:{

fontSize:10

},

left:'50%',

textAlign:'center'

},

xAxis:{//x轴

type:‘category’,//类目轴，需要指明类别

data:['张笑','孙康','史可']//呈现在x轴的类别

},

yAxis:{//y轴

type:‘value’//表明y轴为数值轴，设置为value后，自动从series对象的data中为x轴的类别找对应的数据

},

series:[{//给y轴提供数据的

type:‘bar’,//图表类型为柱状图，换成linepie

data:[60,100,75]//图表系列柱的数据

}]

}二、查阅官方文档官网网址：/zh/index.html二、查阅官方文档

link:"",二、查阅官方文档官方文档很重要！1、点开键，查看含义

2、看对应的值是什么类型遇到忘记的配置项，主动查阅文档，按说明编写代码。随堂测试3：ECharts数据可视化图表中______方法用于设置图表的选项Echarts柱状图基本实现和常见效果学习内容柱状图的标记柱状图的数值显示柱状图的柱子宽度横向柱状图Echarts的7大图表：柱状图折线图散点图饼图地图雷达图仪表盘图一、柱状图的基本实现和常见效果基本实现varxDataArr=['2018','2019','2020','2021','2022','2023']varyDataArr=[320,350,300,380,450,500]varoptions={xAxis:{type:'category',data:xDataArr},yAxis:{type:'value'},series:[{name:'蜂胶产量',type:'bar',data:yDataArr}]}一、柱状图的基本实现和常见效果常见效果标记：最大值最小值平均值markPointmarkLine实现过程为：在series下增加markPoint对象,设置该对象的data键值对。data的值为数组，数组中包含最大值和最小值两个对象，分别设置type和name。markPoint:{data:[{type:'max',name:'最大值'},{type:'min',name:'最小值'}]},增加markLine对象markLine:{data:[{type:'average',name:'平均值'}]},一、柱状图的基本实现和常见效果常见效果数值显示柱宽度横向柱状图在series下增加label对象，设置show的值为true。label:{show:true},

rotate:60一、柱状图的基本实现和常见效果常见效果数值显示柱宽度横向柱状图一、柱状图的基本实现和常见效果常见效果数值显示柱宽度横向柱状图在series下增加barWidth对象设置值为百分比。barWidth:'30%',一、柱状图的基本实现和常见效果常见效果数值显示柱宽度横向柱状图互换x轴和y轴

xAxis:{

type:'value',

},

yAxis:{

type:'category',

data:xDataArr

},一、柱状图的基本实现和常见效果思考：查阅官方文档，为图表设置标题，居中。给x轴增加名称：(年份)，给y