echarts四川省地图+物质流+个性化标注

var uploadedDataURL = “/asset/get/s/data-1528971808162-BkOXf61WX.json”;

/**
此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存,来达到hover散点和区域显示tooltip的效果

默认情况下,map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话,map 和 其他 series(例如散点图)就可以共享一个 geo 组件了。并且,geo 组件的颜色也可以被这个 map series 控制,从而用 visualMap 来更改。
当设定了 geoIndex 后,series-map.map 属性,以及 series-map.itemStyle 等样式配置不再起作用,而是采用 geo 中的相应属性。

http://echarts.baidu.com/option.html#series-map.geoIndex

并且加了pin气泡图标以示数值大小
*/
//煤炭
var meitanArr = [{
name: ‘石家庄’,
value: [114.528833, 38.03888, 100],
type: ‘meitan’
}
];
// 电石
var dianshiArr = [{
name: ‘邢台’,
value: [114.501237, 37.086934, 100],
type: ‘dianshi’
}
];
//原盐
var yuanyanArr = [{
name: ‘衡水’,
value: [115.697061, 37.747281, 100],
type: ‘yuanyan’
}
];

//烧碱
var shaojianArr = [{
name: ‘邯郸’,
value: [114.556429, 36.61379, 100],
type: ‘shaojian’
},
{
name: ‘长治市’,
value: [113.126874, 36.200568, 100],
type: ‘shaojian’
}
];

//PVC
var PVCArr = [{
name: ‘保定’,
value: [115.476293, 38.877914, 100],
type: ‘PVC’
}

];
// 纸浆
var zhijiangArr = [{
name: ‘沧州’,
value: [116.874488, 38.329313, 100],
type: ‘zhijiang’
}

];

//印染
var yinranArr = [{
name: ‘连云港市’,
value: [119.22891, 34.602487, 100],
type: ‘yinran’
}
];

//氧化铝
var yanghualvArr = [{
name: ‘朔州市’,
value: [112.440236, 39.336887, 100],
type: ‘yanghualv’
}
];

//粘胶纤维
var zhanjiaoxianweiArr = [{
name: ‘张家口’,
value: [114.905977, 40.76455, 100],
type: ‘zhanjiaoxianwei’
}
];

//洗涤剂
var xidijiArr = [{
name: ‘绍兴市’,
value: [120.586914, 30.03662, 100],
type: ‘xidiji’
}
];
var points = [{
name:‘宜宾市’,
value: [104.6494037048691, 28.75800702855183],
itemStyle: {
color: ‘#00FFF0’
}
}, {
name:‘乐山市’,
value: [103.7725376036347, 29.55794071745811],
itemStyle: {
color: ‘#00FFF0’
}
}, {
name:‘昭通市’,
value: [103.72351177196889, 27.34408386024681],
itemStyle: {
color: ‘#00FFF0’
}
},{
name:‘太原市’,
value: [112.55639149167205, 37.87698902884778],
itemStyle: {
color: ‘#00FFF0’
}
},
{
name:‘绵阳市’,
value: [104.6855618607612, 31.473663048745864],
itemStyle: {
color: ‘#F0E93C’
}
},
{
name:‘攀枝花’,
value: [101.72554117091441, 26.58803317333301],
itemStyle: {
color: ‘#F0E93C’
}
},
{
name:‘云阳’,
value: [108.70344750000172, 30.93661127197471],
itemStyle: {
color: ‘#00FFF0’
}
},
{
name:‘铜仁市’,
value: [109.19643889817665, 27.73778645640524],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘临沧市’,
value: [100.09544042014869, 23.89046855627851],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘盐城市’,
value: [120.167544265761, 33.355100917626199],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘台州市’,
value: [121.42743470427969, 28.66219405599615],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘河源市’,
value: [114.70744627290641, 23.749684370959753],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘榆林市’,
value: [109.74161603381396, 38.290883835484049],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘邯郸市’,
value: [117.20359278135502, 39.15348514470478],
itemStyle: {
color: ‘#F0E93C’
}
}, {
name:‘邵阳市’,
value: [111.474432885931, 27.245270272808566],
itemStyle: {
color: ‘#F0E93C’
}
}]
// var uploadedDataURL = “/asset/get/s/data-1482909892121-BJ3auk-Se.json”;
myChart.showLoading();
let index = -1;

$.getJSON(uploadedDataURL, function(geoJson) {

echarts.registerMap('china', geoJson);
myChart.hideLoading();
var max = 480,
    min = 9;
var maxSize4Pin = 100,
    minSize4Pin = 20;
option = {
    backgroundColor: '#183D6B',
    geo: {
        map: 'china',
        center: [108.70344750000172,30.93661127197471],
        aspectScale: 0.75, //长宽比
        zoom: 2.5,
        roam: false,
    },
    series: [{
            type: 'map',
            map: 'china', //使用
            center: [108.70344750000172,30.93661127197471],
            roam: false,
            zoom: 2.5,
            selectedMode: 'single',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: 'rgba(255,255,255,0.5)'
                    }
                },
                emphasis: {
                    textStyle: {
                        color: 'rgba(255,255,255,0.5)'
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(41, 97, 177, 0.2)',
                    borderWidth: 1,
                    areaColor: '#0C172F'
                },
                emphasis: {
                    areaColor: '#0C172F',
                    // borderColor: '#00FFF0',
                    // //    shadowColor: 'rgb(12,25,50)',
                    // borderWidth: 2
                }
            },
            
            //     roam: false,
            
            data: [{
                name: '四川',
                label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#1DE9B6'
                    }
                },
                emphasis: {
                    itemStyle:{
                        areaColor: 'red',
                    },
                    
                    textStyle: {
                        color: '#fff',
                        fontSize:18
                    }
                }
            },
                selected: true,
                itemStyle: {
                    borderColor: '#00FFF0',
                    shadowColor: '#36BFF7',
                    shadowBlur: 10,
                    borderWidth: 3,
                    areaColor: 'red'
                }
            } // selected:true 默认选中
        ]
            // data: this.difficultData //热力图数据   不同区域 不同的底色
        }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',
            
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值