echarts散点图使用

最新推荐文章于 2025-06-06 11:33:20 发布
转载 最新推荐文章于 2025-06-06 11:33:20 发布 · 7.3k 阅读 · 2
文章标签：

#echarts #散点图 #使用

本文介绍如何使用ECharts绘制散点图来寻找最优记录，并展示如何在地图上添加特殊标记以突出特定位置。通过示例代码详细说明了配置项的设置方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.散点图中找最优记录

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style/style.css">
    <script src="js/echarts.common.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 620px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var data = [[],[]];
        var showVal = [[3, 200099, "中天博日"], [2, 500039, "腾讯"], [5, 188669, "中科"], [4, 900009, "华为"], [3, 333339, "阿里"], [4, 233339, "万达"], [2, 433339, "中信"], [7, 388889, "中科"], [6, 388889, "kkk"], [4, 233359, 'lekd']];
        showVal = showVal.sort(function (a, b) {
            if (a[0] == b[0]) {
                return a[1]>b[1]
            }
            return a[0] < b[0]
        });
        var schema = [
            { name: 'money', index: 0, text: '金额' },
            { name: 'selUser', index: 1, text: '选择中标人' }
        ];
        for (var i = 0; i < showVal.length; i++) {
            var a= [];
            if (showVal[0][1] == showVal[i][1]) {
                if (showVal[0][0] == showVal[i][0]) {
                    data[0].push(showVal[i]);
                } else {
                    data[1].push(showVal[i]);
                }
            } else { 
                data[1].push(showVal[i]);
            }
        }
        option = {
            backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
                offset: 0,
                color: '#fff'
            }, {
                offset: 1,
                color: '#fff'
            }]),
            title: {
                left :'35%',
                text: '寻找纸板插入物, 纸板供应商',
                textStyle:{
                    color: '#354052',
                    fontSize:16
                    }
            },
            //系列标记
            legend: {
                y: 'bottom',
                data: ['投标', '最佳出价'],
                itemGap:40,
            },
            //提示框的事例
            tooltip: {
                padding: 10,
                backgroundColor: '#222',
                borderColor: '#777',
                borderWidth: 1,
                formatter: function (obj) {
                    var value = obj.value;
                    return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                        + value[2]
                        + '</div>'
                        + schema[0].text + '：' + value[1] + '<br>'
                        + '选择中标人<br>'
                }
            },
            //x坐标的设置
            xAxis: {
                name: '供应商评分',
                nameTextStyle: {
                    color: '#7F8FA4',
                    fontSize: 12
                },
                axisLine: {
                    lineStyle: {
                        color: '#979797'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#D8D8D8',
                        type: 'dashed',
                    }
                }
            },
            //y坐标的设置
            yAxis: {
                name: '投标金额',
                //坐标轴名称
                nameTextStyle: {
                    color: '#7F8FA4',
                    fontSize: 12
                },
               //坐标轴的设置
                axisLine: {
                    lineStyle: {
                        color: '#979797'
                    }
                },
                //坐标轴的分割线
                splitLine: {
                    lineStyle: {
                        color: '#D8D8D8',
                        type: 'dashed',
                    }
                },
                scale: true
            },
            series: [{
                name: '最佳出价',
                data: data[0],
                type: 'scatter',
                symbolSize: function (data) {
                    return Math.sqrt(data[1]) / 5e2 * 10;
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(255,128,5,0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                            offset: 0,
                            color: '#FF8005 '
                        }, {
                            offset: 1,
                            color: '#FF8005'
                        }])
                    }
                }, markLine: {
                    silent: true,
                    lineStyle: {
                        normal: {
                            type: 'solid',
                        }
                    },
                    data: [{
                        yAxis: data[1][7][1]
                    }],
                    label: {
                        normal: {
                            formatter:'机会金额'
                        }
                    }
                         
                }
            }, {
                name: '投标',
                data: data[1],
                type: 'scatter',
                symbolSize: function (data) {
                    return Math.sqrt(data[1]) / 5e2 * 10;
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(55,178,72,0.5)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                            offset: 0,
                            color: '#37B248'
                        }, {
                            offset: 1,
                            color: '#37B248'
                        }])
                    }
                },
                 
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

