对于ECharts3.0迁徙图的部分配置记录

来源：互联网发布：卖好看的书包的淘宝店编辑：程序博客网时间：2024/05/16 17:20
业务需求，需要地区的地图背景，以及需要对交流的频率使用不同的颜色标注，预研阶段，比较丑，但是主要的功能还是实现了，备忘。
<!DOCTYPE html><html><head>    <title>迁徙图</title></head><body><div id="container" style="height: 1100px;width: 1400px;"></div><script src="js/echarts.min.js"></script><script src="js/ddk.js"></script><script type="text/javascript">    var dom = document.getElementById("container");    var myChart = echarts.init(dom);    var geoCoordMap = {        '育才小学':[106.487632,29.486692],        '跳瞪小学': [106.44258,29.404382],        '马王小学':[106.491697,29.49302],        '晋愉绿岛':[106.466861,29.485048],        '钢花小学':[106.484382,29.465458],        '乌龟石':[106.411681,29.396306],        '绿地城':[106.49608,29.418906],        '采石场':[106.407561,29.347688],        '梅子湾':[106.463351,29.392567]    };    var BJData = [        [{name: '育才小学'}, {name: '跳瞪小学',value: 90}],        [{name: '育才小学'}, {name: '马王小学',value: 70}],        [{name: '育才小学'}, {name: '晋愉绿岛',value:40}],        [{name: '育才小学'}, {name: '钢花小学',value:20}]    ];    var SHData = [        [{name: '跳瞪小学'}, {name: '乌龟石',value: 90}],        [{name: '跳瞪小学'}, {name: '绿地城',value: 60}],        [{name: '跳瞪小学'}, {name: '梅子湾',value:70}],        [{name: '跳瞪小学'}, {name: '育才小学',value:40}],        [{name: '跳瞪小学'}, {name: '采石场',value:10}]    ];    //自定义图标路径    var iconPath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';    var convertData = function(data) {        var res = [];        for (var i = 0; i < data.length; i++) {            var dataItem = data[i];            var fromCoord = geoCoordMap[dataItem[1].name];            var toCoord = geoCoordMap[dataItem[0].name];            if (fromCoord && toCoord) {                res.push({                    fromName: dataItem[1].name,                    toName: dataItem[0].name,                    numValue: dataItem[1].value,                    coords: [fromCoord, toCoord]                });            }        }        return res;    };    var color = ['#46bee9','gold'];    var color1 = ['#ff3333','orange','lime','aqua'];    var series = [];    [['育才小学', BJData],['跳瞪小学', SHData]].forEach(function(item, i) {        series.push({            name: item[1],            type: 'lines',            zlevel: 1,            effect: {                show: true,                period: 6,                trailLength: 0.7,                color: '#fff',                symbolSize: 4            },            label: {                normal: {                    show: true,                    position: 'right',                    formatter: '{b}'                }            },            lineStyle: {                normal: {                    color: function(params){                        var num = params.data.numValue;                        if(num>75){                            return color1[0];                        }else if(num>50){                            return color1[1];                        }else if(num>25){                            return color1[2];                        }else{                            return color1[3];                        }                    },                    width: 1,                    curveness: 0.2                }            },            data: convertData(item[1])        }, {            name: item[0].name,//这个写成这样可以实现**>**的这种效果            type: 'lines',            zlevel: 2,            effect: {                show: true,                period: 6,                trailLength: 0,                symbol: iconPath,                symbolSize: 30            },            itemStyle: {                normal: {                    borderWidth: 1,                    lineStyle: {                        type: 'solid',                        shadowBlur: 10                    }                }            },            lineStyle: {                normal: {                    color: function(params){                        var num = params.data.numValue;                        if(num>75){                            return color1[0];                        }else if(num>50){                            return color1[1];                        }else if(num>25){                            return color1[2];                        }else{                            return color1[3];                        }                    },                    width: 1,                    opacity: 0.9,                    curveness: 0.2                }            },            data: convertData(item[1])        }, {            name: item[0],            type: 'effectScatter',            coordinateSystem: 'geo',            zlevel: 2,            rippleEffect: {                brushType: 'stroke'            },            label: {                normal: {                    show: true,                    position: 'right',                    formatter: '{b}'                }            },            symbolSize: function (val) {                return val[2] / 8;            },            itemStyle: {                normal: {                    color: function(params){                        var str = params.value;                        var num = str[2];                        if(num>75){                            return color1[0];                        }else if(num>50){                            return color1[1];                        }else if(num>25){                            return color1[2];                        }else{                            return color1[3];                        }                    }                }            },            data: item[1].map(function (dataItem) {                return {                    name: dataItem[1].name,                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])                };            })        });    });    option = {        backgroundColor: '#404a59',        title: {            text: '',            subtext: '',            left: 'center',            textStyle: {                color: '#fff'            }        },        tooltip: {            trigger: 'item'        },       /*dataRange: {            min: 0,            max: 100,            calculable: true,            color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],            textStyle: {                color: '#fff'            }        },*/        legend: {            orient: 'vertical',            top: 'bottom',            left: 'right',            data: [],            textStyle: {                color: '#fff'            },            selectedMode: 'single'        },        geo: {            map: 'ddk',            label: {                emphasis: {                    show: false                }            },            roam: true,            itemStyle: {                normal: {                    areaColor: '#323c48',                    borderColor: '#404a59'                },                emphasis: {                    areaColor: '#2a333d'                }            }        },        series: series    };    if (option && typeof option === "object") {        myChart.setOption(option, true);    }</script></body></html>
这里写图片描述
阅读全文
0 0