如何让你的网站更具视觉冲击力：使用Effectscatter

发布时间：2023-05-18

在当今高度竞争的互联网时代，如何让自己的网站在众多网站中脱颖而出，成为用户眼中的焦点，是每个网站开发者都需要思考的问题。本文将介绍一个强大的数据可视化工具——Effectscatter，它可以为你的网站增加更多的视觉冲击力，吸引用户的注意力。

一、使用Effectscatter

Effectscatter是一种基于echarts.js的数据可视化工具，它可以通过各种形状和颜色来呈现数据，使数据更具有视觉冲击力。 Effectscatter的使用非常灵活，你可以轻松地将它嵌入到你的网站中，使它成为网页中的一个亮点。代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用Effectscatter制作数据可视化图表</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 800px;height:600px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var data = [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ];
        var option = {
            title: {
                text: '数据可视化图表示例',
                left: 'center'
            },
            tooltip: {
                formatter: function (params) {
                    return 'x: ' + params.value[0] + '<br>y: ' + params.value[1];
                }
            },
            xAxis: {
                type: 'value',
                min: 0,
                max: 20,
                axisLine: {
                    onZero: false
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 15
            },
            series: [
                {
                    type: 'effectScatter',
                    data: data,
                    symbolSize: function (data) {
                        return Math.sqrt(data[1]) * 5;
                    },
                    label: {
                        show: true,
                        formatter: function (param) {
                            return param.data[0] + ',' + param.data[1];
                        },
                        fontSize: 10,
                        position: 'top'
                    },
                    itemStyle: {
                        color: 'purple'
                    }
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

上面是一个简单的使用Effectscatter制作的数据可视化图表示例，由于使用了Effectscatter，图表中的数据节点从单一的圆点变成了带有动态特效的气泡，使整个图表更具有视觉冲击力。

二、调整Effectscatter的样式

Effectscatter默认的样式可能并不适合所有的网站，如何调整Effectscatter的样式也是使用它的过程中需要思考的问题。 首先，你可以通过设置symbolSize参数来调整Effectscatter的节点大小，这样可以使图表中的节点更加夸张，吸引用户的眼球。代码示例：

series: [
    {
        type: 'effectScatter',
        data: data,
        symbolSize: 20, // 调整节点大小
        label: {
            show: true,
            formatter: function (param) {
                return param.data[0] + ',' + param.data[1];
            },
            fontSize: 10,
            position: 'top'
        },
        itemStyle: {
            color: 'purple'
        }
    }
]

除了节点大小，Effectscatter的节点形状和颜色也可以通过itemStyle参数来自定义。代码示例：

series: [
    {
        type: 'effectScatter',
        data: data,
        symbolSize: 20,
        label: {
            show: true,
            formatter: function (param) {
                return param.data[0] + ',' + param.data[1];
            },
            fontSize: 10,
            position: 'top'
        },
        itemStyle: {
            color: 'purple',
            borderColor: 'blue', // 设置节点边框颜色
            borderWidth: 2 // 设置节点边框宽度
        }
    }
]

上面的代码示例中，我们通过设置borderColor和borderWidth参数来自定义Effectscatter的节点边框样式，使图表更加醒目。另外，Effectscatter的颜色也可以通过color参数来调整，这样可以使整个图表更加协调。代码示例：

series: [
    {
        type: 'effectScatter',
        data: data,
        symbolSize: 20,
        label: {
            show: true,
            formatter: function (param) {
                return param.data[0] + ',' + param.data[1];
            },
            fontSize: 10,
            position: 'top'
        },
        itemStyle: {
            color: 'purple',
            borderColor: 'blue',
            borderWidth: 2
        },
        color: ['#ff7f50'] // 修改节点颜色
    }
]

三、数据可视化实战

通过上面的介绍，我们已经了解了如何使用Effectscatter，以及如何调整Effectscatter的样式。下面，我们来实际应用一下Effectscatter，为我们的网站制作一个数据可视化图表。 假设我们有一份销售数据，如下表所示，我们想将这份数据可视化出来，使整个图表更具有冲击力。

日期 销售额
2021-01-01 256
2021-01-02 210
2021-01-03 180
2021-01-04 325
2021-01-05 287
2021-01-06 398
2021-01-07 420
首先，我们需要将数据转换成Effectscatter所需的格式。代码示例： 
var data = [
    [0, 256],
    [1, 210],
    [2, 180],
    [3, 325],
    [4, 287],
    [5, 398],
    [6, 420]
];

然后，我们根据数据来制作Effectscatter图表，并调整它的样式。代码示例：

var myChart = echarts.init(document.getElementById('main'));
var option = {
    backgroundColor: '#404a59',
    title: {
        text: '销售数据可视化图表',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    xAxis: {
        type: 'value',
        boundaryGap: false,
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        }
    },
    series: [
        {
            name: '销售额',
            type: 'effectScatter',
            symbolSize: function (val) {
                return val[1] / 10;
            },
            data: data,
            itemStyle: {
                color: '#ddb926'
            }
        }
    ]
};
myChart.setOption(option);

上面的代码示例中，我们使用了backgroundColor参数来设定图表的背景色，使用title和tooltip参数添加了图表的标题和提示信息，使用xAxis和yAxis参数定义了图表的坐标轴，最后使用了series参数来定义了Effectscatter图表的数据及样式。 通过上面的操作，我们就成功地制作了一个销售数据的可视化图表，并使用Effectscatter为图表增加了更多的视觉冲击力。当然，在实际应用中，你还可以根据自己的需要进一步调整Effectscatter的样式，使它更加符合你的网站风格。

推荐文章