程序博客网 > 捕鱼游戏源码搭建教程

echarts散点图使用

来源：互联网 发布：捕鱼游戏源码搭建教程 编辑：程序博客网 时间：2024/05/17 19:16

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.csdn.net/tototuzuoquan/article/details/70353939

0 0
捕鱼游戏源码搭建教程 捕鱼游戏源码搭建教程
原创粉丝点击
热门IT博客
恒大品牌部网络监控员恒大品牌部网络监控员
台湾人深圳知乎台湾人深圳知乎
ubuntu 16.04如何安装
seo网络优化公司
单片机的内部资源
beta理财顾问软件
剑雨江湖进阶数据灵羽
空调品牌 知乎
win7无网络无盘重装
马云怎么靠淘宝挣钱
如何实时抓取网页数据
官知止而神欲行的知
零点研究咨询集团 知乎
网络系统管理工程师
echarts源码下载
sqlite数据库
档案制作软件
webshell检测 python
c语言逻辑表达式的值
微观经济数据库
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 洗衣机泡沫太多怎么办 白色羊绒衫发黄怎么办 自动离职公积金怎么办 自离公积金怎么办 羊毛被掉毛怎么办妙招 羊毛被钻毛严重怎么办 被套掉毛很厉害怎么办 羊毛被子有味怎么办 羊绒被跑毛怎么办 被子掉毛怎么办 驼毛被掉毛怎么办 驼绒被掉毛怎么办 羊绒被钻毛怎么办 羊毛被出毛怎么办 羊毛被有骚味怎么办 晒伤后脱皮怎么办 晒伤脱皮怎么办 被太阳晒黑怎么办 晒太阳长斑怎么办 皮肤晒伤后痒怎么办 白掌烂根了怎么办 薄荷长高了怎么办 阳台洗衣机漏水怎么办 洗衣机挨着淋浴怎么办 开放式阳台飘雨怎么办 洗衣液倒多了怎么办 滚筒洗衣机毛毛怎么办 被子黄了怎么办 羽绒服有臭味怎么办 鸭绒有味道怎么办 羽绒服气味大怎么办 羽绒服味道很大怎么办 羽绒服臭鸭毛味怎么办 鹅绒有味道怎么办 羽绒服水洗后怎么办 羽绒被坏了怎么办 蚕丝被脏了怎么办 湿气大怎么办 羊毛被掉毛有味怎么办 羽绒被团在一起怎么办 羽绒被跑毛怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里