欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

echarts day01

程序员文章站 2022-06-08 13:23:04
...

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

图例:

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();
  });
相关标签: java echarts