echarts地圖上實現柱狀圖
阿新 • • 發佈:2019-01-24
<script type="text/javascript"> function initEchartsMap() { var dom = document.getElementById("qianxi"); var myChart = echarts.init(dom); var app = {}; option = null; var geoCoordMap = { '宿遷':[120.1578,32.8359], '徐州': [120.1578,33.5893], '無錫':[119.7701,32.9695], '鎮江':[119.7701,33.9695], }; var BJData = [ [{name:'鹽城'}, {name:'宿遷',value:10}], ]; var BJData2 = [ [{name:'鹽城'}, {name:'徐州',value:10}], ]; var BJData3 = [ [{name:'鹽城2'}, {name:'無錫',value:10}] ]; var BJData4 = [ [{name:'鹽城2'}, {name:'鎮江',value:10}] ]; 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.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'; var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var fromCoord = geoCoordMap[dataItem[0].name]; var toCoord = geoCoordMap[dataItem[1].name]; if (fromCoord && toCoord) { res.push({ fromName: dataItem[0].name, toName: dataItem[1].name, coords: [fromCoord, toCoord] }); } } return res; }; var color = ['#a6c84c', '#ffa022', '#46bee9']; var series = []; [['鹽城', BJData]].forEach(function (item, i) { series.push( { name: item[0] + ' 流出量 ', type: 'lines', zlevel: 2, lineStyle: { normal: { color: '#b0e24b', width: 20, opacity: 2 } }, data: convertData(item[1]) }); series.push( { name: item[0] + ' 流入量 ', type: 'lines', zlevel: 2, lineStyle: { normal: { color: '#fe7c00 ', width: 20, opacity: 2 } }, data: convertData(BJData2) }); }); [['班線', BJData3]].forEach(function (item, i) { series.push( { name: item[0] + ' 流出量 ', type: 'lines', zlevel: 2, lineStyle: { normal: { color: '#b0e24b', width: 20, opacity: 2 } }, data: convertData(item[1]) }); series.push( { name: item[0] + ' 流入量 ', type: 'lines', zlevel: 2, lineStyle: { normal: { color: '#fe7c00 ', width: 20, opacity: 2 } }, data: convertData(BJData4) }); }); option = { backgroundColor: '#ffffff', title : { text: '', subtext: '', left: 'center', textStyle : { color: '#fff' } }, tooltip : { trigger: 'item' }, legend: { orient: 'vertical', top: 'bottom', left: 'right', data:[''], textStyle: { color: '#fff' }, selectedMode: 'single' }, geo: { map: '江蘇', label: { emphasis: { show: false } }, roam: true, itemStyle: { normal: { areaColor: '#5c8bb7', borderColor: '#404a59' }, emphasis: { areaColor: '#3897c5' } } }, series: series }; if (option && typeof option === "object") { myChart.setOption(option, true); } } </script>
<pre name="code" class="html"><div class="flow_three_aa fl">
<p class="title1">班線統計分佈圖</p>
<div id="qianxi"></div>
</div>
css樣式無
最近做圖表報表,上頭讓做一個在echarts地圖上顯示柱狀圖,但是echarts只支援柱狀圖,所以借了這個投機取巧的辦法,畫線加粗。