Echarts饼图显示数值和百分比

Echarts 饼图显示名称,数值和百分比
Echarts饼图显示数值和百分比_第1张图片
核心:

series : [ {
  name:'',
  type : 'pie',
  radius : '65%',
  center : [ '50%', '50%' ],
  //重点
  label : {
    normal : {
      formatter: '{b}:{c}: ({d}%)',
      textStyle : {
        fontWeight : 'normal',
        fontSize : 15
      }
    }
  },
  data:[],
  itemStyle : {
    emphasis : {
      shadowBlur : 10,
      shadowOffsetX : 0,
      shadowColor : 'rgba(0, 0, 0, 0.5)'
    }
  }
} ]

实例:

 var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} 
{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', top:'20%', data: [] }, series : [ { name: '案件数量', type: 'pie', radius : '65%', center: ['50%', '50%'], data:[], label : { normal : { formatter: '{b}:{c}: ({d}%)', textStyle : { fontWeight : 'normal', fontSize : 15 } } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; function getChart(title){ myChart.showLoading(); //loading动画 $.ajax({ type : "post", async : true, url : "chart", data:{"mtime":$("#mtime").val(),"come":$("#come").val(),"show":$("#show").val()}, dataType:"json", success:function(res) { if(res.success){ console.log(res.data); myChart.hideLoading(); myChart.setOption({ //加载数据图表 series: [{ // 根据名字对应到相应的系列 data: res.data.data }], legend: { data: res.data.name }, }); } else{ layer.msg(res.message); } }, error : function(errorMsg) { //请求失败时执行该函数 myChart.hideLoading(); } }); myChart.setOption(option, true); }

你可能感兴趣的:(echarts,前端)