web数据可视化(Echarts版)4-3带涟漪特效的散点图(代码仅供参考)

白日梦想家☜

已于 2023-05-20 12:45:45 修改

阅读量487

点赞数

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

于 2023-05-19 09:38:52 首次发布

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

版权

HTML 专栏收录该内容

40 篇文章 11 订阅

订阅专栏

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 = {
        //指定图表的配置项和数据
        legend: { data: ['一般值', '极值']},
        xAxis: { scale: true },
        yAxis: { scale: true },
        series: [{
            type: 'effectScatter',  //设置具有涟漪特效的散点图
            //设置图形是否不响应和触发事件，默认为false，即响应和触发鼠标事件
            slient: false,
            //在setOption更新数据和配置项时用于指定对应的系列
            name: '极值',
            legendHoverLink: false,  //设置是否启用图例hover时的联动高亮
            hoverAnimation: false,  //设置是否开启鼠标hover的提示动画效果
            effectType: 'ripple',  //设置特效类型，目前只支持涟漪特效'ripple'
            //设置何时显示特效，'render'绘制完成后显示特效，'emphasis'高亮(hover)的时候显示特效
            showEffectOn: 'render',
            rippleEffect: {   //设置涟漪特效
                period: 2,   //设置动画的时间,数字越小，动画越快
                scale: 5.5,   //设置动画中波纹的最大缩放比例
                brushType: 'fill',  //设置波纹的绘制方式，可选'stroke'和'fill'
            },
            symbolSize: 20,   //设置特效散点图符号的大小
            color: 'green',
            data: [
                [172.7,87.2],
                [153.4,42.0]]
        },
        {
            name: '一般值', type: 'scatter', color: '#FFCCCC',
            data: [[167.0, 64.6], [177.8, 74.8], [159.5, 58.0], [169.5, 68.0], [152.0, 45.8],
				[163.0, 63.6], [157.5, 53.2], [164.5, 65.0], [163.5, 62.0], [166.4, 56.6],
				[171.2, 65.1], [161.6, 58.9], [167.4, 67.7], [167.5, 63.0], [168.5, 65.2],
				[181.1, 76.0], [165.0, 60.2], [174.5, 70.0], [171.5, 68.0], [163.0, 72.0],
				[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [164.3, 59.8],
				[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [178.0, 70.6],
				[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [172.7, 87.2],
				[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
				[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [153.4, 42],
				[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3]],
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>