地图图表的开发在我们开发的过程中就很常见，特别是在开发大屏的时候，最近在进行地图图表的开发，就单独用引入的方式来记录一个DOM，让大家一起学习下。
示例图
从上图可以看到，这个主要是就是对地图做个一个展示，省份的高亮，各个板块的颜色修改的一些功能的DOM。
因为我使用是html来写的，所以都是用引入的模式来进行开发
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000"></script>
//地图的js
<script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js?v=1598903772045"></script>
html板块。旁边的颜色块选择修改的模块就不一一展示了。
<div id="box" :style="{
'background-color': form.backgroundColor}" style="width: 800px; height: 600px;"></div>
下面就是JS方法板块
因为我添加了颜色的图层展示，就导致了地图样式修改会失效，比较已经给了底色
initMap(){
var myEcharts = echarts.init(document.getElementById("box"));
var option = {
title: {
text: this.form.title,
x: "center",
textStyle: {
fontSize: 18,
color: this.form.titleColor
},
},
tooltip: {
trigger: 'item',
backgroundColor: "#588ED5",
formatter: '地区：{b}<br/>value：{c}'
},
visualMap: {
show: true,
type: 'piecewise',
calculable: true,
showLabel: true,
itemSymbol: 'rect',
left: 20,
top: 20,
itemWidth: 20,
itemHeight: 6,
inRange: {
color: ['rgb(163,163,163)','#FEE5Da', '#FCBAA0', '#F66B4A', '#DE2D27','#A60F14']
},
padding: 0,
pieces: [
{
min: 50000, label: '>50000', symbol: 'rect' }, // 不指定 max，表示 max 为无限大（Infinity）。
{
min: 4000, max: 50000,label: '4000~50000', symbol: 'rect' }, // 不指定 max，表示 max 为无限大（Infinity）。
{
min: 300, max: 4000,label: '300~4000', symbol: 'rect' }, // 不指定 max，表示 max 为无限大（Infinity）。
{
min: 1, max: 20, label: '1~20', symbol: 'rect' },
{
min: 0, max: 1, label: '0~1', symbol: 'rect' },
{
min: 0, max: 0, label: '无数据', symbol: 'rect' }
],
align: "left",
itemGap: 5,
textStyle: {
color: '#000'
},
},
series: [
{
name: '地图',
type: 'map',
mapType: 'china',
roam: false,
itemStyle: {
// show:false,
normal: {
areaColor: this.form.areaColor,
label: {
show: true,//是否显示标签
textStyle: {
color: this.form.wordColor
}
}
},
zoom: 1.5,
emphasis: {
//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
areaColor: this.form.highlightColor,
label: {
show: true }
}
},
top: "4%",
data: [
{
name: '北京', value: 0 },
{
name: '天津', value: 0 },
{
name: '上海', value: 0 },
{
name: '重庆', value: 0 },
{
name: '河北', value: 0 },
{
name: '河南', value: 0 },
{
name: '云南', value: 0 },
{
name: '辽宁', value: 0 },
{
name: '黑龙江', value: 10 },
{
name: '湖南', value: 0 },
{
name: '安徽', value: 0 },
{
name: '山东', value: 400 },
{
name: '新疆', value: 0 },
{
name: '江苏', value: 0 },
{
name: '浙江', value: 0 },
{
name: '江西', value: 0 },
{
name: '湖北', value: 0 },
{
name: '广西', value: 1500 },
{
name: '甘肃', value: 0 },
{
name: '山西', value: 0 },
{
name: '内蒙古', value: 0 },
{
name: '陕西', value: 0 },
{
name: '吉林', value: 0 },
{
name: '福建', value: 0 },
{
name: '贵州', value: 0 },
{
name: '广东', value: 0 },
{
name: '青海', value: 0 },
{
name: '西藏', value: 10000 },
{
name: '四川', value: 0 },
{
name: '宁夏', value: 0 },
{
name: '海南', value: 0 },
{
name: '台湾', value: 0 },
{
name: '香港', value: 0 },
{
name: '澳门', value: 0 }
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myEcharts.setOption(option,true);
}
上面js的data的省份数据，记得名字要一样的，不能修改。