ECharts散点图大小调整-阿里云开发者社区

ECharts散点图大小调整

2023-11-13 118

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ECharts散点图大小调整

在业务需求中，有时候会遇到ECharts散点图，现在记录一下，今天解决了一个小问题，ECharts散点图大小调整。

话不多说，首先上图：

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>五分钟上手之散点图</title>
          <!-- 引入 echarts.js -->
          <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
          <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
     </head>
    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div style="height: 500px;width: 1000px;" id="Scatter"></div>
        <script type="text/javascript">
            $(document).ready(function() {
                var MyScatter = echarts.init(document.getElementById('Scatter'));
                var data = [
                    ['2012-03-01',
                        1,
                        "翻身"
                    ],
                    [
                        '2013-06-01',
                        2,
                        "没翻身"
                    ],
                    [
                        '2014-03-02',
                       3,
                        "翻身"
                    ],
                    [
                        '2015-03-03',
                       5,
                        "翻身"
                    ],[
                        '2016-03-04',
                       7,
                        "翻身"
                    ]
                ];
                var textStyle = {
                    color: '#333',
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 14,
                };
                option = {
                     tooltip: {  
                    /*返回需要的信息*/  
                    formatter: function(param) {  
                        var value = param.value;  
                        return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;"> ' + value[2] + '(' + value[1] + ')' +  
                            '</div>';  
                    }  
                },
                    xAxis: {
                        type: 'time',
                        name: '时间轴',
                    },
                    yAxis: {
                        type: 'value',
                        name: '次数值',
                        max: 13,
                        min: 0,
                    },
                    series: [{
                        name: '',
                        data: data,
                        type: 'scatter',
                        symbolSize: 60
                    }]
                };
                MyScatter.setOption(option);
            });
        </script>
    </body>
</html>

但是写完之后，发现不足的地方有，每个点都太大了，所以要修饰一下，把散点的大小改变一下：

在上面的代码里面找到：修改 symbolSize: 60里面的值就行了

 series: [{
                        name: '',
                        data: data,
                        type: 'scatter',
                        symbolSize: 60
                    }]

这里我把值修改成了 symbolSize: 40，效果好看了许多，更多的属性，比如说颜色，大小，间距等都是可以作调整的，可以研究一下ECharts官方文档。

ECharts散点图大小调整

热门文章

最新文章

相关电子书