1.将如下数据转换为柱状图，并且标记最大值和最小值以及平均值。
效果图：
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./JS/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="./JS/echarts.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div id="main" style="width: 400px;height: 400px;">
</div>
</div>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data(){
return {
xDataArr:['张三','李四','王五','闰土','小明','茅台','二妞','大强'],
yDataArr:[88,92,63,77,94,80,72,86],
}
},
mounted() {
//初始化echarts实例
const myChart = echarts.init(document.getElementById('main'))
const option = {
xAxis:{ //X轴
type:'category', //类目名称
data: this.xDataArr
},
yAxis:{
type:'value' //数值轴
},
series:[
{
name:'语文',
type:'bar',
markPoint:{ //标记点:标记出最大值和最小值
data:[
{
type:'max',
name:'最大值'
},
{
type:'min',
name:'最小值'
}
]
},
markLine:{ //标记线：平均线
data:[
{
type:'average',
name: '平均值'
}
]
},
label:{
show:true, //每条柱子的数值显示
rotate: 60 ,//数值旋转60度显示
position: 'inside', //数值显示在柱子的哪个位置，top为柱子的顶部，inside为柱子内部
},
barWidth:'40%', //调节柱子的宽度
data: this.yDataArr
}
]
}
myChart.setOption(option) //指定的配置项和数据显示图表
}
})
</script>
</body>
</html>
案例分析：
- 准备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值保持一致，不然无法显示图例组件
效果图：
图例展示
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./JS/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="./JS/echarts.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div id="main" style="width: 600px;height: 400px;">
</div>
</div>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data(){
return {
xDataArr:['张三','李四','王五','闰土','小明','茅台','二妞','大强'],
yDataArr1:[88,92,63,77,94,80,72,86], //语文成绩
yDataArr2:[81,72,33,47,54,40,82,66], //数学成绩
}
},
mounted() {
//初始化echarts实例
const myChart = echarts.init(document.getElementById('main'))
const option = {
//标题组件
title:{
text: '成绩展示',
textStyle:{ //标题样式
color: 'green'
},
borderColor: '#ee3' ,//边框颜色
borderRadius: 5, //边框圆角
borderWidth: 5 ,//边框宽度
left:10,
top:10
},
tooltip:{
trigger:'item',
triggerOn: 'click',
// formatter: '{b}的成绩是{c}分',
formatter:(argv) => {
console.log(argv) //打印出一个数组
return `${argv.name}的成绩是${argv.data}`
}
},
toolbox:{
//显示工具栏按钮
feature:{
saveAsImage:{} ,//开启下载功能，将图表以图片的形式下载下来存储到本地
dataView:{}, //开启视图展示功能，方便查看原生数据和修改原生数据
restore:{}, //开启重置视图功能，恢复
dataZoom:{}, //开启视图缩放功能以及恢复功能，选中图表进行缩放
magicType:{ //开启图表的动态类型转换功能
type:['bar','line'] //柱状图与折线图的切换
}
}
},
legend:{
data:['语文','数学']
},
xAxis:{ //X轴
type:'category', //类目名称
data: this.xDataArr
},
yAxis:{
type:'value' //数值轴
},
series:[
{
name:'语文',
type:'bar',
// markPoint:{ //标记点:标记出最大值和最小值
// data:[
// {
// type:'max',
// name:'最大值'
// },
// {
// type:'min',
// name:'最小值'
// }
// ]
// },
// markLine:{ //标记线：平均线
// data:[
// {
// type:'average',
// name: '平均值'
// }
// ]
// },
// label:{
// show:true, //每条柱子的数值显示
// rotate: 60 ,//数值旋转60度显示
// position: 'inside', //数值显示在柱子的哪个位置
// },
// barWidth:'40%', //调节柱子的宽度
data: this.yDataArr1
},
{
name:'数学',
type:'bar',
data: this.yDataArr2
}
]
}
myChart.setOption(option) //指定的配置项和数据显示图表
}
})
</script>
</body>
</html>
网友评论