Echarts散点图

最新推荐文章于 2024-07-17 09:43:10 发布

还是那个同伟伟

最新推荐文章于 2024-07-17 09:43:10 发布

阅读量399

点赞数

分类专栏： Echarts画图文章标签：散点图数据可视化 js echarts html

原文链接：https://blog.csdn.net/qq_41485414/article/details/80417558

版权

Echarts画图专栏收录该内容

8 篇文章 0 订阅

订阅专栏

两类散点图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
var option = {
    xAxis: {},
    yAxis: {},
    legend: {
         data: ['类别1','类别2']
    },
    series: [{
        name: '类别1',
        data: [
            [2.0, 8.04],
            [3.0, 6.95],
            [23.0, 7.58],
            [18.0, 8.81],
            [12.0, 8.33],
            [4.0, 9.96],
            [16.0, 7.24],
            [14.0, 4.26],
            [12.0, 10.84],
            [10.0, 4.82],
            [7.0, 5.68]
        ],
        type: 'scatter'
    },
    {
        name: '类别2',
        data: [
            [1.0, 2.04],
            [2.0, 15.95],
            [26.0, 17.58],
            [13.0, 7.81],
            [22.0, 5.33],
            [14.0, 9.96],
            [6.0, 4.24],
            [4.0, 4.26],
            [22.0, 13.84],
            [16.0, 14.82],
            [17.0, 15.68]
    ],
        type: 'scatter'
    }
    ]
};

       // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

气泡散点图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
var option = {
    xAxis: {},
    yAxis: {},
    legend: {
         data: ['类别1','类别2']
    },
    series: [{
        name: '类别1',
        data: [
            [2.0, 8.04, 10],
            [3.0, 6.95, 20],
            [23.0, 7.58, 30],
            [18.0, 8.81, 15],
            [12.0, 8.33, 16],
            [4.0, 9.96, 5],
            [16.0, 7.24, 18],
            [14.0, 4.26, 35],
            [12.0, 10.84, 20],
            [10.0, 4.82, 50],
            [7.0, 5.68, 13]
        ],
        symbolSize: function (data) {
            return data[2];
        },
        type: 'scatter'
    },
    {
        name: '类别2',
        data: [
            [1.0, 2.04],
            [2.0, 15.95],
            [26.0, 17.58],
            [13.0, 7.81],
            [22.0, 5.33],
            [14.0, 9.96],
            [6.0, 4.24],
            [4.0, 4.26],
            [22.0, 13.84],
            [16.0, 14.82],
            [17.0, 15.68]
    ],
        type: 'scatter'
    }
    ]
};

       // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

还是那个同伟伟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts散点图

两类散点图<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title>  <script src="../echarts.js"></script></head><body> <!--.
复制链接

扫一扫