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

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

clipboard.png
clipboard.png

阅读 5.1k
3 个回答

第一个问题: 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
                  }
              }
          }
    }]

第一个做过,贴上代码看对你是否有帮助。

           yAxis : [
              {
                  type : 'value',
                            scale: true,  
                            show:false,  
                            splitLine:{  
                            show:false  
                           }  
              }
          ],
          series : [
              {
                  name:'pv(点击量)',
                  type:'bar',
                  itemStyle: {normal: {color:'#3398DB', label:{show:true}}},
                  data:data_pvT,
                  markPoint : {
                      data : [
                          // {type : 'max', name: '最大值'},
                          // {type : 'min', name: '最小值'}
                      ]
                  },
                  markLine : {
                      data : [
                          // {type : 'average', name: '平均值'}
                      ]
                  }
              },
              {
                  name:'uv(用户量)',
                  type:'bar',
                  itemStyle: {normal: {color:'#CF8E39', label:{show:true}}},
                  data:data_uvT,
                  markLine : {
                      data : [
                          // {type : 'average', name : '平均值'}
                      ]
                  }
              }
          ],
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