1 function echarts_map (thisId,data){ 2 $.get(‘map/json/henan.json‘, function (chinaJson) { 3 echarts.registerMap(‘henan‘, chinaJson); 4 var chart = echarts.init(document.getElementById(thisId)); 5 chart.setOption({ 6 7 visualMap: { 8 show:false,//不显示也有颜色区分的效果 9 min: 0, 10 max: 50000, 11 left: ‘left‘, 12 top: ‘bottom‘, 13 text: [‘高‘,‘低‘], // 文本,默认为数值文本 14 calculable: false,//是否显示可拖动的句柄 15 inRange: { 16 color: [‘rgba(15,220,150,.5)‘,‘#00415a‘,] 17 } 18 }, 19 tooltip: { 20 trigger: ‘item‘, 21 showDelay: 0, 22 backgroundColor: ‘#c6e8e9‘,//浮框背景色 23 transitionDuration: 0.2, 24 formatter: function (params) {//设置提示框内的文字 25 var p = ‘<h3 style="color:#29667b;text-align:center;font-size:14px;font-weight:bold;line-height:20px;">[‘+params.name+‘]</h3>‘+ 26 ‘<p style="color:#26677b;font-size:12px;">今日累计用户数:‘+params.data.uv+‘</p>‘+ 27 ‘<p style="color:#26677b;font-size:12px;">当前活跃用户数:‘+params.data.iuv+‘</p>‘ 28 return p; 29 } 30 }, 31 series: [{ 32 type: ‘map‘, 33 map: ‘henan‘, 34 roam: false,//标识是否可以缩放和拖动 35 aspectScale:1.1,//设置地图的长宽比 数值越大 高度越小 数值越小 宽度越小 36 zoom:1.25,//定义当前视角的缩放比 37 label: { 38 normal: { 39 show: false,//标示是否显示提示文字 40 }, 41 emphasis: { 42 show: false 43 } 44 }, 45 itemStyle:{ 46 normal:{ 47 areaColor:‘rgba(15,220,150,.5)‘ 48 } 49 }, 50 data:data 51 }] 52 }); 53 chart.on(‘mouseover‘, function (e) { 54 e.event.target.style.fill = ‘#00415a‘; 55 }); 56 }); 57 };
时间: 2024-10-06 14:39:14