html+js+css+接口交互+echarts實例一枚
1. 解決了echarts的展示javascript
2. 解決了echarts全屏幕展示（width:100%;height:100%;）html
3. 解決了向接口取數據問題java
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>xxx可視化數據中心</title> <!-- 引入 echarts.js --> <script src="/static/echarts.min.js"></script> <script src="/static/china.js"></script> </head> <style> html, body { width: 100%; height: 100%; margin: 0; } </style> <body> <!-- 爲ECharts準備一個具有大小（寬高）的Dom --> <div id="left" style="width: 75%;height:100%;float:left;"></div> <div id="rtop" style="width: 25%;height:50%;float:left;background:#404a59;display:none;"> <p class="voice" style="font-size:24px;font-weight:bold;color:#3dbfda;margin-top:100px;">今日請求總量：<span class="voiceCount" style="color:#ddb926"></span></p> <p class="device" style="font-size:24px;font-weight:bold;color:#3dbfda">今日活躍數：<span class="deviceCount" style="color:#ddb926"></span></p> <p class="city" style="font-size:24px;font-weight:bold;color:#3dbfda">今日活躍城市數：<span class="cityCount" style="color:#ddb926"></span></p> </div> <div id="right" style="width: 25%;height:50%;float:left;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('left')); var barChart = echarts.init(document.getElementById('right')); // 指定圖表的配置項和數據 var data = []; var geoCoordMap = { '海門': [121.15, 31.89], '鄂爾多斯': [109.781327, 39.608266], '招遠': [120.38, 37.35], '舟山': [122.207216, 29.985295], '齊齊哈爾': [123.97, 47.33], '鹽城': [120.13, 33.38], '赤峯': [118.87, 42.28], '青島': [120.33, 36.07], '乳山': [121.52, 36.89], '金昌': [102.188043, 38.520089], '泉州': [118.58, 24.93], '萊西': [120.53, 36.86], '日照': [119.46, 35.42], '膠南': [119.97, 35.88], '南通': [121.05, 32.08], '拉薩': [91.11, 29.97], '雲浮': [112.02, 22.93], '梅州': [116.1, 24.55], '文登': [122.05, 37.2], '上海': [121.48, 31.22], '攀枝花': [101.718637, 26.582347], '威海': [122.1, 37.5], '承德': [117.93, 40.97], '廈門': [118.1, 24.46], '汕尾': [115.375279, 22.786211], '潮州': [116.63, 23.68], '丹東': [124.37, 40.13], '太倉': [121.1, 31.45], '曲靖': [103.79, 25.51], '煙臺': [121.39, 37.52], '福州': [119.3, 26.08], '瓦房店': [121.979603, 39.627114], '即墨': [120.45, 36.38], '撫順': [123.97, 41.97], '玉溪': [102.52, 24.35], '張家口': [114.87, 40.82], '陽泉': [113.57, 37.85], '萊州': [119.942327, 37.177017], '湖州': [120.1, 30.86], '汕頭': [116.69, 23.39], '崑山': [120.95, 31.39], '寧波': [121.56, 29.86], '湛江': [110.359377, 21.270708], '揭陽': [116.35, 23.55], '榮成': [122.41, 37.16], '連雲港': [119.16, 34.59], '葫蘆島': [120.836932, 40.711052], '常熟': [120.74, 31.64], '東莞': [113.75, 23.04], '河源': [114.68, 23.73], '淮安': [119.15, 33.5], '泰州': [119.9, 32.49], '南寧': [108.33, 22.84], '營口': [122.18, 40.65], '惠州': [114.4, 23.09], '江陰': [120.26, 31.91], '蓬萊': [120.75, 37.8], '韶關': [113.62, 24.84], '嘉峪關': [98.289152, 39.77313], '廣州': [113.23, 23.16], '延安': [109.47, 36.6], '太原': [112.53, 37.87], '清遠': [113.01, 23.7], '中山': [113.38, 22.52], '昆明': [102.73, 25.04], '壽光': [118.73, 36.86], '盤錦': [122.070714, 41.119997], '長治': [113.08, 36.18], '深圳': [114.07, 22.62], '珠海': [113.52, 22.3], '宿遷': [118.3, 33.96], '咸陽': [108.72, 34.36], '銅川': [109.11, 35.09], '平度': [119.97, 36.77], '佛山': [113.11, 23.05], '海口': [110.35, 20.02], '江門': [113.06, 22.61], '章丘': [117.53, 36.72], '肇慶': [112.44, 23.05], '大連': [121.62, 38.92], '臨汾': [111.5, 36.08], '吳江': [120.63, 31.16], '石嘴山': [106.39, 39.04], '瀋陽': [123.38, 41.8], '蘇州': [120.62, 31.32], '茂名': [110.88, 21.68], '嘉興': [120.76, 30.77], '長春': [125.35, 43.88], '膠州': [120.03336, 36.264622], '銀川': [106.27, 38.47], '張家港': [120.555821, 31.875428], '三門峽': [111.19, 34.76], '錦州': [121.15, 41.13], '南昌': [115.89, 28.68], '柳州': [109.4, 24.33], '三亞': [109.511909, 18.252847], '自貢': [104.778442, 29.33903], '吉林市': [126.57, 43.87], '陽江': [111.95, 21.85], '瀘州': [105.39, 28.91], '西寧': [101.74, 36.56], '宜賓': [104.56, 29.77], '呼和浩特': [111.65, 40.82], '成都': [104.06, 30.67], '大同': [113.3, 40.12], '鎮江': [119.44, 32.2], '桂林': [110.28, 25.29], '張家界': [110.479191, 29.117096], '宜興': [119.82, 31.36], '北海': [109.12, 21.49], '西安': [108.95, 34.27], '金壇': [119.56, 31.74], '東營': [118.49, 37.46], '牡丹江': [129.58, 44.6], '遵義': [106.9, 27.7], '紹興': [120.58, 30.01], '揚州': [119.42, 32.39], '常州': [119.95, 31.79], '濰坊': [119.1, 36.62], '重慶': [106.54, 29.59], '台州': [121.420757, 28.656386], '南京': [118.78, 32.04], '濱州': [118.03, 37.36], '貴陽': [106.71, 26.57], '無錫': [120.29, 31.59], '本溪': [123.73, 41.3], '克拉瑪依': [84.77, 45.59], '渭南': [109.5, 34.52], '馬鞍山': [118.48, 31.56], '寶雞': [107.15, 34.38], '焦做': [113.21, 35.24], '句容': [119.16, 31.95], '北京': [116.46, 39.92], '徐州': [117.2, 34.26], '衡水': [115.72, 37.72], '包頭': [110, 40.58], '綿陽': [104.73, 31.48], '烏魯木齊': [87.68, 43.77], '棗莊': [117.57, 34.86], '杭州': [120.19, 30.26], '淄博': [118.05, 36.78], '鞍山': [122.85, 41.12], '溧陽': [119.48, 31.43], '庫爾勒': [86.06, 41.68], '安陽': [114.35, 36.1], '開封': [114.35, 34.79], '濟南': [117, 36.65], '德陽': [104.37, 31.13], '溫州': [120.65, 28.01], '九江': [115.97, 29.71], '邯鄲': [114.47, 36.6], '臨安': [119.72, 30.23], '蘭州': [103.73, 36.03], '滄州': [116.83, 38.33], '臨沂': [118.35, 35.05], '南充': [106.110698, 30.837793], '天津': [117.2, 39.13], '富陽': [119.95, 30.07], '泰安': [117.13, 36.18], '諸暨': [120.23, 29.71], '鄭州': [113.65, 34.76], '哈爾濱': [126.63, 45.75], '聊城': [115.97, 36.45], '蕪湖': [118.38, 31.33], '唐山': [118.02, 39.63], '平頂山': [113.29, 33.75], '邢臺': [114.48, 37.05], '德州': [116.29, 37.45], '濟寧': [116.59, 35.38], '荊州': [112.239741, 30.335165], '宜昌': [111.3, 30.7], '義烏': [120.06, 29.32], '麗水': [119.92, 28.45], '洛陽': [112.44, 34.7], '秦皇島': [119.57, 39.95], '株洲': [113.16, 27.83], '石家莊': [114.48, 38.03], '萊蕪': [117.67, 36.19], '常德': [111.69, 29.05], '保定': [115.48, 38.85], '湘潭': [112.91, 27.87], '金華': [119.64, 29.12], '岳陽': [113.09, 29.37], '長沙': [113, 28.21], '衢州': [118.88, 28.97], '廊坊': [116.7, 39.53], '菏澤': [115.480656, 35.23375], '合肥': [117.27, 31.86], '武漢': [114.31, 30.52], '大慶': [125.03, 46.58], '臺北市': [121.56, 25.1], '新竹市': [121.01, 24.47], '黔西南布依族苗族自治州': [104.9043700000, 25.0898800000], '伊犁哈薩克自治州': [81.3241600000, 43.9168900000], '西雙版納傣族自治州': [100.79, 22.00], '黔東南苗族侗族自治州': [108.3, 27.3], '恩施土家族苗族自治州': [109.5, 30.3], '楚雄彝族自治州': [101.5276700000, 25.0449500000], '中衛': [105.18, 37.51], '黃岡': [114.87, 30.45], '塔城': [82.98, 46.74], '呼倫貝爾': [119.7658400000, 49.2116300000], '信陽': [114.09, 32.14], '周口': [114.69, 33.62], '紅河哈尼族彝族自治州': [103.37, 23.36], '懷化': [110.00, 27.56], '忻州': [112.73, 38.41], '衡陽': [112.57, 26.89], '賀州': [111.56, 24.40], '寧德': [119.54, 26.66], '巴彥淖爾': [107.38, 40.74], '漯河': [114.01, 33.58], '贛州': [114.93, 25.83], '綏化': [126.97, 46.65], '呂梁': [111.14, 37.51], '內江': [105.06, 29.58], '淮南': [116.99, 32.62], '河池': [108.08, 24.69], '眉山': [103.84, 30.07], '撫州': [116.35, 27.94], '潛江': [112.91, 30.36], '哈密': [93.51, 42.81], '新鄉': [113.9267500000, 35.3032300000], '漢中': [107.0237700000, 33.0676100000], '阜陽': [115.8149500000, 32.8896300000], '廣元': [105.8435700000, 32.4354900000], '安慶': [117.0635400000, 30.5429400000], '達州': [107.4679100000, 31.2086400000], '文山壯族苗族自治州': [104.2150400000, 23.3984900000], '商洛': [109.94, 33.87], '宜春': [114.41, 27.81], '黃石': [115.0389000000, 30.1995300000], '益陽': [112.3551600000, 28.5539100000], '莆田': [119.0077100000, 25.4540000000], '漳州': [117.6472500000, 24.5134700000], '上饒': [117.9435700000, 28.4546300000], '六盤水': [104.8302300000, 26.5933600000], '晉城': [112.8511300000, 35.4903900000], '十堰': [110.7980100000, 32.6291800000] }; var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; var barValue = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ value: data[i].value }); } } return res; }; var barName = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ value: data[i].name }); } } return res; }; function randomData() { return Math.round(Math.random() * 1000); } option = { backgroundColor: '#404a59', title: { text: 'ROKID語音請求量全國分佈', left: 'center', top: "20", textStyle: { color: '#fff', fontSize: "28" } }, tooltip: { trigger: 'item', formatter: function (params) { return params.name + ' : ' + params.value[2] + '次'; } }, geo: { map: 'china', label: { emphasis: { show: false } }, roam: true, itemStyle: { normal: { //地圖色塊 areaColor: '#323c48', borderColor: '#111' }, emphasis: { //地圖hover色塊 areaColor: '#2a333d' } } }, color: ['#3398DB'], visualMap: { min: 0, max: 15000, left: 'left', top: 'bottom', text: ['高', '低'], // 文本，默認爲數值文本 calculable: true, inRange: { color: ['#3dbfda', '#eac736', '#FE2E2E'] }, show: false }, series: [ { name: '訪問量', type: 'scatter', coordinateSystem: 'geo', data: convertData(data), symbolSize: function (val) { return 8; }, label: { normal: { formatter: '{b}', position: 'right', show: false }, emphasis: { show: true } }, itemStyle: { normal: { color: '#ddb926' } } }, { name: '訪問量Top 5', type: 'effectScatter', coordinateSystem: 'geo', data: convertData(data.sort(function (a, b) { return b.value - a.value; }).slice(0, 5)), symbolSize: function (val) { return 16; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke', period: 1, scale: 3.5 }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { //top10顏色 color: '#3dbfda', shadowBlur: 10, shadowColor: '#333' } }, zlevel: 1 } ] }; baroption = { backgroundColor: '#404a59', color: ['#3398DB'], title: { text: '語音請求量TOP10', left: 'center', top: '5%', textStyle: { color: '#fff' } }, tooltip: { trigger: 'axis', axisPointer: { // 座標軸指示器，座標軸觸發有效 type: 'shadow' // 默認爲直線，可選爲：'line' | 'shadow' } }, grid: { left: '0%', right: '6%', top: '20%', bottom: '10%', containLabel: true, show: false }, xAxis: [ { type: 'value', position: "top", axisLabel: { textStyle: { color: '#aaa' } }, splitLine: { show: false }, axisLine: { show: false }, axisTick: { show: false } } ], yAxis: [ { type: 'category', data: barName(data.sort(function (a, b) { return b.value - a.value; }).slice(0, 10)), inverse: true, axisTick: { alignWithLabel: true }, axisLabel: { textStyle: { color: '#aaa' } }, splitLine: { show: false }, axisLine: { show: false }, axisTick: { show: false } } ], series: [ { name: '語音訪問量', type: 'bar', barWidth: '60%', data: barValue(data.sort(function (a, b) { return b.value - a.value; }).slice(0, 10)), itemStyle: { normal: { color: '#3dbfda' } }, label: { normal: { show: true, position: 'right' } } } ] } var getData = function () { var url = '/api/statistics/city'; var voiceCount = 0, deviceCount = 0, voiceDOM = document.getElementsByClassName("voiceCount")[0], deviceDOM = document.getElementsByClassName("deviceCount")[0], cityDOM = document.getElementsByClassName("cityCount")[0], outer = document.getElementById("rtop"); fetch(url, { method: 'GET', credentials: 'same-origin', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } }).then((res) => { res.json().then((json) => { deviceDOM.innerHTML = json.device_count; cityDOM.innerHTML = json.data.length; data = json.data; data.forEach(function (item) { voiceCount += item.value; }) voiceDOM.innerHTML = voiceCount; // 使用剛指定的配置項和數據顯示圖表。 option.series[0].data = convertData(data); option.series[1].data = convertData(data.sort(function (a, b) { return b.value - a.value; }).slice(0, 11)); baroption.yAxis[0].data = barName(data.sort(function (a, b) { return b.value - a.value; }).slice(0, 11)); baroption.series[0].data = barValue(data.sort(function (a, b) { return b.value - a.value; }).slice(0, 11)); myChart.setOption(option); barChart.setOption(baroption); outer.style.display = "block"; }) }) } getData(); var timer = setInterval(function () { getData(); }, 135000) </script> </body> </html>
接口數據的格式json
{
"data": [
{
"name": "金華",
"value": 23
},
{
"name": "韶關",
"value": 4
},
{
"name": "福州",
"value": 32
}
],
"device_count": 111,
"errcode": 0,
"errmsg": ""
}
備註，供之後參考和使用api
相關文章
- 1. Echarts 圖例交互事件
- 2. echarts 動態數據交互實例
- 3. Echarts 後臺交互
- 4. zynq ps/pl交互接口
- 5. echarts餅圖--數據交互
- 6. Android與js交互實例
- 7. echarts折線圖實例一
- 8. ECharts第一個實例
- 9. 枚舉 實例
- 10. 前端與後端接口的交互案例
- 更多相關文章...
- • Kotlin 接口 - Kotlin 教程
- • C# 接口（Interface） - C#教程
- • 算法總結-滑動窗口
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Echarts 圖例交互事件
- 2. echarts 動態數據交互實例
- 3. Echarts 後臺交互
- 4. zynq ps/pl交互接口
- 5. echarts餅圖--數據交互
- 6. Android與js交互實例
- 7. echarts折線圖實例一
- 8. ECharts第一個實例
- 9. 枚舉 實例
- 10. 前端與後端接口的交互案例