SOURCE

// let

let chartDom = document.querySelector('#myDom');

// 图表容器宽高
const wi = 786;
const he = 704;
// Dom缩放 使得容器可视区域不过大或过小
let scale = 0;
if (wi > (he * 5 / 3)) {
    scale = Number((1 / (wi / 500)).toFixed(2));
} else {
    scale = Number((1 / (he / 300)).toFixed(2));
}
// console.log("容器缩放比例:",scale);

chartDom.style.width = `${wi}px`;
chartDom.style.height = `${he}px`;
chartDom.style.transform = `scale(${scale},${scale})`;

// console.log("容器到可是窗口顶部距离:",chartDom.getBoundingClientRect().top);
// console.log("容器到可是窗口左部距离:",chartDom.getBoundingClientRect().left);

chartDom.style.top = `${-(chartDom.getBoundingClientRect().top) + 10}px`;
chartDom.style.left = `${-(chartDom.getBoundingClientRect().left) + 10}px`;


// 图表具体内容
const myChart = echarts.init(chartDom);
let option;




option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};






option && myChart.setOption(option);

<!-- Echarts在线引入 -->
<script src="https://cdn.staticfile.org/echarts/5.3.2/echarts.min.js"></script>


<!-- 图表Dom -->
<div id="myDom"></div>

body{
position: relative;
width: 500px;
height: 300px;
}


#myDom {
    position: absolute;
    /* margin: auto; */
    width: 500px;
    height: 300px;
    border: #c8c8c8 solid 2px;
    background-image: 
        /* repeating-linear-gradient(
            -45deg, 
            rgba(7, 175, 172, 0.1), 
            rgba(7, 175, 172, 0.1) 8px, 
            rgba(61, 221, 226, 0.1) 0, 
            rgba(61, 221, 226, 0.1) 16px
        ), */
    background-repeat: no-repeat;
    background-size: 100% 100%;
}