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 散点图
06-11
基于echarts 的散点图，还需要引用 jquery echarts.js.
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 用散点图实现象限图
最新发布
敲代码无敌小奶龙的博客
06-06 339
echarts 用散点图实现象限图
ECharts常用图表 散点图
黑马程序员官方博客
12-07 7396
1.图表3 散点图 1.1.散点图的实现步骤 1.2.散点图的常见效果 回调函数的写法如下: 涟漪动画效果 1.3.散点图的特点 散点图可以帮助我们推断出不同维度数据之间的相关性, 比如上述例子中,看得出身高和体重是正相关, 身高越高, 体重越重 散点图也经常用在地图的标注上 1.4.直角坐标系的常见配置 直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图 针对于直角坐标系的图表, 有一些通用的配置 配置1: 网格 grid grid是用来控
echarts：散点图
qq_41390184的博客
03-31 3417
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散点图数据动态颜色大小
06-16
散点大小按数据大小渲染，不同数据不同颜色
echarts-scatter:echarts散点图多点重合无法全部显示解决方案
05-02
-report注:demo.html为普通开发下的示例代码，直接打开即可看到效果，由于引用的是node_modules中的echarts.js文件，所以打开前依然需要npm intall下载所需依赖方可看到效果，否则会提示没有引入js文件的错误
ECharts散点图-散点图5.zip
04-14
在本压缩包中，包含的“ECharts散点图-散点图5.zip”文件，很可能是关于ECharts散点图使用和实现的示例文件。这些文件通常会包含散点图的配置代码，包括数据、坐标轴设置、图表样式定义等关键信息。通过配置这些参数...
ECharts散点图-散点图11.zip
04-14
在ECharts散点图的使用过程中，用户可以通过调整散点的颜色、形状、大小以及使用不同的坐标轴类型等来定制图表的外观和行为。例如，可以在散点图中引入第三维度的数据，通过颜色渐变、大小变化来表现第三个变量的...
ECharts散点图-散点图4.zip
04-14
参考提供的链接，用户可以了解到如何使用ECharts创建散点图，并且可以查看代码实现的细节，这对于掌握ECharts散点图的绘制有直接帮助。 根据给出的标签，“echarts”，“散点图”，“统计分析”，“数据可视化”，...
echart散点图
07-24
这个吧，是echart散点图的做法。我也是给自己用的，你们下吧，我也顺便赚积分啊
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.
Echarts实现散点图
倚栏听风
11-22 560
散点图 大屏 Leaflet Echarts
Echarts基础(一)：散点图
热门推荐
weiweitb8的博客
10-10 3万+
一 Echarts制作散点图 Echarts的使用：首先需要设定一个div用来承载图表，然后初始化echarts实例。将所有的数据与配置写在option中，需要设置的几部分内容为： 一）backgroundColor：背景颜色，可设置为某一个固定的背景颜色，也可设置为渐变的背景颜色，如下:(参数为x轴，y轴，z轴位置) backgroundColor: new echarts. graphi
Echarts（二）scatter散点图
NI3E
07-09 1万+
echarts基础散点图的学习笔记。
Echarts散点图与数字翻转效果展示
标题中提到的"ECharts散点图及数字翻转效果demo"表明本内容将涉及ECharts图表库的使用，特别是散点图（气泡图）的实现以及数字翻转效果的展示。ECharts是一个使用JavaScript编写的开源可视化库，它能够在网页中创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值