Echarts前端图,地图的图标显示比例怎么调整。官网文档找不到在哪里,求前端朋友帮忙。

图片说明

上面图标这个太大了,是因为数据源里面有的很大,有的很小。我通过哪里去调节这个大小的比例和显示亮的程度,辐射的区域呢?

官网类似这种链接是:http://echarts.baidu.com/demo.html#map-polygon
我觉得主要问题是我应该修改这里:
series : [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 10)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
}
]

0

6个回答

markPoint下的 symbolSize属性,修改点的大小。
图片说明

0
en_joker
孤芳不自賞 回复flybridy: 他是可以有函数计算的。
一年多之前 回复
en_joker
孤芳不自賞 回复flybridy: 你可以写一个函数啊,根据不同的程度计算大小啊。
一年多之前 回复
flybridy
flybridy 这么写的话,每个图标都固定大小了,达不到我图中大的大小的小的效果。我想要的是目前这个程度上,设置一个最大值
一年多之前 回复

bmap里面 调下 zoom: 6 试试

0

先把 min.js 解密一下,然后在图形上右键点击检查,你看看横众坐标是多少 拿着这个坐标去ctrl+h搜索一下直接就能定位了,我是这么找过来的,希望能帮到你

0

调整这个symbolSize

symbolSize: function (val) {
return val[2] / 10;
},

series[i]-scatter.data[i].symbolSize number, Array
单个数据标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为20,高为10。

0

在symbolSize: function (val) {
return val[2] / 10;
},
里面用if else 如果val[2]大于你设定的值就return你想要的值,否则就用图中的公式

0

