Echarts
- 柱状图 bar
- 折线图 lines
- 散点图 scatter/effectScatter
- 饼图 pie
- 地图 map
- 雷达图 radar
- 仪表盘图 gauge
柱状图
常见效果
标记:最大值 最小值 平均值
显示:数值显示 柱宽度 横向柱状图
var xDataArr = ['张三','李四','王五','小猪']
var yDataArr = [88,98,70,86]
this.option1={
//横向柱状图----将xAxis和yAxis调转
yAxis:{
type:'category',
data:xDataArr
},
xAxis:{
type:'value'
},
series:[
{
name:'语文',
type:'bar',
//最大值,最小值
markPoint:{
data:[
{
type:'max',name:'最大值'},
{
type:'min',name:'最小值'}
]
},
//平均值
markLine:{
data:[
{
type:'average',
name:'平均值'
}
]
},
//数值显示----将数据显示在图中
label:{
show:true,
rotate:60,//数据旋转
position:'inside', //在图表内部
},
//柱宽度
barWidth:35,
data:yDataArr
},
]
}
通用配置
- 标题 title
- 提示 tooltip
- 工具按钮 toolbox
- 图例 legend
通用配置title
- 文字样式
- 标题边框
- 标题位置
tooltip
tooltip:提示框组件,用于配置鼠标滑过或点击图标时的显示框
- 触发类型:trigger :item,axis
- 触发时机:triggerOn: mouseover,click
- 格式化:formatter
字符串模板
回调函数
toolbox
toolbox: Echarts提供的工具栏
增加feature功能
内置的功能:
- 导出图片
- 数据视图
- 动态类型切换
- 数据区域缩放
- 重置
legend
legend:图例,用于筛选系列,需要和series配合使用
- legend中的data是一个数组
- legend中的data的值需要和series数组中某数据的name值一致
效果图:
var xDataArr = ['张三','李四','王五','小猪']
var yDataArr1 = [88,98,70,86]
var yDataArr2 = [82,68,98,76]
this.option1={
//标题
title:{
text:'成绩展示',
//文字样式
textStyle:{
color:'red'
},
//标题边框
borderWidth:5,
borderColor:'blue',
barBorderRadius:5,
//标题位置
left:50,
top:10
},
//提示框
tooltip:{
trigger:'axis', //触发类型---item鼠标移入柱内部,axis只要在这个轴上就可
triggerOn:'click',//触发时机---默认鼠标滑动上去即可(mouseover),click点击才可
// formatter:'{b}的成绩是{c}'
formatter:function(arg){
console.log(arg)
return arg[0].name + '的分数是:' + arg[0].data
}
},
//toolbox--工具栏
toolbox:{
//添加功能节点
feature:{
saveAsImage:{
},//下载(导出)图片功能
dataView:{
},//数据视图
restore:{
}, //重置按钮
dataZoom:{
},//区域缩放
//图表类型切换
magicType:{
type:['bar','line']
}//动态图标类型的切换
}
},
legend:{
data:['语文','数学']
},
//横向柱状图----将xAxis和yAxis调转
xAxis:{
type:'category',
data: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,//数据旋转
position:'inside', //在图表内部
},
//柱宽度
barWidth:35,
data:yDataArr1
},
{
name:'数学',
type:'bar',
data:yDataArr2
}
]
}
折线图
常见效果:
-
标记:最大值 最小值 平均值 标注区间
-markPoint, markLine markArea -
线