web数据可视化(Echarts版)4-2两个序列的散点图(代码仅供参考)

白日梦想家☜

已于 2023-05-20 12:46:26 修改

阅读量400

点赞数

分类专栏： HTML 文章标签： echarts 前端信息可视化

于 2023-05-19 09:36:46 首次发布

本文链接：https://blog.csdn.net/m0_63471474/article/details/130759937

版权

HTML 专栏收录该内容

40 篇文章 10 订阅

订阅专栏

echarts.js文件下载地址:Apache ECharts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
</head>
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM--->
    <div id="main" style="width: 900px; height: 400px"></div>
    <script type="text/javascript">
    //基于准备好的DOM，初始化ECharts图表
    var myChart = echarts.init(document.getElementById("main"));
    //指定图表的配置项和数据
    var option = {
        color: ['red','green'],
        title: { x:33, text: '男性与女性身高、体重分布', subtext: '抽样调查来自：FLQ 2020'},
        legend: { data: ['女性','男性']},   //配置图例组件
        toolbox: {    //配置工具箱组件
            x: 600, show: true,
            feature: {
                mark: { show: true },
                dataZoom: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        xAxis: [{ type: 'value', scale: true, axisLabel: { formatter: '{value}cm' } } ],
        yAxis: [{ type: 'value', scala: true, axisLabel: { formatter: '{value}kg' } } ],
        series: [   //配置数据系列
            {   //设置女性数据
                name: '女性', type: 'scatter', symbolSize: 8,
                data: [[161.2,51.6],[167.5,59.0],[159.5,49.2],[157,63.0],[155.8,53.6],
                      [173.0,59.0],[159.1,47.6],[156.0,69.8],[166.2,66.8],[160.2,75.2],
                      [167.6,61.0],[160.7,69.1],[163.2,55.9],[152.0,46.5],[157.5,54.3],
                      [156.0,52.7],[160.0,74.3],[163.0,62.0],[165.7,73.1],[161.0,80.0]],
                      markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]},
                      markLine: { data: [{ type: 'average', name: '平均值'}]}
            },
            {     //设置男性数据
                name: '男性', type: 'scatter', symbolSize: 8,
                data: [[174.0,65.6],[175.3,71.8],[163.5,80.0],[186.5,72.6],[187.2,78.8],
                      [167.0,64.6],[177.8,74.8],[164.5,70.0],[182.0,101.5],[165.5,63.2],
                      [171.2,79.1],[181.6,78.9],[167.4,67.7],[181.1,66.0],[177.0,68.2],
                      [161.5,74.8],[164.0,86.4],[164.5,78.4],[175.0,62.0],[164.0,81.6]],
                      markPoint: { data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]},
                      markLine: { data: [{ type: 'average', name: '平均值' }]}
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>