如何简单快速的做出一个中国地图,并且显示各个省份名称数据;
用 Echarts 即可以简单快速写出;
需要导入 china.js(现在官方不提供下载,需要自行下载,也可以留言获取链接)。
成品预览图:
源码:
<!DOCTYPE html> <html> <head> 首先,引入jquery.js echarts.js china.js(必要) <script src="/jquery.js"></script> <script src="echarts.min.js"></script> <script src="china.js"></script> <head> <body> <!--<创建一个DIV容器 方便初始化--> <div id="china-map" style="width:1300px;height:900px;"></div> </body> <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(), }, { 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: 'center' }, { //右上角全部 text: '合计 : ' + sum0, left: 'center', top: 50, width: 100, textStyle: { color: '#555', fontSize: 16 } }], tooltip: { trigger: 'item' }, visualMap: { //左下角拉条 min: 0, max: 2500, // left: 'left', top: '60%', text: ['高', '低'], calculable: true, colorLightness: [0.2, 100], color: ['#313CFF', '#CACDFF'], dimension: 0 }, toolbox: { //右边工具栏 show: true, orient: 'vertical', // left: 'right', // top: 'center', feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} } }, grid: { //右边的柱状图 right: '5%', top: '30%', bottom: '30%', // 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: '5%', top: '24%', bottom: '30%', height: '50%', width: '50%', zoom: 1, label: { normal: { show: true }, emphasis: { show: true } }, //roam: true, data: resultdata0 }, { //柱状图 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> </html>
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于