echarts 修改图片（画布）大小

最新推荐文章于 2024-05-16 10:23:58 发布

程序媛三妹

最新推荐文章于 2024-05-16 10:23:58 发布

阅读量1.5w

点赞数 2

分类专栏： echarts

本文链接：https://blog.csdn.net/u011675334/article/details/105966118

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、问题

echarts 官网有很多 examples，可以直接在上面修改成自己想要的样子，链接：

https://echarts.apache.org/examples/

但是我发现这个不能改变整个图片的大小，也就是下载之后的大小，有时候布局不是特别合理，或者空白区太大。

所以找了很多办法解决。

下边是我最终解决的办法：

二、解决方法

1、在 echarts 官网上修改 example；

2、观察到官网上的内容是 options 部分，所以把该部分复制到本地 IDE，作为 html 文件中 option 部分，html 文件的开头结尾自己填上即可。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>三妹的example</title>
</head>

<body>
    <div id="d1" style="width: 900px;height:700px;"></div>
    <script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("d1")); //初始化画布
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };

        myChart.setOption(option);
    </script>
</body>

</html>

可以看出，就是在 html 文件中自己添加的 body 部分设置 width, height 即可调节图片（画布）长宽：

以上，问题解决~

程序媛三妹

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
echarts 修改图片（画布）大小

一、问题echarts 官网有很多 examples，可以直接在上面修改成自己想要的样子，链接：https://echarts.apache.org/examples/但是我发现这个不能改变整个图片的大小，也就是下载之后的大小，有时候布局不是特别合理，或者空白区太大。所以找了很多办法解决。下边是我最终解决的办法：二、解决方法不在 echarts 官网上修改 exampl...
复制链接

扫一扫