现在位置首页 / 前端开发 /正文

echarts散点图使用

作者: IT小兵 | 2016年12月21日| 热度:℃ | 评论: |参与:

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地图中的特殊标记

<!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>


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询