| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- $(function () {
- map();
- function map() {
- // 基于准备好的dom,初始化echarts实例
- var myChart = echarts.init(document.getElementById('map'));
- var data = [
- // {name: '乳山寨镇', value: 199},
- {name: '乳山寨镇', value: 129},
- {name: '乳山寨镇1', value: 189},
- ];
- var geoCoordMap = {
- // '乳山寨镇':[121.5,36.9],
- '乳山寨镇':[121.5,36.9],
- '乳山寨镇1':[121.5,36.8],
- }
- var convertData = function (data) {
- console.log(data)
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- console.log(geoCoord)
- console.log(geoCoord.concat(data[i].value))
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value)
- });
- }
- }
- return res;
- };
- option = {
- // backgroundColor: '#404a59',
- title: {
- text: '',
- sublink: '',
- left: 'center',
- textStyle: {
- color: '#fff'
- }
- },
- tooltip : {
- trigger: 'item1',
- formatter:'{b}{c}'
- },
-
- geo: {
- map: 'rushan',
- label: {
- emphasis: {
- show: false
- }
- },
- roam: false,
- zoom:1.3,
- itemStyle: {
- normal: {
- areaColor: 'rgba(2,37,101,.5)',
- borderColor: 'rgba(112,187,252,.5)'
- },
- emphasis: {
- areaColor: 'rgba(2,37,101,.8)'
- }
- }
- },
- series : [
- {
- name: '',
- type: 'scatter',
- coordinateSystem: 'geo',
- data: convertData(data),
- symbolSize: function (val) {
- return val[2] / 15;
- },
- label: {
- normal: {
- formatter: '{b}',
- position: 'right',
- show: true
- },
- emphasis: {
- show: true
- }
- },
- itemStyle: {
- normal: {
- color: '#ffeb7b'
- }
- }
- }
- ]
- };
-
- myChart.setOption(option);
- window.addEventListener("resize",function(){
- myChart.resize();
- });
- }
- })
|