<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>中国地图</title>
<!-- 先引入 echarts js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<!-- 再引入china.js -->
<script src="./china.js"></script>
</head>
<body>
<!--
地图的使用:
1:先引入 echarts.js 然后在引入 china.js
-->
<div id="china_chart" style="width: 1000px;height:560px;border:1px solid #999;"></div>
<script>
var china_chart = echarts.init(document.getElementById('china_chart'));
//静态的数据,数据的格式和饼图的一致。
var data = [{
name: '江苏',
value: 100
},
{
name: '北京',
value: 86
},
{
name: '上海',
value: 68
},
{
name: '重庆',
value: 123
},
{
name: '河北',
value: 34
},
{
name: '河南',
value: 32
},
{
name: '云南',
value: 160
},
{
name: '辽宁',
value: 43
},
{
name: '黑龙江',
value: 181
},
{
name: '湖南',
value: 24
},
{
name: '安徽',
value: 33
},
{
name: '山东',
value: 54
},
{
name: '新疆',
value: 118
},
{
name: '浙江',
value: 44
},
{
name: '江西',
value: 220
},
{
name: '湖北',
value: 21
},
{
name: '广西',
value: 30
},
{
name: '甘肃',
value: 12
},
{
name: '山西',
value: 32
},
{
name: '内蒙古',
value: 35
},
{
name: '陕西',
value: 25
},
{
name: '吉林',
value: 45
},
{
name: '福建',
value: 28
},
{
name: '贵州',
value: 18
},
{
name: '广东',
value: 37
},
{
name: '青海',
value: 62
},
{
name: '西藏',
value: 43
},
{
name: '四川',
value: 33
},
{
name: '宁夏',
value: 8
},
{
name: '海南',
value: 19
},
{
name: '台湾',
value: 190
},
{
name: '香港',
value: 11
},
{
name: '澳门',
value: 10
}
];
var option = {
title: {
text: '中国地图',
},
tooltip: {
// 自定义弹窗
// formatter: '{a}<br>{b}:{c}',//{a}: 系列中的name的属性值。{b}系列中具体的数据的内容。{c}:内容对应的值,如果存在多个系列。
//使用函数 将系列中的
// 鼠标引入省份,不断触发.params 对象.当前省份的信息.
formatter: function (params) {
// console.log(params);
return params.seriesName + "<br>" + params.name + ":" + params.value;
}
},
// 视觉映射组件,负责地图的颜色的配置。
visualMap: [{
// 组件的类型,连续的
// type:"continuous",
// 不连续的
type: "piecewise",
// 自定义颜色块区间
// pieces: [
// { min: 201,label:">200",color:"#222" },
// { min: 101, max: 200, label: '101-200',color:"#666" },
// { min: 51, max: 100, label: '51-100',color:"#999" },
// { min: 11, max: 50, label: '11-50',color:"#aaa" },
// { min: 1, max: 10, label: '1-10',color:"#ccc" },
// // 单独的一个值。
// { value:0,label:"0",color:"#eee"}
// ]
// 取值的最小值
min: 0,
//最大值。
max: 250,
itemWidth: 25,
itemHeight: 15,
// 组件两端的文本。
// text:["高","低"],
// 指定取哪个系列的数据,即哪个系列的 series.data。
seriesIndex: [0],
// 组件的颜色的范围。
inRange: {
color: ['orange', 'red']
},
// 组件的排列方式
// orient:"horizontal",
// 默认垂直布局
orient: "vertical",
}],
//地图的核心区域
geo: {
//地图的类型
map: 'china',
//缩放比例
zoom: 1,
//地图上的文字
label: {
show: true
},
//高亮选中
emphasis: {
label: {
show: true
},
itemStyle: {
areaColor: 'pink'
}
}
},
//系列
series: [{
name: '中国',
type: 'map',
geoIndex: 0,
data: data
}]
};
//渲染视图
china_chart.setOption(option);
</script>
</body>
</html>
06-29
192
12-05
5008
04-28