var data = [
    {name: '海门', value: 9},
    {name: '鄂尔多斯', value: 12},
    {name: '招远', value: 12},
    {name: '舟山', value: 12},
    {name: '齐齐哈尔', value: 14},
    {name: '盐城', value: 15},
    {name: '赤峰', value: 16},
    {name: '青岛', value: 18},
    {name: '乳山', value: 18},
    {name: '金昌', value: 19},
    {name: '泉州', value: 21},
    {name: '莱西', value: 21},
    {name: '日照', value: 21},
    {name: '胶南', value: 22},
    {name: '南通', value: 23},
    {name: '拉萨', value: 24},
    {name: '云浮', value: 24},
    {name: '梅州', value: 25},
    {name: '文登', value: 25},
    {name: '上海', value: 25},
    {name: '攀枝花', value: 25},
    {name: '威海', value: 25},
    {name: '承德', value: 25},
    {name: '厦门', value: 26},
    {name: '汕尾', value: 26},
    {name: '潮州', value: 26},
    {name: '丹东', value: 27},
    {name: '太仓', value: 27},
    {name: '曲靖', value: 27},
    {name: '烟台', value: 28},
    {name: '福州', value: 29},
    {name: '瓦房店', value: 30},
    {name: '即墨', value: 30},
    {name: '抚顺', value: 31},
    {name: '玉溪', value: 31},
    {name: '张家口', value: 31},
    {name: '阳泉', value: 31},
    {name: '莱州', value: 32},
    {name: '湖州', value: 32},
    {name: '汕头', value: 32},
    {name: '昆山', value: 33},
    {name: '宁波', value: 33},
    {name: '湛江', value: 33},
    {name: '揭阳', value: 34},
    {name: '荣成', value: 34},
    {name: '连云港', value: 35},
    {name: '葫芦岛', value: 35},
    {name: '常熟', value: 36},
    {name: '东莞', value: 36},
    {name: '河源', value: 36},
    {name: '淮安', value: 36},
    {name: '泰州', value: 36},
    {name: '南宁', value: 37},
    {name: '营口', value: 37},
    {name: '惠州', value: 37},
    {name: '江阴', value: 37},
    {name: '蓬莱', value: 37},
    {name: '韶关', value: 38},
    {name: '嘉峪关', value: 38},
    {name: '广州', value: 38},
    {name: '延安', value: 38},
    {name: '太原', value: 39},
    {name: '清远', value: 39},
    {name: '中山', value: 39},
    {name: '昆明', value: 39},
    {name: '寿光', value: 40},
    {name: '盘锦', value: 40},
    {name: '长治', value: 41},
    {name: '深圳', value: 41},
    {name: '珠海', value: 42},
    {name: '宿迁', value: 43},
    {name: '咸阳', value: 43},
    {name: '铜川', value: 44},
    {name: '平度', value: 44},
    {name: '佛山', value: 44},
    {name: '海口', value: 44},
    {name: '江门', value: 45},
    {name: '章丘', value: 45},
    {name: '肇庆', value: 46},
    {name: '大连', value: 47},
    {name: '临汾', value: 47},
    {name: '吴江', value: 47},
    {name: '石嘴山', value: 49},
    {name: '沈阳', value: 50},
    {name: '苏州', value: 50},
    {name: '茂名', value: 50},
    {name: '嘉兴', value: 51},
    {name: '长春', value: 51},
    {name: '胶州', value: 52},
    {name: '银川', value: 52},
    {name: '张家港', value: 52},
    {name: '三门峡', value: 53},
    {name: '锦州', value: 54},
    {name: '南昌', value: 54},
    {name: '柳州', value: 54},
    {name: '三亚', value: 54},
    {name: '自贡', value: 56},
    {name: '吉林', value: 56},
    {name: '阳江', value: 57},
    {name: '泸州', value: 57},
    {name: '西宁', value: 57},
    {name: '宜宾', value: 58},
    {name: '呼和浩特', value: 58},
    {name: '成都', value: 58},
    {name: '大同', value: 58},
    {name: '镇江', value: 59},
    {name: '桂林', value: 59},
    {name: '张家界', value: 59},
    {name: '宜兴', value: 59},
    {name: '北海', value: 60},
    {name: '西安', value: 61},
    {name: '金坛', value: 62},
    {name: '东营', value: 62},
    {name: '牡丹江', value: 63},
    {name: '遵义', value: 63},
    {name: '绍兴', value: 63},
    {name: '扬州', value: 64},
    {name: '常州', value: 64},
    {name: '潍坊', value: 65},
    {name: '重庆', value: 66},
    {name: '台州', value: 67},
    {name: '南京', value: 67},
    {name: '滨州', value: 70},
    {name: '贵阳', value: 71},
    {name: '无锡', value: 71},
    {name: '本溪', value: 71},
    {name: '克拉玛依', value: 72},
    {name: '渭南', value: 72},
    {name: '马鞍山', value: 72},
    {name: '宝鸡', value: 72},
    {name: '焦作', value: 75},
    {name: '句容', value: 75},
    {name: '北京', value: 79},
    {name: '徐州', value: 79},
    {name: '衡水', value: 80},
    {name: '包头', value: 80},
    {name: '绵阳', value: 80},
    {name: '乌鲁木齐', value: 84},
    {name: '枣庄', value: 84},
    {name: '杭州', value: 84},
    {name: '淄博', value: 85},
    {name: '鞍山', value: 86},
    {name: '溧阳', value: 86},
    {name: '库尔勒', value: 86},
    {name: '安阳', value: 90},
    {name: '开封', value: 90},
    {name: '济南', value: 92},
    {name: '德阳', value: 93},
    {name: '温州', value: 95},
    {name: '九江', value: 96},
    {name: '邯郸', value: 98},
    {name: '临安', value: 99},
    {name: '兰州', value: 99},
    {name: '沧州', value: 100},
    {name: '临沂', value: 103},
    {name: '南充', value: 104},
    {name: '天津', value: 105},
    {name: '富阳', value: 106},
    {name: '泰安', value: 112},
    {name: '诸暨', value: 112},
    {name: '郑州', value: 113},
    {name: '哈尔滨', value: 114},
    {name: '聊城', value: 116},
    {name: '芜湖', value: 117},
    {name: '唐山', value: 119},
    {name: '平顶山', value: 119},
    {name: '邢台', value: 119},
    {name: '德州', value: 120},
    {name: '济宁', value: 120},
    {name: '荆州', value: 127},
    {name: '宜昌', value: 130},
    {name: '义乌', value: 132},
    {name: '丽水', value: 133},
    {name: '洛阳', value: 134},
    {name: '秦皇岛', value: 136},
    {name: '株洲', value: 143},
    {name: '石家庄', value: 147},
    {name: '莱芜', value: 148},
    {name: '常德', value: 152},
    {name: '保定', value: 153},
    {name: '湘潭', value: 154},
    {name: '金华', value: 157},
    {name: '岳阳', value: 169},
    {name: '长沙', value: 175},
    {name: '衢州', value: 177},
    {name: '廊坊', value: 193},
    {name: '菏泽', value: 194},
    {name: '合肥', value: 229},
    {name: '武汉', value: 273},
    {name: '大庆', value: 279}
];

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],
    '青岛':[120.33,36.07],
    '乳山':[121.52,36.89],
    '金昌':[102.188043,38.520089],
    '泉州':[118.58,24.93],
    '莱西':[120.53,36.86],
    '日照':[119.46,35.42],
    '胶南':[119.97,35.88],
    '南通':[121.05,32.08],
    '拉萨':[91.11,29.97],
    '云浮':[112.02,22.93],
    '梅州':[116.1,24.55],
    '文登':[122.05,37.2],
    '上海':[121.48,31.22],
    '攀枝花':[101.718637,26.582347],
    '威海':[122.1,37.5],
    '承德':[117.93,40.97],
    '厦门':[118.1,24.46],
    '汕尾':[115.375279,22.786211],
    '潮州':[116.63,23.68],
    '丹东':[124.37,40.13],
    '太仓':[121.1,31.45],
    '曲靖':[103.79,25.51],
    '烟台':[121.39,37.52],
    '福州':[119.3,26.08],
    '瓦房店':[121.979603,39.627114],
    '即墨':[120.45,36.38],
    '抚顺':[123.97,41.97],
    '玉溪':[102.52,24.35],
    '张家口':[114.87,40.82],
    '阳泉':[113.57,37.85],
    '莱州':[119.942327,37.177017],
    '湖州':[120.1,30.86],
    '汕头':[116.69,23.39],
    '昆山':[120.95,31.39],
    '宁波':[121.56,29.86],
    '湛江':[110.359377,21.270708],
    '揭阳':[116.35,23.55],
    '荣成':[122.41,37.16],
    '连云港':[119.16,34.59],
    '葫芦岛':[120.836932,40.711052],
    '常熟':[120.74,31.64],
    '东莞':[113.75,23.04],
    '河源':[114.68,23.73],
    '淮安':[119.15,33.5],
    '泰州':[119.9,32.49],
    '南宁':[108.33,22.84],
    '营口':[122.18,40.65],
    '惠州':[114.4,23.09],
    '江阴':[120.26,31.91],
    '蓬莱':[120.75,37.8],
    '韶关':[113.62,24.84],
    '嘉峪关':[98.289152,39.77313],
    '广州':[113.23,23.16],
    '延安':[109.47,36.6],
    '太原':[112.53,37.87],
    '清远':[113.01,23.7],
    '中山':[113.38,22.52],
    '昆明':[102.73,25.04],
    '寿光':[118.73,36.86],
    '盘锦':[122.070714,41.119997],
    '长治':[113.08,36.18],
    '深圳':[114.07,22.62],
    '珠海':[113.52,22.3],
    '宿迁':[118.3,33.96],
    '咸阳':[108.72,34.36],
    '铜川':[109.11,35.09],
    '平度':[119.97,36.77],
    '佛山':[113.11,23.05],
    '海口':[110.35,20.02],
    '江门':[113.06,22.61],
    '章丘':[117.53,36.72],
    '肇庆':[112.44,23.05],
    '大连':[121.62,38.92],
    '临汾':[111.5,36.08],
    '吴江':[120.63,31.16],
    '石嘴山':[106.39,39.04],
    '沈阳':[123.38,41.8],
    '苏州':[120.62,31.32],
    '茂名':[110.88,21.68],
    '嘉兴':[120.76,30.77],
    '长春':[125.35,43.88],
    '胶州':[120.03336,36.264622],
    '银川':[106.27,38.47],
    '张家港':[120.555821,31.875428],
    '三门峡':[111.19,34.76],
    '锦州':[121.15,41.13],
    '南昌':[115.89,28.68],
    '柳州':[109.4,24.33],
    '三亚':[109.511909,18.252847],
    '自贡':[104.778442,29.33903],
    '吉林':[126.57,43.87],
    '阳江':[111.95,21.85],
    '泸州':[105.39,28.91],
    '西宁':[101.74,36.56],
    '宜宾':[104.56,29.77],
    '呼和浩特':[111.65,40.82],
    '成都':[104.06,30.67],
    '大同':[113.3,40.12],
    '镇江':[119.44,32.2],
    '桂林':[110.28,25.29],
    '张家界':[110.479191,29.117096],
    '宜兴':[119.82,31.36],
    '北海':[109.12,21.49],
    '西安':[108.95,34.27],
    '金坛':[119.56,31.74],
    '东营':[118.49,37.46],
    '牡丹江':[129.58,44.6],
    '遵义':[106.9,27.7],
    '绍兴':[120.58,30.01],
    '扬州':[119.42,32.39],
    '常州':[119.95,31.79],
    '潍坊':[119.1,36.62],
    '重庆':[106.54,29.59],
    '台州':[121.420757,28.656386],
    '南京':[118.78,32.04],
    '滨州':[118.03,37.36],
    '贵阳':[106.71,26.57],
    '无锡':[120.29,31.59],
    '本溪':[123.73,41.3],
    '克拉玛依':[84.77,45.59],
    '渭南':[109.5,34.52],
    '马鞍山':[118.48,31.56],
    '宝鸡':[107.15,34.38],
    '焦作':[113.21,35.24],
    '句容':[119.16,31.95],
    '北京':[116.46,39.92],
    '徐州':[117.2,34.26],
    '衡水':[115.72,37.72],
    '包头':[110,40.58],
    '绵阳':[104.73,31.48],
    '乌鲁木齐':[87.68,43.77],
    '枣庄':[117.57,34.86],
    '杭州':[120.19,30.26],
    '淄博':[118.05,36.78],
    '鞍山':[122.85,41.12],
    '溧阳':[119.48,31.43],
    '库尔勒':[86.06,41.68],
    '安阳':[114.35,36.1],
    '开封':[114.35,34.79],
    '济南':[117,36.65],
    '德阳':[104.37,31.13],
    '温州':[120.65,28.01],
    '九江':[115.97,29.71],
    '邯郸':[114.47,36.6],
    '临安':[119.72,30.23],
    '兰州':[103.73,36.03],
    '沧州':[116.83,38.33],
    '临沂':[118.35,35.05],
    '南充':[106.110698,30.837793],
    '天津':[117.2,39.13],
    '富阳':[119.95,30.07],
    '泰安':[117.13,36.18],
    '诸暨':[120.23,29.71],
    '郑州':[113.65,34.76],
    '哈尔滨':[126.63,45.75],
    '聊城':[115.97,36.45],
    '芜湖':[118.38,31.33],
    '唐山':[118.02,39.63],
    '平顶山':[113.29,33.75],
    '邢台':[114.48,37.05],
    '德州':[116.29,37.45],
    '济宁':[116.59,35.38],
    '荆州':[112.239741,30.335165],
    '宜昌':[210.3,30.7],
    '义乌':[120.06,29.32],
    '丽水':[119.92,28.45],
    '洛阳':[112.44,34.7],
    '秦皇岛':[119.57,39.95],
    '株洲':[113.16,27.83],
    '石家庄':[114.48,38.03],
    '莱芜':[117.67,36.19],
    '常德':[111.69,29.05],
    '保定':[115.48,38.85],
    '湘潭':[112.91,27.87],
    '金华':[119.64,29.12],
    '岳阳':[113.09,29.37],
    '长沙':[113,28.21],
    '衢州':[118.88,28.97],
    '廊坊':[116.7,39.53],
    '菏泽':[115.480656,35.23375],
    '合肥':[117.27,31.86],
    '武汉':[114.31,30.52],
    '大庆':[125.03,46.58]
};

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

