设置echarts统计图文字随屏幕变化而变化---自适应

<div style="width:100%,height:100vh" id="echartsId"></div>

//通过宽度自适应
function fontSize(res){
        let docEl = document.documentElement,
          clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 1920);
        return res*fontSize;
    }

//通过高度自适应
function fontHeight(res){
        let docEl = document.documentElement,
          clientHeight = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
        if (!clientHeight) return;
        let fontSize = 100 * (clientHeight / 1080);
        return res*fontSize;
    }
var myChart = echarts.init(document.querySelector('#echartsId'));
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      textStyle: {
        //color: ycolor[0], //y轴字体颜色
        color:'#8eb0f3', //y轴字体颜色
        // fontSize: '14'//设置y轴字体大小
        fontSize:fontSize(0.14)
      }
    },
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};
myChart.setOption(option);


猜你喜欢

转载自blog.csdn.net/qq_45404003/article/details/122087804
今日推荐