Echarts图表之散点图

最新推荐文章于 2024-09-09 09:35:48 发布
最新推荐文章于 2024-09-09 09:35:48 发布
阅读量378 收藏 2
点赞数
文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gly_technology/article/details/122552935
版权

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Echarts图表</title>
        <!-- 引入echarts.min.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var data = [
                [
                    [28604, 77, 17099, 'Australia', 1990],
                    [31163, 77.4, 2440, 'Canada', 1990],
                    [1516, 68, 1605773, 'China', 1990],
                    [13670, 74.7, 10082, 'Cuba', 1990],
                    [28599, 75, 49805, 'Finland', 1990],
                    [29476, 77.1, 569499, 'France', 1990],
                    [31476, 75.4, 789237, 'Germany', 1990],
                    [28666, 78.1, 254830, 'Iceland', 1990],
                    [1777, 57.7, 870776, 'India', 1990],
                    [29550, 79.1, 129285, 'Japan', 1990],
                    [2076, 67.9, 201954, 'North Korea', 1990],
                    [12087, 72, 42954, 'South Korea', 1990],
                    [24021, 75.4, 33934, 'New Zealand', 1990],
                    [43296, 76.8, 4240375, 'Norway', 1990],
                    [10088, 70.8, 381958, 'Poland', 1990],
                    [19349, 69.6, 1475652, 'Russia', 1990],
                    [10670, 67.3, 53905, 'Turkey', 1990],
                    [26424, 75.7, 57117, 'United Kingdom', 1990],
                    [37062, 75.4, 252810, 'United States', 1990]
                ],
                [
                    [44056, 81.8, 23973, 'Australia', 2015],
                    [43294, 81.7, 35927, 'Canada', 2015],
                    [13334, 76.9, 1376043, 'China', 2015],
                    [21291, 78.5, 11562, 'Cuba', 2015],
                    [38923, 80.8, 55057, 'Finland', 2015],
                    [37599, 81.9, 64345, 'France', 2015],
                    [44053, 81.1, 80545, 'Germany', 2015],
                    [42182, 82.8, 329425, 'Iceland', 2015],
                    [5903, 66.8, 1311027, 'India', 2015],
                    [36162, 83.5, 126571, 'Japan', 2015],
                    [1390, 71.4, 251317, 'North Korea', 2015],
                    [34644, 80.7, 503439, 'South Korea', 2015],
                    [34186, 80.6, 4528526, 'New Zealand', 2015],
                    [64304, 81.6, 5210967, 'Norway', 2015],
                    [24787, 77.3, 386194, 'Poland', 2015],
                    [23038, 73.13, 143918, 'Russia', 2015],
                    [19360, 76.5, 78630, 'Turkey', 2015],
                    [38225, 81.4, 64715810, 'United Kingdom', 2015],
                    [53354, 79.1, 321771, 'United States', 2015]
                ]
            ];
            var option = {
                backgroundColor: '#000',
                grid: {
                    left: 40,
                    right: 40,
                    top: 50,
                    bottom: 40
                },
                // 图表标题
                title: {
                    top: 5,
                    left: 20,
                    textStyle: {
                        fontSize: 10,
                        color: 'rgba(255,255,255,.6)'
                    },
                    text: '环比类型:日环比'
                },
                // 图例
                legend: {
                    right: 10,
                    top: 5,
                    textStyle: {
                        fontSize: 10,
                        color: 'rgba(255,255,255,.6)'
                    },
                    data: ['1990', '2015']
                },
                xAxis: {
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.2)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.7)'
                    }
                },
                yAxis: {
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.2)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,.1)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.7)'
                    },
                    scale: true
                },
                series: [{
                    name: '1990',
                    data: data[0],
                    //散点图
                    type: 'scatter',
                    //设置坐标点缩小功能
                    symbolSize: function(data) {
                        return Math.sqrt(data[2]) / 5e2;
                    },
                    //标签样式设置
                    label: {
                        //鼠标移入动态的时候显示的默认样式
                        emphasis: {
                            show: true,
                            //标签内容
                            formatter: function(param) {
                                return param.data[3];
                            },
                            position: 'top'
                        }
                    },
                    itemStyle: {
                        //静态的时候显示的默认样式
                        normal: {
                            //图形阴影的模糊大小
                            shadowBlur: 10,
                            //阴影颜色
                            shadowColor: 'rgba(120, 36, 50, 0.5)',
                            //阴影垂直方向上的偏移距离
                            shadowOffsetY: 5,
                            //图例渐变
                            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                                offset: 0,
                                color: 'rgb(251, 118, 123)'
                            }, {
                                offset: 1,
                                color: 'rgb(204, 46, 72)'
                            }])
                        }
                    }
                }, {
                    name: '2015',
                    data: data[1],
                    type: 'scatter',
                    symbolSize: function(data) {
                        return Math.sqrt(data[2]) / 5e2;
                    },
                    label: {
                        emphasis: {
                            show: true,
                            formatter: function(param) {
                                return param.data[3];
                            },
                            position: 'top'
                        }
                    },
                    itemStyle: {
                        normal: {
                            shadowBlur: 10,
                            shadowColor: 'rgba(25, 100, 150, 0.5)',
                            shadowOffsetY: 5,
                            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                                offset: 0,
                                color: 'rgb(129, 227, 238)'
                            }, {
                                offset: 1,
                                color: 'rgb(25, 183, 207)'
                            }])
                        }
                    }
                }]
            };
            myChart.setOption(option);
        </script>
    </body>
</html>