function renderItem(params, api) {
    var coords = [
        [116.7,39.53],
        [103.73,36.03],
        [112.91,27.87],
        [120.65,28.01],
        [119.57,39.95]
    ];
    var points = [];
    for (var i = 0; i < coords.length; i++) {
        points.push(api.coord(coords[i]));
    }
    var color = api.visual('color');

    return {
        type: 'polygon',
        shape: {
            points: echarts.graphic.clipPointsByRect(points, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            })
        },
        style: api.style({
            fill: color,
            stroke: echarts.color.lift(color)
        })
    };
}

option = {
    backgroundColor: '#404a59',
    title: {
        text: '全国主要城市空气质量',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip : {
        trigger: 'item'
    },
    bmap: {
        center: [104.114129, 37.550339],
        zoom:5,
        roam: true,
        mapStyle: {
            styleJson: [
                    {
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": {
                            "color": "#044161"
                        }
                    },
                    {
                        "featureType": "land",
                        "elementType": "all",
                        "stylers": {
                            "color": "#004981"
                        }
                    },
                    {
                        "featureType": "boundary",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#064f85"
                        }
                    },
                    {
                        "featureType": "railway",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#004981"
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#005b96",
                            "lightness": 1
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "labels",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#004981"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#00508b"
                        }
                    },
                    {
                        "featureType": "poi",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "green",
                        "elementType": "all",
                        "stylers": {
                            "color": "#056197",
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "subway",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "manmade",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "local",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "labels",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "boundary",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#029fd4"
                        }
                    },
                    {
                        "featureType": "building",
                        "elementType": "all",
                        "stylers": {
                            "color": "#1a5787"
                        }
                    },
                    {
                        "featureType": "label",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    }
            ]
        }
    },
    series : [
        {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            }
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function (val) {
                return 10;// val[2] / 10;
            },
            showEffectOn: 'emphasis',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        },
        {
            type: 'custom',
            coordinateSystem: 'bmap',
            renderItem: renderItem,
            itemStyle: {
                normal: {
                    opacity: 0.5
                }
            },
            animation: false,
            silent: true,
            data: [0],
            z: -10
        }
    ]
};
-1
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
echarts设置地图大小比例,大小设置
echarts设置地图大小比例,大小设置
echarts图形的位置布局如何调整
实际过程中,你会发现图表在div中的位置不太理想这时怎么去调整呢:一般使用grid来进行调整 grid: [{ left: '5%',//距离div左边的距离 bottom: '5%',//底部 top: '5%',//顶部 right: '25%'//右边 }], 但如果是饼图调整方式就不一样 radius : [ '30%', '...
echarts 调整图表 位置 的方法
###内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以了### ###如果是想调整图表与div间上下左右留白,则设置grid属性就可以了### 如图所示: 具体如下: 1 2 3 4 5 6 7 8 9 10 11 12
echarts 圆形图(比例)
function setHuiKuanLv(huiKuanJinE,yingShouZK){ var huiKuanLv=huiKuanJinE/yingShouZK*100; huiKuanLv=Math.floor(huiKuanLv*100)/100; if(huiKuanLv>100){ huiKuanLv=100; } var noHuiKuanLv=100-huiKuanL
echarts地图上设置散点图
echarts地图上设置散点图,散点图,地图,自定义散点图,地图覆盖散点
Echarts 动态从后台获取数据进行图表的展示
Echarts 动态从后台获取数据进行图表的展示 前端部分: <!DOCTYPE html>   <meta charset="utf-8"> ECharts       <!-- 为ECharts准备一个具备大小(宽高)的Dom -->     <div id="main" style="width:
Echarts 修改地图的标示
原飞机的路径为: var planePath = '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.
基于echarts的前端地图统计插件(只有全国的)
java web前端用到的地图统计插件 echarts 全国地图 统计
echarts水滴插件
使用echarts水滴图时需要引入,You may download the lastest ECharts files on ECharts official site and download this plugin in dist directory. Note that if you need tooltip for Liquid Fill Chart, you need the complete ECharts version. Otherwise, simple version will do.
关于怎么在echarts飞机迁移图中换掉飞机图标
其实这个在API文档中也有写到,但也是花费我一些时间修改的,所以就小小的记录下:官方的例子显示的迁移图:然后我们可以在js代码中找到以下代码:var planePath = '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...
echarts图标和地图demo
研究了1个通宵,终于搞定了地图部分。还有柱状图、饼状图。在ie下可以直接打开。如果在其他浏览器下,可以发布到web服务器,或者用兼容视图打开。
echarts grid统计图占满盒子
grid:{         x:'5%',    //左上角x轴距盒子边框的距离         y:60,        //左上角Y轴距盒子边框的距离         x2:'5%',    //右下角x轴距盒子边框的距离         y2:30,     //右下角Y轴距盒子边框的距离         borderWidth:1     },...
【echarts】地图模块,展示一个动态流程图1.0(简单demo)
使用地图模块,展示一个动态流程图(简单demo) 1.先上效果图: 2.代码: html: &amp;amp;lt;!-- ec --&amp;amp;gt; &amp;amp;lt;script src=&amp;quot;../script/lib/echarts4.0/echarts.js&amp;quot; type=&amp;quot;text/javascript&amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt; &
对于ECharts3.0迁徙图的部分配置记录
业务需求,需要地区的地图背景,以及需要对交流的频率使用不同的颜色标注,预研阶段,比较丑,但是主要的功能还是实现了,备忘。<!DOCTYPE html> <html> <head> <title>迁徙图</title> </head> <body> <div id="container" style="height: 1100px;width: 1400px;"></div> <script
【Echarts】数据可视化_前端页面实现尝试
之前就听说过百度开源了一个数据可视化的项目,叫做Echarts,觉得甚是开心但一直没想起来用过,恰好前几日导师需要做一个数据可视化的东西,简单来说就是做一个热力图,自然就想到了这个,于是现学现卖做好了展示和数据处理,特此撰文记录一下。
echarts地图制作的一些问题总结
1.echarts地图不显示,只显示上面的图标。        这个问题很头大,一开始当我从官网把示例copy下来运行发现,中国地图没有显示,只显示在地图上标注各个城市位置的图标,上网查了才知道,原来是因为我没有引入china.js中国地图这个js文件才导致的地图没有加载出来,把这个js引入就可以了。现在由于官网不提供下载可以直接引入这个地址来获取china.js文件:
html 的 div 中插入E-charts 位置总在最下部怎样解决
最近在做数据可视化的项目,有一个任务就是把Echarts的柱状堆积图插入到网页中,但是这其中出现了问题,导入Echarts时总是在框架下面出现,找了好久都是丈二和尚摸不到头脑,但是同门的一句话就解决了这个问题,所以想在这里记录一下。导入Echarts的方法在这里就不多赘述,网上很多教程,先上之前的问题代码和问题网页图。&amp;lt;style type=&quot;text/css&quot;&amp;gt; .main_bott...
echarts关于地图和柱状图的结合展示
忙了好几个月的其他项目,忘了更新接下来的echarts其他的功能展示了,实在抱歉。这次讲的主要是两个地图的结合展示,echarts的官网大部分的都是柱状图和折线图一起展示的例子,对于地图和柱状图的结合展示很少,我找了半天也只有饼图和柱状图的结合(PS:最后还是找到了,挖了很久.....)。 这边我先展示下效果图给大家看下: 上图的柱状图的数据和地图上的数据可以不一致,两者的数据源可以在地图的配
自定义Echarts地理分布图tooltip显示内容
在为某省开发手机版环境监测系统中需要在Echarts tooltip 中展示特定的内容,echarts默认的展示方案并不能满足我们的需求,因此就需要我们进行手动改造。 最终效果图:实现原理通过echarts提供的formatter参数自定义我们所需要展示的内容具体实现方法1、首先在格式化数据的时把我们所需要展示的数据传入到echarts图表中,例如: for(let m of this.p
echarts实现地图攻击
使用echarts实现地图攻击,源代码包含html js cs 使用echarts实现地图攻击,源代码包含html js cs
ECharts实现中国地图数据可视化
项目中数据可视化已经太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts;一般都有折线图、柱形图、饼形图,还有常见的地图,今天就地图来说一下——中国地图。 1、首先官网上下载一个echart.js或echart.min.js,如下根据自己的需要下载对应的文件。网址:https://echarts.baidu.com/ 2、下载中国地图插件china....
echarts 地图轨迹图 修改地图颜色 实现轨迹汇入 输出
&amp;lt;script type=&quot;text/javascript&quot; src=&quot;js/bmap.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script type=&quot;text/javascript&quot; src=&quot;/js/china.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;script type=&quot;text/jav
Echarts3实现省和单列市数据(动态涟漪图)
包含实现的全部文件和代码,下载之后可以直接使用。动态实现了省和四个计划单列市的数据,根据涟漪的波浪大小来比较数据的大小,显得高大上。代码里面有详细说明可以根据需求修改。如要实现更多城市的数据,则直接添加两个json数据即可,方便实用
Echarts bar图标怎么显示百分比
打开链接:http://echarts.baidu.com/echarts2/doc/example/bar14.html 将代码更改为如下代码: option = { title: { x: 'center', text: 'Age', subtext: 'Rainbow bar for Age', link: 'htt
前端利用echart绘制json打点地图
      最近做的项目,想在首页添加一个武汉市的地图,然后点击每个区相应的渲染这个区的数据,开始考虑用echart做,可是echart上的一些图都不太精确,一些小的区放大后基本是方形,没有地图的样子。       后来研究了一下echart地图的原理,就是把一个json格式的数据通过registerMap方法在页面中打点画出来,那么我们可以改变json中的点位来达到精确的效果,这里有几个链接可供...
关于引用百度Echarts的那些事--天气情况不显示图标
遇到插入饼图天气时,没有出现天气图标,怎么解决?不要着急,我来告诉你怎么解决。 var weatherIcons = { 'Sunny': './data/asset/img/weather/sunny_128.png', 'Cloudy': './data/asset/img/weather/cloudy_128.png', 'Showers': './data/...
echarts3 实现中国地图
echarts3 实现中国地图 直接贴代码 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt;Title&amp
【echarts】用地图模块做动态流程图2.0(根据后台数据自动均匀排布,且实时更新节点状态)
1.效果 2.说明 这个升级版几乎就是我们公司用的这个功能了,设计到的功能就是可以根据后台数据重新进行位置排布,且实时刷新节点的数据。用ec写出这个效果不难,参考demo1 这个主要是设计到如何根据数据进行重新排布,实时刷数据,这些都是ec插件没有的,需要我们去苦逼手写的。 3.代码: 3.1要知道的: 其实在敲代码前,就应该意识到和后台要的数据是什么样的,要知道我们是用地图模块实现...
ECharts中国地图篇-名称经纬度调整
一、 网址: http://echarts.baidu.com/download.html 点击: 完整 下载文件: echarts.min.js网址: http://echarts.baidu.com/download-map.html 点击: 中国地图 - JS 下载文件:
echarts实现2D世界地图
效果图   代码 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0
Eacharts整理各种图标、地图数据全部内容
内容包含:各种图表Demo、API文档,地图开发教程,Eacharts3与Eacharts2整合开发教程,后面会更新上传Eacharts与Arcgis整合开发教程
echarts地图显示图例对应地点去除标识小圆点
去掉首页地图中地图标识小圆点,原因是地图加上legend属性后会出现地图标识点,需要在地图的series.itemStyle中加上color :'transparent’即可
echarts自定义地图(想怎么画就怎么画)
echarts自定义地图,各区地图,街道地图,区县地图,详细地图,省市地图
Echarts动态生成图标
1.引入js文件----echart.js 2.根据year软动态生成图标 function chartExport(year) // 路径配置 require.config({    paths: {        echarts: 'http://echarts.baidu.com/build/dist'    } }); // 使用 require(    
关于ECharts中调整容器与图表的位置关系
本文转自https://blog.csdn.net/qq_34171965/article/details/82115239 感谢博主! 在vue中一个组件需要通过点击事件来切换不同的图表样式和数据,在写的过程中发现上一个图表的位置和下一个图表的位置大小差之甚远,但是图表容器的大小是一样的,后发现是图表和容器的位置问题,解决如下: 方式1:手动调整图表的位置 在grid中有四个属性:left,r...
echarts 修改地图的大小
1.地图 series: [                 {                     //name: '香港18区人口密度',                     type: 'map',                     mapType: 'jiangsu', // 自定义扩展图表类型                     zoom: 1.2,   //这里是关...
ECharts如何制作省份地图并在地图上显示自定义图标
之前一直被客户提的一个需求烦恼着,他要只显示某个省份的地图,并且呢要在地图上显示小车的图标,还有其它一些点的信息。我以前只用过echarts做过图表,没做过地图,所以自己也是网上看了很多并且看了很多api文档,最后总算是搞出来了,在这里留个笔记方便自己也方便别人。 步入正题之前需要下几个文件 echats的js文件,自己可以去官网上下 地图省份的数据 (...
echarts中通过markPoint添加自定义图形箭头
markPoint可以通过svg自定义图形,然后通过path引入 详细参考此篇文章:https://blog.csdn.net/qq_39759115/article/details/80506194 我的代码也是基于以上博客 我画的图形是一个箭头 如图 其中path:      symbol:'path://M0 0 h 300 v -20 l 80 40 l -80 40 v -20...
echarts使图标能自适应浏览器窗口变化,及经纬度转换
1、echarts使图标能自适应浏览器窗口变化 window.onresize = function () { myChart.resize(); //使第一个图表适应 myChart_pieMain.resize(); // 使第二个图表适应 } 2、map地图中经纬度与平面坐标转换      var arr = [117,36.4];      ale
ECharts 去掉地图(map)的指示图(visualMap)
ECharts 去掉地图(map)的指示图(visualMap): 只需要将visualMap的show改为false即可(只是隐藏指示,设置的颜色,最大最小值等映射都不会影响): myChart.setOption(option = { visualMap: { show: false } });
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 extjs glyph 图标 mysql关联查询两次本表 native底部 react 前端全栈工程师 前端怎么学习java

相似问题

4
判断下拉列表中的值,实现页面跳转,请问这个怎么判断?
5
在html前端页面中密码输入框,输入一个字符显示明文,过一秒后再变*号的效果如何用js实现
0
后台传来的json对象在前端页面显示不完整
0
关于前端引用winmd后出现的问题
5
在MyEclipse里面的用tomcat部署好项目以后,在浏览器显示不了前端,但是后台能够打开
1
前端微信分享 iOS时好时坏 求助,救救孩子
2
SpringBoot前后端分离API接口怎么保证API接口的安全性?
3
前端问题:ajax请求获取了pdf 文件流,怎么在线展示
0
小程序地图上图标移动问题
2
我想在前端页面中做一个类似于win10设置的鼠标移动显示鼠标附近的border
4
怎样分析前端传给controller的参数有哪些,以及他们的类型
2
这两个鼠标事件有大部分代码重复,怎么才能合并重复代码呢?
3
这样写前端图片上传组件,还缺什么吗?为何404
3
我是看视频自学的。淘淘项目的前端看不懂。
5
css前端问题,新手求解决
4
JQuery有个语法问题没看懂,涉及到JS很多概念,希望前端大牛,JS大牛,给我这个非专业码农讲解下
2
pagehelper的问题。page和row写法是固定的?不需要和前端标齐吗
2
怎么用vue.js 在前端嵌套遍历这样的数据,可以像京东那样在首页显示商品层级分类的
0
网站实现注册,登录,上传多图,分享功能需要怎么做?
5
新手 前端 html css