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}`
}
},
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>