echart自适应问题

最新推荐文章于 2024-06-01 10:47:21 发布

田姐儿

最新推荐文章于 2024-06-01 10:47:21 发布

阅读量281

点赞数 2

文章标签： echart自适应问题

本文链接：https://blog.csdn.net/weixin_45690699/article/details/101541129

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

echart自适应问题

html

<body>    
     <div class="content">
        <div id="main" class="box1" ></div>
        <div id="main1" class="box2" ></div>
     </div>
</body>

css

body{
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
   
}
.content{
    position: relative;
    width: 100%;
    height: 100%;
    background: bisque
}
.box1{
    display: inline-block;
    width: 50%;
    height:50%;
}
.box2{
    display: inline-block;
    width: 50%;
    height: 50%;
    margin-left: -6px

}

function mainchart(){
    var resourceChart = echarts.init(document.getElementById('main'),'macarons'); //macarons主题
    var activeChart = echarts.init(document.getElementById('main1'),'macarons');

//折线图
var myChart = echarts.init(document.getElementById('main'));
var option = {
  //标题
    title: {
      text: '未来一周气温变化',
      // backgroundColor:'' , //标题背景颜色 
         
    },
    //线条颜色设置
    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
          offset: 0, color: 'red' // 0% 处的颜色
      }, {
          offset: 1, color: 'blue' // 100% 处的颜色
      }],
      globalCoord: false // 缺省为 false
  },
    tooltip: {},
    legend: {},//图例
    toolbox: {},      
    xAxis: [{         
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }],
    yAxis: {},
    series: [{
      name: '最高气温',
      type: 'line',
      data: [11, 11, 15, 13, 12, 13, 10]          
    },
    {
      name: '最低气温',
      type: 'line',
      data: [1, 2, 2, 5, 3, 2, 0]        
    }]
  };
  myChart.setOption(option);
//环形图
var myChart = echarts.init(document.getElementById('main1'));
var option = {
    //提示工具
  tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  //图例
  legend: {
      orient: 'vertical',
      x: 'left',
      data:['直达','营销广告','搜索引擎','邮件营销']
  },
  //数据
  series: [
      {
          name:'访问来源',
          type:'pie',
          selectedMode: 'single',
          radius: [0, '30%'],

          label: {
              normal: {
                  position: 'inner'
              }
          },
          labelLine: {
              normal: {
                  show: false
              }
          },
          data:[
              {value:335, name:'直达', selected:true},
              {value:679, name:'营销广告'},
              {value:1548, name:'搜索引擎'}
          ]
      },
      {
          name:'访问来源',
          type:'pie',
          radius: ['40%', '55%'],//环形饼图内圈和外圈大小
          
          label: {
              normal: {
                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                  backgroundColor: '#eee',
                  borderColor: '#aaa',
                  borderWidth: 1,
                  borderRadius: 4,
                  shadowBlur:3,
                  shadowOffsetX: 2,
                  shadowOffsetY: 2,
                  shadowColor: '#999',
                  padding: [0, 7],
                  rich: {
                      a: {
                          color: '#999',
                          lineHeight: 22,
                          align: 'center'
                      },
                      hr: {
                          borderColor: '#aaa',
                          width: '100%',
                          borderWidth: 0.5,
                          height: 0
                      },
                      b: {
                          fontSize: 16,
                          lineHeight: 33
                      },
                      per: {
                          color: '#eee',
                          backgroundColor: '#334455',
                          padding: [2, 4],
                          borderRadius: 2
                      }
                  }
              }
          },
          data:[
              {value:335, name:'直达'},
              {value:310, name:'邮件营销'},
              {value:234, name:'联盟广告'},
              {value:135, name:'视频广告'},
              
          ]
      }
  ]
};
myChart.setOption(option);
setTimeout(function (){
    window.onresize = function () {
        resourceChart.resize();//自适应
        activeChart.resize();//自适应
    }
},200)

}
mainchart()//调用函数很重要