Echarts学习记录——设置图表与容器的间隔

最新推荐文章于 2024-03-14 10:36:02 发布

-贫寒豌豆

最新推荐文章于 2024-03-14 10:36:02 发布

阅读量1.5w

点赞数

分类专栏： Echarts 文章标签： Echarts

本文链接：https://blog.csdn.net/flygoa/article/details/52922680

版权

Echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Echarts学习记录——设置图表与容器的间隔

关键属性

grid:直角坐标系内绘图网格。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<title>Echarts学习记录</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<script type="text/javascript">
    var width;
    var height;
    var myChart;
    $(function(){
        //自适应设置
        width = $(window).width();
        height = $(window).height();
        $("#mainBar").css("width",width-40);
        $("#mainBar").css("height",height-40);
        console.log(height);
        setEcharts();
    });

    $(window).resize(function() {
        width = $(window).width();
        height = $(window).height();
        $("#mainBar").css("width",width-40);
        $("#mainBar").css("height",height-40);
    }); 

    function setEcharts(){
        myChart = echarts.init(document.getElementById('mainBar'));
        //自适应
        window.onresize = myChart.resize;

        myChart.setOption({
            //设置图表与容器的间隔
            grid:{
                x:100,
                y:200,
                x2:300,
                y2:400,
                borderWidth:1
            },
            title : {
                text: '未来一周气温变化',
                subtext: '纯属虚构'
            },
            legend: {
                data:['蒸发量','降水量']
            },
            calculable : true,
            xAxis : [
                {
                    //show:false,  //影藏
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'蒸发量',
                    type:'bar',
                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },
                {
                    name:'降水量',
                    type:'bar',
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                }
            ]
        });
    }


</script>

<body>
    <div id="mainBar" style="border:1px solid #ccc;padding:10px;"></div>
    <!-- 标签式引入Eharts 如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。 -->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/echarts/2.1.9/source/echarts-all.js"></script>
    <script>
    </script>
</body>
</html>