2地图中的特殊标记

IT分享

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style/style.css">
    <script src="js/echarts.common.min.js"></script>   
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.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'));
        function randomData() {
            return Math.round(Math.random() * 1000);
        }
        var pricePoint = [[121.15, 31.89], [109.781327, 39.608266], [120.38, 37.35], [122.207216, 29.985295], [123.97, 47.33], [120.13, 33.38], [118.87, 42.28], [102.188043, 38.520089]];
        var geoCoordMap = {
            '海门': [121.15, 31.89],
            '鄂尔多斯': [109.781327, 39.608266],
            '招远': [120.38, 37.35],
            '舟山': [122.207216, 29.985295],
            '齐齐哈尔': [123.97, 47.33],
            '盐城': [120.13, 33.38],
            '赤峰': [118.87, 42.28],
            "金昌": [102.188043, 38.520089],
        };
        var geoData = [
            { name: "海门", value: 9 },
            { name: "鄂尔多斯", value: 12 },
            { name: "招远", value: 12 },
            { name: "舟山", value: 12 },
            { name: "齐齐哈尔", value: 14 },
            { name: "盐城", value: 15 },
            { name: "赤峰", value: 16 },
            { name: "金昌", value: 19 }
        ]
        //获取唯一识别的值
        var selName = geoCoordMap.金昌.toString();
        var convertData = function (data, geoCoord1) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoord1[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };
        var setTip = function (data) {
            var res = [];
            if(data&&data.length>0){
                for(var i=0;i<data.length;i++){
                    res.push({
                        coord: data[i],
                        label: {
                            normal: { show: false }
                        },
                        symbol: data[i].toString() != selName ? 'image://image/page.png' : 'image://image/page1.png',
                    })
                }
            }
            return res
        }
        option = {
            backgroundColor: '#fff',
            title: {
                text: '全国主要城市空气质量',
                x: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + ' : ' + params.value[2];
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#E7E7E7',
                        borderColor: '#fff'
                    },
                    emphasis: {
                        //鼠标移上去的属性
                        areaColor: '#E7E7E7'
                    }
                }
            },
            series: [
                {
                    name: 'pm2.5',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(geoData, geoCoordMap),
                    //将默认的显示隐藏掉
                    symbolSize: 0,
                    //自定义标示点
                    markPoint: {
                        data: setTip(pricePoint),
                        //设置图片的偏移
                       // symbolOffset: ['-5%', '-5%'],
                        //设置图片的宽高
                        symbolSize: [15,20],
                    },
                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

from: http://blog.youkuaiyun.com/tototuzuoquan/article/details/70353939

echarts雷达图自定义射线颜色、边框效果和背景样式
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
01-07 2万+
从ECharts官网雷达图样例中一点一点实现效果图
EChart中如何绘制显示不同区域的散点图？
觉醒法师的专栏
12-03 1615
在ECharts中，要实现区域内散点图的绘制，可以使用 series 类型为 scatter 的散点图，并且通过配置项的设置，并且通过两个xAxis横坐标来绑定数据，来实现区域散点图效果图。
echarts 散点图
06-11
基于echarts 的散点图，还需要引用 jquery echarts.js.
echart散点图
07-24
这个吧，是echart散点图的做法。我也是给自己用的，你们下吧，我也顺便赚积分啊
echarts 用散点图实现象限图
最新发布
敲代码无敌小奶龙的博客
06-06 339
echarts 用散点图实现象限图
Echarts入门（二）| 散点图 地图 雷达图
Sartin的博客
06-28 2127
这里写目录标题散点图GEO地图雷达图 散点图 散点图是指在回归分析中，数据点在直角坐标系平面上的分布图，散点图表示因变量随自变量而变化的大致趋势，据此可以选择合适的函数对数据点进行拟合。 用两组数据构成多个坐标点，考察坐标点的分布，判断两变量之间是否存在某种关联或总结坐标点的分布模式。散点图将序列显示为一组点。值由点在图表中的位置表示。类别由图表中的不同标记表示。散点图通常用于比较跨类别的聚合数据。 参数含义： series-scatter. symbolSize = 10 number Array
Echarts绘制散点地图
weixin_46110552的博客
05-08 1296
Echarts绘制散点地图 1.显示一个地理坐标系geo,以及显示省份 geo:{ map:"china", label:{ show:true },} 2.与地图进行绑定 coordinateSystem: 'geo', 3.完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta char
Echarts 源码解读 十三
Lingfur的博客
12-26 576
2021SC@SDUSC 单轴 SingleAxis SingleCreator SingleCreator文件主要为创建单轴的逻辑代码，主要代码如下： function create(ecModel, api) { var singles = []; ecModel.eachComponent('singleAxis', function (axisModel, idx) { var single = new Single(axisModel, ecModel, api.
python 一组数据 正态分布散点图_R语言入门之散点图
weixin_39732249的博客
11-20 2443
散点图1. 简单散点图 在R中有很多方式去绘制散点图，其中最基本的就是是用plot(x, y)函数，往期内容已经进行过详细讲解,这里就不赘述了，下面直接看实例图。# 简单散点图 attach(mtcars) #固定目标数据，方便后续绘图 plot(wt, mpg, main="Scatterplot Example", xlab="Car Weight ", ylab="Miles ...
echarts趋势线
原今兮的blog
07-17 2472
最近项目里需要绘制echarts图表的趋势线，查过资料后得知除了引入echarts之外还要引入ecStat.js辅助绘制，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="echarts.min.js"></script> <script src="ecStat
Echarts四象限散点图
weixin_52869172的博客
11-03 1450
四象限散点图，利用MarkLine绘制坐标轴。
echarts 使用 百度地图 加入自定义图标标记
进击的冉冉的博客
04-16 4387
首先先上效果图，静态图（PS.制作动图还在学习中~）： 地图上的文字未展示，根据经纬度标记图，循环展示每个标记点的数据~ 一.如何引入百度地图 申请百度开发秘钥AK http://lbsyun.baidu.com/apiconsole/key 在vue的index.html里加入 <script type="text/javascript" src="https://api.m...
echarts散点图使用（转：http://www.suchso.com/UIweb/echarts-sandiantu.html）
weixin_33895695的博客
04-22 532
1.散点图中找最优记录 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 5...
ECharts常用图表 散点图
黑马程序员官方博客
12-07 7397
1.图表3 散点图 1.1.散点图的实现步骤 1.2.散点图的常见效果 回调函数的写法如下: 涟漪动画效果 1.3.散点图的特点 散点图可以帮助我们推断出不同维度数据之间的相关性, 比如上述例子中,看得出身高和体重是正相关, 身高越高, 体重越重 散点图也经常用在地图的标注上 1.4.直角坐标系的常见配置 直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图 针对于直角坐标系的图表, 有一些通用的配置 配置1: 网格 grid grid是用来控
echarts：散点图
qq_41390184的博客
03-31 3418
Echarts是一款基于JavaScript的开源可视化库，可以用于绘制各种类型的图表，包括折线图、柱状图、散点图等。散点图是一种用于显示两个变量之间关系的图表，其中每个数据点由两个数值表示，通常用于研究变量之间的相关性和趋势。
echarts的使用散点图说明
tao_wei162的博客
09-07 729
我根据http://weibo.com/ttarticle/p/show?id=2309403985903470163325 并没有出来百度的地图，具体做法如下： 1)&lt;script src="../resource/js/statics/echarts/echarts.js?v=20160123" type="text/javascript"&gt;&lt;/script&gt; ...
ECharts之地图散点图
关注最新技术问题并持续维护更新
08-09 8408
效果图 背景图片 下载 npm install echarts --save 引入中国地图     在 main.js 文件里引入 ( 这里是 Vue3.0 的模板 ) import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' imp...
Echarts 散点图基本使用
Hiroshi's
10-03 269
上代码： <!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>模板&lt.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值