echarts day01

解决环形图文字不自适应问题

图例：

html：

<div style="height: 350px;" id="div_consistencyCheck"></div>

js：

var charts = echarts.init(document.getElementById('div_consistencyCheck'));
  //动态数据      总条数 : 100  通过批次数 :95
  var objData = {total: "100", qualifiedCount: "95"};
  var option = {
    tooltip: {
      trigger: 'item',
      formatter: "{b}: {c} ({d}%)"
    },
    color: ['#408ca8', 'red'],
    title: {	                                        // 标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题
      text: '提交总批次数:' + objData.total +
          '   通过批次数:' + objData.qualifiedCount + '',
      x: 'center',                                     //标题位置 左右居中
      y: 'bottom',                                     //上下左右居中
      textStyle: {                                     //字体样式
        fontSize: $(window).width() * 0.01,            //字体大小为 浏览器的宽度的0.01
        fontWeight: 'bold',                            //主标题文字字体的粗细可选：'normal''bold''bolder''lighter'
        color: 'black'                                 //字体颜色
      }
    },
    //另一种在环中间加标题
    /*graphic: [{ // 环形图中间添加文字
      show: false,
      type: 'text', // 通过不同top值可以设置上下显示
      left: 'center',
      top: '47%',
      style: {
        text: "通过率", //（自己设置显示内容）,
        textAlign: 'center',
        fill: '#212529', // 文字的颜色
        fontFamily: 'Microsoft YaHei',
        fontSize: $(window).width() * 0.01,
        fontStyle: 'bold'
      }
    }, {
      show: false,
      type: 'text',
      left: 'center',
      top: '52%',
      style: {
        text: ((parseInt(objData.qualifiedCount) / parseInt(objData.total)) * 100) + '%',
        textAlign: 'center',
        fill: "c51200",
        fontFamily: 'Microsoft YaHei',
        fontSize: $(window).width() * 0.01,
        fontStyle: 'bold'
      }
    }],*/

    series: [
      {
        //name: '访问来源',
        type: 'pie',	                    // 形状：bar|柱形;pie|圆形
        radius: ['56%', '70%'],             // 环的大小
        avoidLabelOverlap: false,           // 是否启用防止标签重叠策略,默认默认开启)
        hoverAnimation: true,               //是否开启 hover 在扇区上的放大动画效果。
        silent: false,                      //坐标轴是否是静态无法交互
        label: {                            // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
          normal: {                         //
            show: true,                     // 是否显示标签值
            position: 'center',             // 标签的位置。
            formatter: function () {
              return '通过率\n' + ((parseInt(objData.qualifiedCount) / parseInt(objData.total)) * 100) + '%'
            },
            textStyle: {
              fontSize: $(window).width() * 0.01,
              color: 'black'
            }
          }
        },
        data: [
          {value: parseInt(objData.qualifiedCount), name: '通过批次数'},
          {value: (parseInt(objData.total) - parseInt(objData.qualifiedCount)), name: '未通过批次数'}
        ]
      }
    ]
  };
  charts.setOption(option, true); //初始化渲染
  charts.resize();                //加载
  $(window).resize(function () {  // 浏览器窗口发生改变刷新Echarts图
    //动态设置主题文字大小   //字体设置为响应式的
    option.title.textStyle.fontSize = $(window).width() * 0.01; //环中间的字体
    option.series[0].label.normal.textStyle.fontSize = $(window).width() * 0.01;          //下面主题的字体
    //动态设置环中间文字大小
    //echartOption.graphic[0].style.fontSize = $(window).width() * 0.01;
    //echartOption.graphic[1].style.fontSize = $(window).width() * 0.01;
    charts.setOption(option, true);
    charts.resize();
  });