gly_technology
关注
echarts散点图
lyq1820847491的博客
04-08 247
- 1.准备一个具备大小的 DOM 容器 -->// 2.初始化echarts实例化对象。
ECharts散点图
qq_38822390的博客
05-24 5045
在业务需求中，有时候会遇到ECharts散点图，现在记录一下，今天解决了一个小问题，ECharts散点图大小调整。 话不多说，首先上图： 此图实现的代码如下：五分钟上手之散点图系列文章 【前端图表】echarts散点图鼠标划过散点显示信息：https://blog.csdn.net/qq_36538012/article/details/82456405 <!DOCTYPE html&gt...
echarts：散点图
qq_41390184的博客
03-31 3045
Echarts是一款基于JavaScript的开源可视化库，可以用于绘制各种类型的图表，包括折线图、柱状图、散点图等。散点图是一种用于显示两个变量之间关系的图表，其中每个数据点由两个数值表示，通常用于研究变量之间的相关性和趋势。
echarts的散点图
weixin_30849403的博客
04-14 196
目前页面中有一个故障数据，做成散点图的效果，打算用echarts 来实现，国内的图表类其实选择挺多的，个人觉得echarts是比较好用的，来看看它有什么优点，一时中文的，联合百度地图，很多都对国内很友好，准确。2是用起来方便，只要引一个<script src="../lib/echarts3/echarts.min.js"></script> 文件，3.完全免费。4美观。...
Echarts之散点图
qq_37881565的博客
03-16 8170
根据Echarts画出散点图 option = { dataset: { dimensions:['dept','age'],//设置x轴和y轴的数据 source:[ {dept:'法务部',age:'0-10',num:'10'}, {dept:'财务部',age:'10-20',num:'20'}, {dept:'商务部',age:'20-30',num:'30'}, {dept:'计划部',age:'30-40',num:'10'}
Echart 散点图
白影子的博客
05-12 4515
参考https://www.echartsjs.com/examples/editor.html?c=bubble-gradient 自定义图表，效果如下 var data = [ [ ['2019/01/07','低落伤心',321773631,'yy','低落伤心'], ['2019/01/05','低落伤心',321773631,'y...
Echarts 地图+散点图结合 +闪点+轮播
12-18
本项目展示了如何利用ECharts将地图、散点图、闪点效果以及轮播功能巧妙地结合在一起，为用户提供丰富的视觉体验。下面将详细阐述这些知识点。 1. **ECharts 地图组件**： ECharts 提供了多种地图类型，包括中国...
Apache Echarts常用图表之散点图
diviner_s的博客
04-21 4140
文章目录Echarts常用图表散点图1. 散点图的实现步骤2. 散点图的常见效果 Echarts常用图表 散点图 散点图可以帮助我们推断出变量间的相关性，追求不同维度数据之间的相关性，根据点的分布，从而找到线性的关系。 散点图也经常用在地图的标注上 1. 散点图的实现步骤 1.先上Echarts经典基本代码框架~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
echarts3d地图散点数据陷进地图的解决方案
10-25
在数据分析和可视化领域，ECharts 是一款非常流行的开源 JavaScript 图表库，它提供了丰富的图表类型，包括2D和3D地图。本主题聚焦于“echarts3d地图散点数据陷进地图的解决方案”，这是一个在使用ECharts进行3D地图...
echarts 散点图
06-11
基于echarts 的散点图，还需要引用 jquery echarts.js.
使用echarts实现四象限散点图
09-02
ECharts支持多种图表，包括柱状图、折线图、饼图以及我们的目标——散点图。 在实现四象限散点图之前，确保已经正确地在项目中引入ECharts库。可以通过CDN链接或者下载压缩包后本地引入。例如，在HTML文件中添加...
echarts3d地图散点数据陷进地图的多次试验后终于成功
06-13
Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型和强大的交互功能。Echarts 3D模块则进一步扩展了其能力，允许我们在3D环境中展示数据。 标题“echarts3d地图散点数据陷进地图的多次试验后终于...
Echarts散点图
Mogul的博客
06-25 424
两类散点图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="../echarts.js"></script> </head> <body> <!--.
Echarts 中的散点图
weixin_45677987的博客
08-03 3341
Echarts 中散点图的实现: 散点图可以帮助我们推断变量之间的相关性。 (根据散点图的分布) 1: 散点图的是实现步骤: Echarts 最基本的代码结构: 引入js 文件, DOM 容器, 初始化对象, 设置option 2: x 轴 与 y 轴 的数据是二位数据即可。 3: 在图标类型: 在series 中设置类型为 type: scatter; (散点图) xAis 和 yAis 的type 值都需要设置为 value; 4: x 轴 与y 轴 调整 .
软件著作权申请教程（超详细）（2024新版）软著申请
最新发布
m0_75269526的博客
09-09 2809
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
echarts单轴散点图
09-14
要绘制 echarts 单轴散点图，你可以使用 echarts 的 scatter 图表类型，并将 x 轴和 y 轴都设置为同一个维度。 以下是一个简单的 echarts 单轴散点图的示例代码： ```javascript // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('myChart')); // 配置项 var option = { xAxis: { type: 'value', axisLabel: { show: true, textStyle: { color: '#666' } } }, yAxis: { type: 'value', axisLabel: { show: true, textStyle: { color: '#666' } } }, series: [{ type: 'scatter', data: [ [10, 20], [20, 30], [30, 10], [40, 50], [50, 40] ] }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); ``` 以上代码将会在 id 为 `myChart` 的 DOM 元素中绘制一个简单的单轴散点图。你可以根据需要修改配置项和数据来绘制符合你需求的图表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值