echarts 饼图——用户文章使用标签数

暂无标签

Tag 模型

/* 用户使用标签统计 */
public static function user_tags_count($uid)
{
    $articles = Article::where('authorid',$uid)->get();
    $taglists = [];
    foreach($articles as $key=>$article){
        if($article->tags){
            $taglists[$key] = explode(',',$article->tags);
        }
    }
    if($taglists){
        foreach ($taglists as $key =>$v){
            $taglist[]=$v[0];
        }
        $taglist_unique = array_unique($taglist);
        $taglist_count = array_count_values($taglist);
        foreach($taglist_unique as $key=>$v){
            $tag_datas[$key]['name'] = Tag::where('id',$v)->first()->name;
            $tag_datas[$key]['value'] = $taglist_count[$v];
        }
        $tag_counts = array_column($tag_datas,'value');
        array_multisort($tag_counts,SORT_DESC,$tag_datas);
        foreach($tag_datas as $key=>$v){
            $tag_names[$key] = $v['name'];
        }
        return ['total'=>array_sum($taglist_count),'tagnames'=>$tag_names,'datas'=>$tag_datas];
    }else{
        return ['total'=>'0','datas'=>''];
    }
}

html

<div id="user_chart" data-username="{{$user->name}}"></div>

jq

外链地址:

https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js

另外:

$(document).ready(function(){
    var username = $("#user_chart").data('username');
    $.ajax({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url:'/u/'+username+'/tag_count',
        data:'',
        type:'get',
        cache:false,
        beforeSend: function () {
        //$("#user_chart").html('Loading...');
    },
    success: function (res) {
        $("#user_chart").html('<div class="card"><div class="card-body" id="user_chart_box" style="width:100%;height:200px;"></div></div>')
        if(res.total > 0){
            var myChart = echarts.init(document.getElementById('user_chart_box'));
                // 指定图表的配置项和数据
              var option = {
                  title: {//标题组件
                      text: '',
                      left:'0px',//标题的位置 默认是left,其余还有center、right属性
                      textStyle: {    
                      color: "#436EEE",    
                      fontSize: 17,   
                      }
                  },
                  
                  tooltip : { //提示框组件
                      trigger: 'item', //触发类型(饼状图片就是用这个)
                      formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
                  },
                  
                  //color:['#48cda6','#fd87fb','#11abff','#ffdf6f','#968ade'],  //手动设置每个图例的颜色
                  legend: {  //图例组件
                      //right:100,  //图例组件离右边的距离
                      orient : 'vertical',  //布局  纵向布局 图例标记居文字的左边 vertical则反之
                      width:40,      //图行例组件的宽度,默认自适应
                      height:120,
                      left:'200',
                      x : 'right',   //图例显示在右边
                      y: 'center',   //图例在垂直方向上面显示居中
                      itemWidth:10,  //图例标记的图形宽度
                      itemHeight:10, //图例标记的图形高度
                      data:res.tagnames,
                      textStyle:{    //图例文字的样式
                          color:'#333',  //文字颜色
                          fontSize:12    //文字大小
                      }
                  },
                  series : [ //系列列表
                      {
                          name:'标签使用次数',  //系列名称
                          type:'pie',   //类型 pie表示饼图
                          center:['10%','50%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                          radius : ['0%', '70%'],  //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                          itemStyle : {  //图形样式
                              normal : { //normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
                                  /*label : {  //饼图图形上的文本标签
                                      show : true,  //平常不显示
                                      position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                                      formatter:'{d}%',//饼图区块显示百分比,默认为名称
                                  },*/
                                  label : {  //饼图图形上的文本标签
                                      show : true,  //平常不显示
                                      position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                                      //formatter:'{d}%',//饼图区块显示百分比,默认为名称
                                      formatter: function (val) {
                                          console.log(val)
                                          if(val.percent > '10'){
                                              return val.name+'\n'+val.percent+'%';
                                          }else{
                                              return '';
                                          }
                                        }
                                  },
                                  labelLine : {     //标签的视觉引导线样式
                                      show : false  //平常不显示
                                  }
                              },
                              emphasis : {   //normal 是图形在默认状态下的样式;emphasis 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时。
                                  label : {  //饼图图形上的文本标签
                                      show : true,
                                      position : 'center',
                                      textStyle : {
                                          fontSize : '10',
                                          fontWeight : 'bold'
                                      }
                                  }
                              }
                          },
                          data:res.datas
                          
                      }
                  ]
              };
              myChart.setOption(option);
        }
    },
    error: function(res){
            errors = res.responseJSON.errors;
      var form_errors = '';
      $.each(errors, function(i) {
          form_errors += '<div>' + errors[i] + '</div>';
      });
      $('<div>').appendTo('').addClass('text-danger mt-2 small font-weight-bold').html(form_errors).show().delay(2000).fadeOut();
        }
    });
});

注意点:

1.百分比的判断和显示换行

formatter: function (val) {
    if(val.percent > '10'){
        return val.name+'\n'+val.percent+'%';
    }else{
        return '';
    }
}