网站制作学习网JS脚本→正文:echarts legend与图series的距离
字体:

echarts legend与图series的距离

JS脚本 2022/5/7 18:58:37  点击:不统计


在使用echars时,发现 图例中的标题 和图表中的数据有重叠了。
 
需要调整 legend与图series的距离,我们逐个来说。所有调整都在echarts中的option中
 
1.首先是标题距离,也就说图表title 的属性
title: {
    text: ‘标题’,
    top:0, //这里说标题距离顶整个图表顶部的距离
    left:'center’//标题剧中显示,可以left 可以right
},
 
2.调整 图例 到顶部的距离
legend: {
    data: [‘数据1’,’数据2’],
    top:”8%”//这是设置图例到顶部的距离。
},
 
3.调整 图表数据展示位置,也就是展示数据到顶部的位置
 
grid: {
    left: ‘3%’,//左边空闲3%
    right: ‘4%’,//右边空闲4%
    bottom: ‘3%’,//底部空闲 3%
    top:'25%’,//顶部空闲25% 用于展示标题 和图例,这里就是我们本文要调整的数据。
    containLabel: true

}, 

以上数据参考下面图例子说明:
echarts  legend与图series的距离



转www.载for网站制作学习asp必.cn究

·上一篇:JavaScript 时间戳转换为时间 >>    ·下一篇:Layui select  option 选中 >>
推荐文章
最新文章