html+js+css+接口交互+echarts实例一枚
Posted zhzhang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html+js+css+接口交互+echarts实例一枚相关的知识，希望对你有一定的参考价值。
1. 解决了echarts的展现
2. 解决了echarts全屏幕展现（width:100%;height:100%;）
3. 解决了向接口取数据问题
<!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>
接口数据的格式
{
"data": [
{
"name": "金华",
"value": 23
},
{
"name": "韶关",
"value": 4
},
{
"name": "福州",
"value": 32
}
],
"device_count": 111,
"errcode": 0,
"errmsg": ""
}
备注，供以后参考和使用
以上是关于html+js+css+接口交互+echarts实例一枚的主要内容，如果未能解决你的问题，请参考以下文章
HTML+CSS+JS实现 ❤️echarts大数据统计图表实例❤️
HTML+CSS+JS实现 ❤️echarts企业地区大数据图表模板❤️