javascript - 关于echarts图像中的条形图和饼状图的样式问题

问题描述

问 题

请教大神，上图是我们要求实现的最终效果，但是我目前demo只实现了下图中的效果，那么问题来了：
1、怎么在下图一中（条形图），每个条形图的最后添加数字啦？
2、怎么去掉饼状图外每一部分的文字说明（参考上图中没有的），并且在饼状图中显示百分比啦？

解决方案

第一个问题： itemStyle这段加上试试看

    {
        name:'2012年',
        type:'bar',
        itemStyle: {
            normal: {
                label : {
                    show: true, 
                    position: 'right',
                    
                    formatter: function (params) {
                      console.log(params)//这里输出params所有参数 需要什么下面自己拼
                        return params.name + params.data;
                    },
                    
                    textStyle: {
                        color: 'tomato'
                    }
                }
            }
        },
        data:[19325, 23438, 31000, 121594, 134141, 681807]
    }
    

第二个问题：找到series这段,在里追加itemStyle这段 如下

series : [        
{
        name:'访问来源',
        type:'pie',
        radius : '55%',
        center: ['50%', '60%'],
        data:[
            {value:335, name:'直接访问'},
            {value:310, name:'邮件营销'},
            {value:234, name:'联盟广告'},
            {value:135, name:'视频广告'},
            {value:1548, name:'搜索引擎'}
        ],
        itemStyle : {
              normal : {
                  label : {
                      position : 'inner',
                      formatter : function (params) {                         
                        return (params.percent - 0).toFixed(0) + '%'
                      }
                  },
                  labelLine : {
                      show : false
                  }
              }
          }
    }]

这篇关于javascript - 关于echarts图像中的条形图和饼状图的样式问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！