0

定义echartdom结构

<div class="output-comparison">
        <p class="tip">各码头产量情况对比</p>
        <div class="ech">
          <div id="compire"></div>
        </div>
      </div>

css样式

.output-comparison {
    width: 100%;
    height: 34%;
    background-image: url('../img/screen/box_2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}
.ech {
    width: 100%;
    height: 88%;
    padding-left: 10px;
    padding-top: 10px;
    box-sizing: border-box;
}
#compire {
    color: #ffffff;
    position: relative;
    bottom: 50px;
    width: 100%;
    height:119%;
    margin: 0 auto;
    margin-top: 0 !important;
}
#compire>div>canvas{
    position:relative;
    /*top: 24px !important;*/
}

表格配置

var myChart2 = echarts.init(document.getElementById("compire"));

var option2 = {
    tooltip: {},
    legend: {
      data: ["销量"]
    },

    xAxis: {
      axisLine: {
        symbol: ["none"],
        lineStyle: {
          color: "#5584b5",
          width: 1
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ffffff", //更改坐标轴文字颜色
          fontSize: 14 //更改坐标轴文字大小
        }
      },
      data: []
    },

    yAxis: {
      type: "value",

      splitLine: {
        show: true,
        lineStyle: {
          color: "#5584b5",
          width: 1
        }
      },
      axisLine: {
        lineStyle: {
          color: "none" //更改坐标轴颜色
        }
      },
      axisLabel: {
        show: true,
        default: 16,
        textStyle: {
          color: "#ffffff", //更改坐标轴文字颜色
          fontSize: 14 //更改坐标轴文字大小
        }
      }
    },
    series: [
      {
        symbol: "none", //这句就是去掉点的
        type: "bar",
        barWidth: 30, //柱图宽度
        data: [],
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#FEBA00"
              },
              {
                offset: 1,
                color: "#DE8D08"
              }
            ])
          }
        }
      }
    ]
  };

360浏览器下显示的情况

clipboard.png

chrom下显示情况

clipboard.png
因为监听了resize方法 所以改变浏览器大小之后 又变成了这样

clipboard.png

想要在所有浏览器下显示都正常 不变形 请问哪里出了问题 应该如何修改

KenOscar 689
7月2日提问
2 个回答
0

已采纳

........

0

你用grid配置来设置距离盒子的上下左右间距,看看行不行

撰写答案

推广链接