echarts散点图demo

最新推荐文章于 2024-04-23 16:26:38 发布

哎呦喂O_o嗨

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量424

点赞数

分类专栏：前端文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_42402326/article/details/127751369

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>散点图</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #chart-container {
        position: relative;
        height: 100vh;
        overflow: hidden;
        background-color:darkgray;
    }
</style>

<body>
    <div id="chart-container"></div>
    <script src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
    <script>
        var dom = document.getElementById('chart-container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};

        var option;

        echarts.registerTransform(ecStat.transform.regression);
        option = {
            dataset: [
                {
                    source: [
                        ['2022-10-01', 800],
                        ['2022-10-02', 1200],
                        ['2022-10-03', 900],
                        ['2022-10-04', 1000],
                        ['2022-10-05', 1134],
                        ['2022-10-06', 1071],
                        ['2022-10-07', 964],
                        ['2022-10-08', 1202],
                        ['2022-10-09', 1162],
                        ['2022-10-10', 1128],
                        ['2022-10-11', 909],
                        ['2022-10-12', 847],
                        ['2022-10-13', 818],
                        ['2022-10-14', 938],
                        ['2022-10-15', 1044],
                        ['2022-10-16', 984],
                        ['2022-10-17', 881],
                        ['2022-10-18', 846],
                        ['2022-10-19', 926],
                        ['2022-10-20', 1037],
                        ['2022-10-21', 1255],
                        ['2022-10-22', 1343],
                        ['2022-10-23', 802],
                        ['2022-10-24', 849],
                        ['2022-10-25', 918],
                        ['2022-10-26', 831],
                        ['2022-10-27', 1034],
                        ['2022-10-28', 1054],
                        ['2022-10-29', 999],
                        ['2022-10-30', 899],
                        ['2022-10-31', 800]
                    ]
                },
                {
                    transform: {
                        type: 'ecStat:regression',
                        config: {
                            method: 'exponential'
                        }
                    }
                }
            ],
            title: {
                text: '散点数据视图展示',
                subtext: '离网用户',
                sublink: 'www.baidu.com',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            xAxis: {
                type: 'category',
                name: '时间轴',
            },
            yAxis: {
                type: 'value',
                name: '万',
            },
            series: [
                {
                    name: '离网用户数',
                    type: 'scatter',
                    datasetIndex: 0
                },
                // {
                //     name: 'line',
                //     type: 'line',
                //     smooth: true,
                //     datasetIndex: 1,
                //     symbolSize: 0.1,
                //     symbol: 'circle',
                //     label: { show: true, fontSize: 16 },
                //     labelLayout: { dx: -20 },
                //     encode: { label: 2, tooltip: 1 }
                // }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        window.addEventListener('resize', myChart.resize);
    </script>
</body>

</html>