legend:图例，用于筛选系列，需要和series配合使用
legend中的data是一个数组
legend中的data的值需要和series数组中某组数据的name值一致
代码
<!--
1.ECharts最基本的代码结构
2.x轴数据：['张三'，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’]
3.y轴数据：[88,92,63,77,94,80,72,86]
4.将type的值设置为bar
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var mCharts= echarts.init(document.querySelector('div'))
var xDataArr=['张三','李四','王五','闰土','小明','茅台','二妞','大强']
var yDaraArr1=[70,92,85,89,77,90,87,98]
var yDaraArr2=[76,82,85,89,79,90,80,98]
var option={
title:{
text:'成绩展示',
textStyle:{
color:'blue'
},
borderWidth:5,
borderColor:'blue',
borderRadius:5,
left:30,
top:10
},
tooltip:{
trigger:'axis',
triggerOn:'click',
// formatter:'{b}的成绩时{c}'
formatter:function(arg){
return arg[0].name+'的分数是'+arg[0].data
}
},
toolbox:{
feature:{
saveAsImage:{},//导出图片
dataView:{}, //数据视图
restore:{} , //数据重置（还原）
dataZoom:{}, //区域缩放
magicType:{//图表切换
type:['bar','line']
}
}
},
legend:{
data:['语文','数学']
},
xAxis:{
type:'category' ,//类目轴
data:xDataArr
},
yAxis:{
type:'value' ,//数值轴
},
series:[
{
name:'语文',
type:'bar', //bar是柱状图，line是线状，pie是饼状
data:yDaraArr1
},
{
name:'数学',
type:'bar',
data:yDaraArr2
}
]
}
//步骤5：将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>
通用配置指的是任何一种类型的图表都可以使用的配置。
1583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
