引入js
<script type="text/javascript" src="../e5script/new-js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../script/echarts/echarts-all.js"></script>
定义一个div
<!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:260px;"></div>
获取json数据
var time = 7; $.ajax({ url:"../xxxx/getXxx.do",//从后台获取json数据 type:"POST", data:{time:time}, dataType:"json", success:function(data){ drawMap(time,data);//绘制地图 }, error:function(data){ alert("获取数据异常"); } });
绘制地图
function drawMap(time,dataArr){ var myChart = echarts.init(document.getElementById('main')); var option = { backgroundColor: '#1b1b1b', color: ['gold','aqua','lime'], title : { text: xxx地图-全部站点-'+time+'天', x:'center', textStyle : { color: '#fff' } }, tooltip : { trigger: 'item', formatter: '{b}' }, legend: { orient: 'vertical', x:'left', data:['已授权', '...', '...', '...'],//自定义内容,可以通过函数获取自定义数组 selectedMode: 'multiple', textStyle : { color: '#fff' } }, toolbox: { show : true, orient : 'vertical', x: 'right', y: 'center', feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, dataRange: { min : 0, max : 100, calculable : true, color: ['#ff3333', 'orange', 'yellow','lime','aqua'], textStyle:{ color:'#fff' } }, series : [ { name: '全国', type: 'map', roam: true, hoverable: false, mapType: 'china', itemStyle:{ normal:{ borderColor:'rgba(100,149,237,1)', borderWidth:0.5, areaStyle:{ color: '#1b1b1b' } } }, data:[], markLine : { smooth:true, symbol: ['none', 'circle'], symbolSize : 1, itemStyle : { normal: { color:'#fff', borderWidth:1, borderColor:'rgba(30,144,255,0.5)' } }, data : getPlaces()//获取国家城市,如“[[{name:'北京'},{name:'包头'}]” }, geoCoord: getGeoCoord()//获取城市地理坐标,如“'上海市': [121.4648,31.2891]” }, { name: '已授权', type: 'map', mapType: 'china', data:[], markLine : { smooth:true, effect : { show: true, scaleSize: 1, period: 30, color: '#fff', shadowBlur: 10 }, itemStyle : { normal: { borderWidth:1, lineStyle: { type: 'solid', shadowBlur: 10 } } }, data : [[{ name: "天津" }, { name: "保定", value: 814 }]] }, markPoint : { symbol:'emptyCircle', /*symbolSize : function (v){ return 10 + v/10 },*/ effect : { show: true, shadowBlur : 0 }, itemStyle:{ normal:{ label:{show:false} }, emphasis: { label:{position:'top'} } }, data : [{ name: "保定", value: 814 }] } }, {...}, {...}, {...} } ] };
//遍历json对象,填充图表数据 for (var k = 0; k < 4; k++) { for (var j = 0; j < dataArr.Data.ReprintMap.length; j++) { option.series[k+1].markLine.data[j] = [{ name: dataArr.Data.ReprintMap[j].mediaName }, { name: dataArr.Data.ReprintMap[j].smediaName, value: dataArr.Data.ReprintMap[j].sum }]; option.series[k+1].markPoint.data[j] = { name: dataArr.Data.ReprintMap[j].smediaName, value: dataArr.Data.ReprintMap[j].sum }; } } myChart.setOption(option); }
地图大致如下: