4.legend组件
教程依赖的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>legned组件</title>
<style>
#echarts{
height: 500px;
width: 800px;
}
</style>
</head>
<body>
<div id="echarts"></div>
<script src="./js/echarts.js"></script>
<script>
// console.log(echarts);
var myecharts=echarts.init(document.getElementById( echarts ));
myecharts.setOption({
title:{
text: 销量
},
legend:{//图例组件，所有图例相关的内容都放在这里,图例是用来展示系列相应的数据的，所以图例与系列是一一对应的
show:true,//是否显示图例，默认为true
data:[ 昨日销量 , 今日销量 , 明日销量 ],//legend组件默认要设置一个data,与series重的name一一对应，但即使没有data，如果系列中存在name，图里也会展示出来
type: plain ,//图例的类型,默认为plain， scroll ：可滚动翻页的图例。当图例数量较多时可以使用。
// left: auto ,//图例组件离容器左侧的距离。可以是百分比，可以是20px像素值，也可以是left/right表明位置的值
orient: horizontal ,//图例列表的布局朝向。 vertical :垂直，horizontal：水平
padding:[10,20],//图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。可以用数组设置上右下左的padding值，数组可以有两个到四个值
itemGap:10,//图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。默认为10px
itemWidth:30,//图例标记的图形宽度。
itemHeight:30,//图例标记的图形高度。
itemStyle:{//图例的图形样式。其属性的取值为 inherit 时，表明继承系列中的属性值。
color:inherit,//图形的颜色。支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充，具体见option.color
borderColor:inherit,//图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
borderWidth:auto,//当其值为 "auto" 时，如果系列有 borderWidth 取 2，如果系列没有 borderWidth 则取 0。当其值为 "inehrit" 时，始终取系列的 borderWidth
borderType:inherit,//描边类型。可选值 solid , dashed , dotted
borderDashOffset:inherit,//用于设置虚线的偏移量，可搭配 borderType 指定 dash array 实现灵活的虚线效果。
borderCap:inherit,//用于指定线段末端的绘制方式， butt : 线段末端以方形结束。 round : 线段末端以圆形结束。 square : 线段末端以方形结束，但是增加了一个宽度和线段一样，高度是线段厚度一半的矩形区域。
borderJoin:inherit,/*用于设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。
可以是：
bevel : 在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
round : 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
miter : 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 borderMiterLimit 属性看到效果。
默认值为 bevel 。 更多详情可以参考 MDN lineJoin。*/
borderMiterLimit:10,/*用于设置斜接面限制比例。只有当 borderJoin 为 miter 时， borderMiterLimit 才有效。默认值为 10。负数、0、Infinity 和 NaN 均会被忽略。*/
shadowBlur:10,// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
/*
{
shadowColor: rgba(0, 0, 0, 0.5) ,
shadowBlur: 10
*/
shadowColor: #ccc ,//阴影颜色。支持的格式同color。
shadowOffsetX:10,//阴影水平方向上的偏移距离。
shadowOffsetY:20,//阴影垂直方向上的偏移距离。
opacity:inherit,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
decal:inherit,/*图形的贴花图案，在 aria.enabled 与 aria.decal.show 都是 true 的情况下才生效。如果为 none 表明不使用贴花图案。所有属性
{ symbol , symbolSize , symbolKeepAspect , color , backgroundColor , dashArrayX , dashArrayY , rotation , maxTileWidth , maxTileHeight }*/
}
},
xAxis:{
data:[ banana , apple , lemmon , orange ]
},
yAxis:{},
series:[
{
name: 昨日销量 ,//当name属性不存在时，图例中的show为true，也不会显示图例
type: bar ,
data:[1,2,1,3]
},
{
name: 今日销量 ,//当name属性不存在时，图例中的show为true，也不会显示图例
type: bar ,
data:[2,3,1,5]
},
{
name: 明日销量 ,//当name属性不存在时，图例中的show为true，也不会显示图例
type: bar ,
data:[1,2,1,3]
}
]
})
</script>
</body>
</html>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
