echart中国地图网页demo.rar资源-CSDN文库

共4个文件

js：3个

html：1个

echart

地图可视化

需积分: 37 56 浏览量 2020-04-23 16:56:26 上传评论收藏 76KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

地图js.rar （4个子文件）

地图js

map.html 5KB

china.js 60KB

echarts-gl.js 9KB

jquery-2.1.1.min.js 82KB

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #china-map{width:100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> 　　 <script src="jquery-2.1.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.min.js"></script> <script src="china.js"></script> <title>根据关键字本地搜索</title> </head> <body> 　　<div id="china-map"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('china-map')); function randomData() { return Math.round(Math.random() * 1000); } var data = [{ name: '云南', value1: randomData(), value2: randomData(), }, { name: '辽宁', value1: randomData(), value2: randomData(), }, { name: '黑龙江', value1: randomData(), value2: randomData(), }, { name: '湖南', value1: randomData(), value2: randomData(), },{ name: '福建', value1: randomData(), value2: randomData(), }, { name: '贵州', value1: randomData(), value2: randomData(), }, { name: '广东', value1: randomData(), value2: randomData(), }, { name: '青海', value1: randomData(), value2: randomData(), }, { name: '西藏', value1: randomData(), value2: randomData(), }, { name: '四川', value1: randomData(), value2: randomData(), }]; var resultdata0 = []; var sum0 = 0; var titledata = []; for (var i = 0; i < data.length; i++) { var d0 = { name: data[i].name, value: data[i].value1 + data[i].value2 }; titledata.push(data[i].name) resultdata0.push(d0); sum0 += data[i].value1 + data[i].value2; } function NumDescSort(a,b){ return a.value-b.value; } resultdata0.sort(NumDescSort); var option = { title: [{ //标题 text: '销售量统计', subtext: '纯属虚构', left: 'left' },{ //右上角全部 text: '全部: ' +sum0, right: '54%', top: 40, width: 100, textStyle: { color: '#555', fontSize: 16 } }], tooltip: { trigger: 'item' }, visualMap: { 　　//左下角拉条 min: 0, max: 2500, left: 'left', top: '50', text: ['高', '低'], calculable: true, colorLightness: [0.2, 100], color: ['#c05050','#e5cf0d','#5ab1ef'], dimension: 0 }, toolbox: { //右边工具栏 show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } }, grid: { //右边的bar right: '30%', top: 100, bottom: 40, height:'40%', width: '30%' }, xAxis: [{ position: 'top', type: 'value', boundaryGap: false, splitLine: { show: false }, axisLabel:{ rotate:45, 　　　　//刻度旋转45度角 textStyle:{ } } }], yAxis: [{ type: 'category', data: titledata, axisTick: { alignWithLabel: true } }], barWidth:30, series: [{ //地图 z: 1, name: '全部', type: 'map', map: 'china', left: '10', right: '70%', top: 100, bottom: "35%", zoom: 1, label: { normal: { show: true }, emphasis: { show: true } }, //roam: true, data: resultdata0 }, { //bar name: '全部', z: 2, type: 'bar', barWidth: '%10', label: { normal: { show: true }, emphasis: { show: true, } }, itemStyle: { emphasis: { color: "rgb(254,153,78)" } }, data: resultdata0 }] }; myChart.setOption(option); </script> </body> </html>

评论收藏

内容反馈