ECharts散点图大小调整

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

话不多说，首先上图：

此图实现的代码如下：五分钟上手之散点图系列文章
【前端图表】echarts散点图鼠标划过散点显示信息：https://blog.csdn.net/qq_36538012/article/details/82456405

<!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官方文档。

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。

ECharts散点图大小调整

猜你喜欢