关于echarts的一些问题

BoudaryGap:在坐标轴的起始部分是否需要间隔,默认是有间隙,需要改为false才能实现无间隔

grid:{
    left:'3%',
    top: '35%',
    right:'4%',
    bottom:'1%'  ,
    containLabel:true    
},

ContainLabel:在设置坐标轴外边距的时候是否包含文字,默认是不包含,需要将属性改为true才能实现包含文字

xAxis:{
    data:t{},
    boundaryGap:false
}  

tooltip:当鼠标移动时会出现提示

tooltip:{
        show:true,
         formatter:arg=>{//当工具提示的时候改变文字
                            const thirdCategory=arg.data.children
                                let total =0
                                thirdCategory.forEach(item=>{
                                   total+= item.value
                                })
                                let retStr =''
                                thirdCategory.forEach(item=>{
                                    retStr +=`${item.name}:${parseInt(item.value/total*100)+'%'}<br>`
                                })
                                return retStr

                            }
     }

lengend:关于图例的内容以及样式设置

legend:{
    data:legendArr  ,
    left:20,
    top:"15%",
   icon:'circle' //图标为圆形
},

tooltips:工具提示

tooltiops:{
  show:true
}

dataZoom:区域显示拖动条
在这里插入图片描述

  dataZoom:{
               show:true  ,
               startValue:0,
               endValue:9,
                      }         

饼图(pie)高亮显示文字效果实现

   label:{
                                show:false//不显示文字
                            } ,
                            emphasis:{
                                label:{
                                    show:true//鼠标移入的时候显示文字
                                }            ,
                                labelLine:{
                                    show:false //不显示线条
                                }

饼图的圆心向下调整:
利用series的center属性

 series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: 32.8, name: '1项'},
                                {value: 22.4, name: '2项'},
                                {value: 16.5, name: '3项'},
                                {value: 10.6, name: '4项'},
                                {value: 13.9, name: '6项及以上'},
                                {value: 3.8, name: '5项'}
                            ],
                         center:['50%','65%'] //在这里
                         ]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值