如何简单快速的做出一个中国地图,并且显示各个省份名称数据；
用 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>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于